Как организовать панели стеллажа в панели стека?

Question

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

Answer 1

Zahorak правильный. Существует несколько способов создания этого макета, лучшим из которых является сетка или DockPanel. Я предпочитаю DockPanel. DockPanel позволяет размещать дочерние элементы управления по краю DockPanel, заполняя остальную часть DockPanel (если вы не укажете иначе) с последним дочерним элементом управления. Например, для достижения результата вы после этого, XAML будет

<DockPanel> 
     <StackPanel DockPanel.Dock="Top"> 
      <TextBlock Text="Stack Panel 2" /> 
     </StackPanel> 
     <StackPanel DockPanel.Dock="Left"> 
      <TextBlock Text="Stack Panel 3" /> 
     </StackPanel> 
     <StackPanel DockPanel.Dock="Bottom"> 
      <TextBlock Text="Stack Panel 5" /> 
     </StackPanel> 
     <StackPanel> 
      <TextBlock Text="Stack Panel 4" /> 
     </StackPanel> 
    </DockPanel> 

Грид макет требует немного больше работы.

<Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition Width="2*" /> 
     </Grid.ColumnDefinitions> 

     <StackPanel Grid.ColumnSpan="2"> 
      <TextBlock Text="Stack Panel 2" /> 
     </StackPanel> 
     <StackPanel Grid.Row="1" Grid.RowSpan="2"> 
      <TextBlock Text="Stack Panel 3" /> 
     </StackPanel> 
     <StackPanel Grid.Row="1" Grid.Column="1"> 
      <TextBlock Text="Stack Panel 4" /> 
     </StackPanel> 
     <StackPanel Grid.Row="2" Grid.Column="1"> 
      <TextBlock Text="Stack Panel 5" /> 
     </StackPanel> 
    </Grid> 

Обратите внимание, что отсутствует Grid.Row или Grid.Column означает значение 0 (первая строка или первая колонка).

Надеюсь, это поможет.

Answer 2

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

<StackPanel Orientation="Vertical" Name="StackPanel1"> 
    <StackPanel Orientation="Horizontal" Name="StackPanel2"> 

    <StackPanel> 
    <StackPanel Orientation="Horizontal"> 
     <StackPanel Orientation="Vertical" Name="StackPanel3"> 

     <StackPanel> 
     <StackPanel Orientation="Vertical"> 
      <StackPanel Orientation="Horizontal" Name="StackPanel4"> 

      <StackPanel> 
      <StackPanel Orientation="Horizontal" Name="StackPanel5"> 

      <StackPanel> 
     <StackPanel> 
    <StackPanel> 
<StackPanel>