Dockpanel Fix Bottom Child

Question

Я пытаюсь создать макет, который бы фиксировал нижнюю часть двух строк, чтобы они всегда были видны. проблема в том, что содержание нижнего ряда должно быть наверху, что затрудняет использование док-панели. вот краткий обзор:

here is a link with pictures для всех окон:

(жаль об этом, но StackOverflow не позволит мне размещать фотографии еще ..)

первое окно, как это должно выглядеть когда есть много свободного места, нижний (синий) придерживается верхней части (красный).

код выглядит следующим образом:

<DockPanel> 

    <Grid VerticalAlignment="Top" 
      Background="Red" 
      DockPanel.Dock="Top"> 
     <Grid Height="100" /> 
    </Grid> 

    <Grid Height="20" 
      Background="Blue" 
      VerticalAlignment="Top" 
      DockPanel.Dock="Bottom" /> 

</DockPanel> 

, но когда я размер окна так, вторая строка не помещается больше, то вторая строка не является фиксированным и будет невидим, когда окно слишком мал: окно 2

так, что я хочу что-то вроде этого:

<DockPanel> 
    <Grid Height="20" 
      Background="Blue" 
      DockPanel.Dock="Bottom" /> 

    <Grid VerticalAlignment="Top" 
      Background="Red" 
      DockPanel.Dock="Top"> 
     <Grid Height="100" /> 
    </Grid> 
</DockPanel> 

, который дает мне следующее с достаточно свободного пространства: окно 3

и это при изменении размера окна: окно 4

дно фиксировано. Проблема здесь в том, что, когда есть слишком много места, вторая строка не прилипает к вершине, а внизу, как на третьем рисунке. Я играл с DockPanel.LastChildFill и дочерним заказом в докпанселе. Я пробовал различные макеты с использованием одной или нескольких гридов, но не мог заставить ее работать. как бы я это сделал?

Редактировать: @publicgk: вы правы, второе окно было неправильным, я обновил ссылку.

Кроме того, я попытаюсь объяснить себя немного лучше. Учитывая, что первый ряд полностью красный, а второй - это остальные (синий и белый вместе). Затем первый пример кода дает мне первое и второе окно: хотя содержимое второй строки (синяя часть) находится наверху (окно1, что я и хочу), вторая строка не фиксирована/всегда отображается, когда i изменить размер окна (окно 2).

Второй образец кода создает окна 3 и 4, а содержимое находится внизу второй строки, когда окно достаточно большое (окно 3, а не то, что я хочу), вторая строка видна даже при изменении размера окно (окно 4, это то, что я хочу), поэтому вторая строка перекрывает первую.

Чтобы подвести итог, мне нужны строки, чтобы вести себя как окно 1, когда есть достаточно места и как окно 4, когда нет.

Редактировать 2: Я забыл упомянуть, что первая строка должна содержать содержимое, размер которого неизвестен и изменен, поэтому использование сетки и высоты установки или максимума первой строки не будет работать. однако высота второй строки известна и может быть установлена ​​непосредственно.

вот пример, который показывает эту проблему:

<Window x:Class="WpfApplication2.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:WpfApplication2" 
    Title="MainWindow" 
    Width="525" 
    Height="350"> 
<Window.Resources> 
    <local:RandomHeightConverter x:Key="RandomHeightConverter"/> 
</Window.Resources> 
<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="100*" MaxHeight="100"/> 
     <RowDefinition Height="20" /> 
    </Grid.RowDefinitions> 

    <Grid Grid.Row="0" Background="Red" Height="{Binding Converter={StaticResource RandomHeightConverter}}" /> 
    <Grid Grid.Row="1" Background="Blue" /> 
</Grid> 

public class RandomHeightConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     return new Random().Next(20, 100); 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

, который будет производить результаты как это: variable first row problem

Answer 1

Не уверен, что если вы можете это сделать макет, используя DockPanel , но вы можете использовать Grid для выполнения такого макета.

Нечто подобное дублирует то, что вы пытаетесь сделать

<Window x:Class="WpfApplication9.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="clr-namespace:WpfApplication9" 
     Title="MainWindow" Height="209" Width="525" Name="UI"> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="100*" MaxHeight="100" /> 
       <RowDefinition Height="20" /> 
      </Grid.RowDefinitions> 
      <Grid Grid.Row="0" Background="Red" /> 
      <Grid Grid.Row="1" Background="Blue" /> 
     </Grid> 
</Window> 

Или связать RowDefinition размеры к содержанию вы хотите показать, поэтому в приведенном ниже примере верхний sction будет размер, чтобы исправить его содержимое, но может усадка, нижняя строка фиксированного размера до нижнего содержимого и будет перекрываться, когда размер окна меньше, чем верхний ряд.

<Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*" MaxHeight="{Binding ElementName=topContent, Path=ActualHeight, Mode=OneTime}" /> 
      <RowDefinition Height="{Binding ElementName=bottomContent, Path=ActualHeight,Mode=OneTime}" /> 
     </Grid.RowDefinitions> 
     <Grid x:Name="topContent" Grid.Row="0" > 
      <!--your top content--> 
      <Grid Height="200" Background="Red" /> 
     </Grid> 
     <Grid Grid.Row="1" > 
      <!--your bottom content--> 
      <Grid x:Name="bottomContent" VerticalAlignment="Top" Height="20" Background="Blue" /> 
     </Grid> 
    </Grid> 

Результат: