Adjust height/position of multiple listviews so th

2019-09-02 18:30发布

I'm designing an application where I need to position multiple ListViews in a way that the content is aligned like this (simplified): enter image description here

What I have:

  • The outer layout is a Grid (black)
  • The ListView (grey) on the left has a small header
  • The ListViews (grey) on the right are generated in an ItemsControl and have a fairly large header (vertical text). Also, they are part of a UserControl with additional content above them (not shown here)

What I want:

  • The contents (red) of all ListViews 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 ListViews 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>

0条回答
登录 后发表回答