2017-02-23 50 views
-1

У меня есть WPF WrapPanel, который ориентирован горизонтально. Когда я добавляю дочерние элементы, например, Grid, все они имеют одинаковую высоту. Как я могу заставить разных детей иметь разную высоту? Возможно ли это сделать без использования стороннего программного обеспечения? Я попытался реализовать WPF Masonry, но у него было много ошибок, и я отказался от этого.Установите горизонтально ориентированные дети WrapPanel, чтобы иметь разную высоту

Например, если мой первый Grid имеет 3 ряда, а второй имеет 6 рядов, первый простирается до высоты второго Grid.

Это то, что я прямо сейчас: enter image description here

И это то, что я пытаюсь достичь:

enter image description here

EDIT:

Мой XAML:

<WrapPanel Background="White" Height="200"> 
    <Grid Style="{StaticResource grdRate}"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"></ColumnDefinition> 
      <ColumnDefinition Width="Auto"></ColumnDefinition> 
      <ColumnDefinition Width="Auto"></ColumnDefinition> 
      <ColumnDefinition Width="Auto"></ColumnDefinition> 
     </Grid.ColumnDefinitions> 

     <Grid.RowDefinitions> 
      <RowDefinition></RowDefinition> 
      <RowDefinition></RowDefinition> 
     </Grid.RowDefinitions> 

     <Border Grid.Row="0" Grid.Column="0" Style="{StaticResource brdRate}"> 
      <Label Content="Content" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
     <Border Grid.Row="0" Grid.Column="1" Style="{StaticResource brdRate}"> 
      <Label Content="1" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
     <Border Grid.Row="0" Grid.Column="2" Style="{StaticResource brdRate}"> 
      <Label Content="Content" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
     <Border Grid.Row="0" Grid.Column="3" Style="{StaticResource brdRate}"> 
      <Label Content="1" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 

     <Border Grid.Row="1" Grid.Column="0" Style="{StaticResource brdRate}"> 
      <Label Content="123" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
     <Border Grid.Row="1" Grid.Column="1" Style="{StaticResource brdRate}"> 
      <Label Content="123" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
     <Border Grid.Row="1" Grid.Column="2" Style="{StaticResource brdRate}"> 
      <Label Content="123" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
     <Border Grid.Row="1" Grid.Column="3" Style="{StaticResource brdRate}"> 
      <Label Content="123" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
    </Grid> 

    <Grid Style="{StaticResource grdRate}"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"></ColumnDefinition> 
      <ColumnDefinition Width="Auto"></ColumnDefinition> 
      <ColumnDefinition Width="Auto"></ColumnDefinition> 
     </Grid.ColumnDefinitions> 

     <Grid.RowDefinitions> 
      <RowDefinition></RowDefinition> 
      <RowDefinition></RowDefinition> 
      <RowDefinition></RowDefinition> 
      <RowDefinition></RowDefinition> 
      <RowDefinition></RowDefinition> 
     </Grid.RowDefinitions> 

     <Border Grid.Row="0" Grid.Column="0" Style="{StaticResource brdRate}"> 
      <Label Content="name" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
     <Border Grid.Row="0" Grid.Column="1" Style="{StaticResource brdRate}"> 
      <Label Content="Details" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
     <Border Grid.Row="0" Grid.Column="2" Style="{StaticResource brdRate}"> 
      <Label Content="name" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 

     <Border Grid.Row="1" Grid.Column="0" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
     <Border Grid.Row="1" Grid.Column="1" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
     <Border Grid.Row="1" Grid.Column="2" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 

     <Border Grid.Row="2" Grid.Column="0" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
     <Border Grid.Row="2" Grid.Column="1" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
     <Border Grid.Row="2" Grid.Column="2" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 

     <Border Grid.Row="3" Grid.Column="0" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
     <Border Grid.Row="3" Grid.Column="1" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
     <Border Grid.Row="3" Grid.Column="2" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 

     <Border Grid.Row="4" Grid.Column="0" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
     <Border Grid.Row="4" Grid.Column="1" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
     <Border Grid.Row="4" Grid.Column="2" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
    </Grid> 
</WrapPanel> 

Мои стили:

<Style TargetType="Border" x:Key="brdRate"> 
    <Setter Property="BorderBrush" Value="White"></Setter> 
    <Setter Property="BorderThickness" Value="0.5"></Setter> 
</Style> 

<Style TargetType="Label" x:Key="lblRateBold"> 
    <Setter Property="FontSize" Value="14"></Setter> 
    <Setter Property="FontWeight" Value="Bold"></Setter> 
    <Setter Property="HorizontalAlignment" Value="Center"></Setter> 
</Style> 

<Style TargetType="Label" x:Key="lblRate"> 
    <Setter Property="FontSize" Value="14"></Setter> 
    <Setter Property="HorizontalAlignment" Value="Center"></Setter> 
    <Setter Property="Cursor" Value="Hand"></Setter> 
    <Style.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="Background" Value="#40FF00"></Setter> 
     </Trigger> 
    </Style.Triggers> 
</Style> 

<Style TargetType="Grid" x:Key="grdRate"> 
    <Setter Property="Background" Value="#BDBDBD"></Setter> 
    <Setter Property="Margin" Value="5"></Setter> 
</Style> 
+0

Я не совсем понимаю, что вы пытаетесь сделать , Предполагая, что дисплей динамичен (следовательно, не жестко кодирует значения), вы могли бы использовать пользовательский оценочный преобразователь на высоте? Вы можете установить min/max как ConverterParameters. – HockeyJ

+0

@HockeyJ, пожалуйста, см. Мой отредактированный пост. –

ответ

1

Как я могу сделать у разных детей, чтобы иметь различную высоту?

насчет установки Height свойства Grid элементов, добавляемых к WrapPanel некоторых различным значений?

<WrapPanel x:Name="wp"> 
    <Grid Background="Silver" Height="300" Width="50" /> 
    <Grid Background="Silver" Height="20" Width="50" /> 
    <Grid Background="Silver" Height="150" Width="50" /> 
</WrapPanel> 

Grid grid = new Grid() { Background = Brushes.Silver, Width = 50, Height = 100 }; 
wp.Children.Add(grid); 

Edit:

Возможно, вы также хотите установить VerticalAlignment свойство Grid в Top для того, чтобы не растянуть по вертикали:

<Grid Style="{StaticResource grdRate}" VerticalAlignment="Top"> 
... 
+0

См. Мой отредактированный пост. Я добавил несколько подробностей. –

+0

«если моя первая сетка имеет 3 строки, а вторая имеет 6 строк» ​​непонятна. Пожалуйста, разместите свой XAML и соответствующие фрагменты кода. – mm8

+0

Пожалуйста, проверьте мой код XAML. Первая 'Grid' имеет 3' RowDefitions', а вторая имеет 5, например. –

Смежные вопросы