I'm designing an application where I need to position multiple ListView
s in a way that the content is aligned like this (simplified):
What I have:
- The outer layout is a
Grid
(black) - The
ListView
(grey) on the left has a small header - The
ListView
s (grey) on the right are generated in anItemsControl
and have a fairly large header (vertical text). Also, they are part of aUserControl
with additional content above them (not shown here)
What I want:
- The contents (red) of all
ListView
s should be aligned and start at the same height (blue line) - I DON'T want to set the headers (green) to have the same height, because that would waste much space due to the large height difference.
The only solution I can think of is to calculate the height of all elements above the ListView
s and the height of the headers, and then change the height of the upper Grid
row so that the contents start at the same height. But that seems rather tedious, error prone and clumsy to me.
Is there a more elegant solution, maybe involving SharedGroupSize
or binding the height property?
XAML for the overall layout:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<local:SomeControl1 x:Name="generalSettingsControl" Grid.Column="0" Grid.Row="0" />
<ListView ItemsSource="{Binding FirstList}">
<ListView.View>
<GridView>
<GridViewColumn Header="Name"
DisplayMemberBinding="{Binding CombinedName}" />
<GridViewColumn Header="ID"
DisplayMemberBinding="{Binding ID}" />
</GridView>
</ListView.View>
</ListView>
<ItemsControl Grid.Column="1" Grid.RowSpan="2" ItemsSource="{Binding Samples}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:ListViewUserControl DataContext="{Binding }" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
XAML for the ListViews in the ItemsControl :
<UserControl.Resources>
<Style x:Key="verticalGridViewColumnHeader" TargetType="GridViewColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding}" FontWeight="Bold" Width="60"
VerticalAlignment="Center" TextAlignment="Center" HorizontalAlignment="Center">
<TextBlock.LayoutTransform>
<RotateTransform Angle="270" />
</TextBlock.LayoutTransform>
</TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBox Text="Placeholder (TODO)" Grid.Column="0" />
<ListView x:Name="lvMeasurementsEdit"
ItemsSource="{Binding Measurements}"
Grid.Column="0"
Grid.Row="2">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView>
<GridViewColumn Header="Value 1" DisplayMemberBinding="{Binding Value1}"
HeaderContainerStyle="{StaticResource verticalGridViewColumnHeader}" Width="Auto" />
<GridViewColumn Header="Value 2" DisplayMemberBinding="{Binding Value2}"
HeaderContainerStyle="{StaticResource verticalGridViewColumnHeader}" Width="Auto" />
</GridView>
</ListView.View>
</ListView>
</Grid>