带有响应列的 UWP ListView答案

【问题标题】：UWP ListView with responsive columns带有响应列的 UWP ListView
【发布时间】：2017-06-05 02:12:09
【问题描述】：

我研究了 Google，查看了 UWP 示例，但找不到解决此问题的方法。基本上，我想要一个带有自动调整网格列大小的列表视图。例如，您有 Groove 音乐歌曲视图。我想实现这样的行为。

每当您调整 Groove 的大小时，列表视图都会通过扩展、收缩或隐藏列来调整自己的大小。我可以使用 VisualStates 和 AdaptiveTrigger 处理隐藏部分，但不知道如何处理网格的扩展/收缩。

要注意的另一件事是，每个文本框的项目都是统一的，具有相同的宽度。如果碰巧一首歌的名字比平时长，它们不会显得模糊和没有规律。

我有这个数据模板：

       <DataTemplate x:Key="MediafileUnselectedTemplate">            
            <Grid Height="50">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock x:Name="titleTxt" Grid.Column="0" Width="400"       TextWrapping="NoWrap" TextTrimming="Clip" Text="{Binding Title}" VerticalAlignment="Center"/>
                <TextBlock x:Name="artistTxt" Grid.Column="1" Width="200" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding LeadArtist}"  VerticalAlignment="Center"/>
                <TextBlock x:Name="albumTxt" Grid.Column="2" Width="200" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Album}" VerticalAlignment="Center"/>
                <TextBlock x:Name="yearTxt" Grid.Column="3" Width="100" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Year}" VerticalAlignment="Center"/>
                <TextBlock x:Name="genreTxt" Grid.Column="4" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Genre}" VerticalAlignment="Center"/>
                <TextBlock x:Name="durationTxt" Grid.Column="5" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Length}" VerticalAlignment="Center"/>
            </Grid>
        </DataTemplate>

我能做到的：我可以设置MinWidths 或只是Widths 将它们设置为统一，但它们会失去适应性，只是不根据页面调整大小。

任何帮助将不胜感激！提前谢谢！

【问题讨论】：

标签： c# xaml uwp uwp-xaml

【解决方案1】：

        <Grid Height="50">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="400*"/>
            <ColumnDefinition Width="200*"/>
            <ColumnDefinition Width="200*"/>
            <ColumnDefinition Width="100*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TextBlock x:Name="titleTxt" Grid.Column="0"        TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Text="{Binding Title}" VerticalAlignment="Center"/>
        <TextBlock x:Name="artistTxt" Grid.Column="1"   Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding LeadArtist}"  VerticalAlignment="Center"/>
        <TextBlock x:Name="albumTxt" Grid.Column="2"  Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Album}" VerticalAlignment="Center"/>
        <TextBlock x:Name="yearTxt" Grid.Column="3"  Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Year}" VerticalAlignment="Center"/>
        <TextBlock x:Name="genreTxt" Grid.Column="4" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Genre}" VerticalAlignment="Center"/>
        <TextBlock x:Name="durationTxt" Grid.Column="5" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Length}" VerticalAlignment="Center"/>
    </Grid>

【讨论】：

这要好得多，但如果不设置每个元素的宽度，它就不起作用。此外，在设置宽度后，列会变得响应，但在固定值后它们会停止扩展。

【解决方案2】：

我在您的 DataTemplate 中看到您为 TextBlocks 设置了显式宽度。从那里开始，WPF 将始终保持此宽度，即使您调整容器控件的大小。

代替将 ColumnDefinitions 的宽度设置为 Auto，将其设置为“*”。
移除 TextBlock 的 Width 属性。
删除在这些控件上设置宽度的所有触发器。

这会将您的所有列设置为具有相同的大小，并根据您的容器大小调整大小。

【讨论】：

当我希望 Title 列更大时，将 ColumnWidth 设置为“*”会使所有列的大小相同。
这根本不起作用。相反，它打破了模式，每个文本框都有自己的宽度和位置。
这取决于你想要达到的目标。无论内容如何，所有列的宽度都相同。在这种情况下使用“*”。或者您想始终尝试显示全部内容，在这种情况下，请使用“自动”。如果您在 TextBlock 上手动设置宽度，它将始终保持该宽度，并且调整大小不会对其产生影响。但是，如果您希望标题列占用更多空间，但仍要调整大小，请使用“4*”。它只需要您用“*”定义的列宽度的 4 倍
当我设置每个元素的宽度时，它遵循 ColumnDefinition 模式。否则，文本块只会相互折叠。

【解决方案3】：

您可以使用VisualStateManager 根据VisualState 单独更改文本宽度，例如我根据MinWindowWidth 更改titleTxt 和artistTxt 的宽度：

<UserControl>
       <Grid Height="50" x:Name="myGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <Grid.Resources>
                        <x:Double x:Key="NarrowMinWidth">0</x:Double>
                        <x:Double x:Key="NormalMinWidth">521</x:Double>
                        <x:Double x:Key="WideMinWidth">1200</x:Double>
                    </Grid.Resources>

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="AdaptiveVisualStateGroup">
                            <VisualState x:Name="VisualStateNarrow">
                                <VisualState.StateTriggers>
                                    <AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}" />
                                </VisualState.StateTriggers>
                                <VisualState.Setters>
                                    <Setter Target="titleTxt.Width" Value="100"/>
                                    <Setter Target="artistTxt.Width" Value="100"/>

                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="VisualStateNormal">
                                <VisualState.StateTriggers>
                                    <AdaptiveTrigger MinWindowWidth="{StaticResource NormalMinWidth}" />
                                </VisualState.StateTriggers>
                                <VisualState.Setters>
                                    <Setter Target="titleTxt.Width" Value="200"/>
                                    <Setter Target="artistTxt.Width" Value="100"/>

                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="VisualStateWide">
                                <VisualState.StateTriggers>
                                    <AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWidth}" />
                                </VisualState.StateTriggers>
                                <VisualState.Setters>
                                    <Setter Target="titleTxt.Width" Value="400"/>
                                    <Setter Target="artistTxt.Width" Value="200"/>

                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <TextBlock x:Name="titleTxt" Grid.Column="0"  TextWrapping="NoWrap" TextTrimming="Clip" Text="{Binding Title}" VerticalAlignment="Center"/>
                    <TextBlock x:Name="artistTxt" Grid.Column="1" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Artist}"  VerticalAlignment="Center"/>
                    <TextBlock x:Name="albumTxt" Grid.Column="2"  Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Album}" VerticalAlignment="Center"/>
                    <TextBlock x:Name="yearTxt" Grid.Column="3"  Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Year}" VerticalAlignment="Center"/>
                    <TextBlock x:Name="genreTxt" Grid.Column="4" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Genre}" VerticalAlignment="Center"/>
                    <TextBlock x:Name="durationTxt" Grid.Column="5" Visibility="Visible" Margin="15,0,0,0" FontSize="13" Text="{Binding Duration}" VerticalAlignment="Center"/>
                </Grid>
</UserControl>

【讨论】：

【解决方案4】：

<ListView ItemsSource="{Binding Items}">
<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*" />
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>
            <TextBlock Text="{Binding}"  />
            <Border Background="CornflowerBlue" Grid.Column="1" />
        </Grid>
    </DataTemplate>
</ListView.ItemTemplate>

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。