Question

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

每当您调整Groove的大小时，listview会通过展开，收缩或隐藏列来调整自身大小。我可以使用VisualStates和AdaptiveTrigger处理隐藏部分，但无法弄清楚如何处理网格的扩展/收缩。

另外需要注意的是，每个TextBox的项都是均匀的，宽度相同。如果一个歌曲的名字比平时长，那么它们看起来并不模糊，也没有模式。

我有这个DataTemplate：

       <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将它们设置为统一但然后它们会失去适应性，并且不会根据页面调整大小。

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

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

Answer 2

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

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

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

Answer 3

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

MinWindowWidth

具有响应列的UWP ListView

3 个答案: