调整多个列表视图的高度/位置,以便内容对齐

时间:2016-08-16 15:28:51

标签: wpf xaml listview layout grid

我正在设计一个应用程序,我需要以一种内容如此对齐(简化)的方式定位多个ListViewenter image description here

我拥有的:

  • 外部布局为Grid(黑色)
  • 左侧的ListView(灰色)标题为
  • 右侧的ListView s(灰色)在ItemsControl中生成,并且具有相当大的标题(垂直文本)。此外,它们是UserControl的一部分,其上方有其他内容(此处未显示)

我想要的是什么:

  • 所有ListView s的内容(红色)应对齐并从相同高度(蓝线)开始
  • 我想要将标题(绿色)设置为具有相同的高度,因为由于高度差异会占用很多空间。

我能想到的唯一解决方案是计算ListView以上所有元素的高度和标题的高度,然后更改上Grid行的高度,以便内容从相同的高度开始。但这对我来说似乎相当乏味,容易出错并且很笨拙。

是否有更优雅的解决方案,可能涉及SharedGroupSize或绑定高度属性?

整体布局的XAML:

    <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>

ItemsControl中ListViews的XAML:

<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 个答案:

没有答案