xaml - 如何在 ListView UWP 中动态更改 ItemTemplate 的宽度和高度？

Question

我有一个这样的 ListView

<ListView Name="lvTrailers"
                      Grid.Row="3"
                      SelectionChanged="lvTrailers_SelectionChanged"
                      SizeChanged="lvTrailers_SizeChanged">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Height="65" Margin="5">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="2.5*" />
                            </Grid.ColumnDefinitions>
                            <Image HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   Source="{Binding Thumbnail}"
                                   Stretch="UniformToFill" />
                            <TextBlock Grid.Column="1"
                                       Margin="10,5"
                                       Text="{Binding Title}"
                                       TextWrapping="Wrap" />
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

    private void lvTrailers_SizeChanged(object sender, SizeChangedEventArgs e)
    {
         // add some userful code

        // not working
        lvTrailers.ItemTemplate.SetValue(HeightProperty, e.NewSize.Height / 6);

    }

在 UWP 应用程序中，用户可以调整窗口的高度和宽度，所以当它发生时，我也想动态调整 ListView ItemTemplate 的大小。任何人都可以告诉我该怎么做？

Answer 1

您需要使用AdaptiveTrigger。这是实现该目标的示例：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <DataTemplate x:Key="MyCustomItemDataTemplate">
            <UserControl>
                <Grid x:Name="content"
                      Margin="8"
                      Background="Transparent">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="2.5*" />
                    </Grid.ColumnDefinitions>

                    <Image HorizontalAlignment="Center"
                           VerticalAlignment="Center"
                           Source="ms-appx:///Assets/StoreLogo.png"
                           Stretch="Uniform" />

                    <TextBlock Grid.Column="1"
                               Margin="10,5"
                               Text="blabla"
                               VerticalAlignment="Center"
                               TextWrapping="Wrap" />

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup>
                            <VisualState x:Name="Small">
                                <VisualState.StateTriggers>
                                    <AdaptiveTrigger MinWindowWidth="0" />
                                </VisualState.StateTriggers>
                                <VisualState.Setters>
                                    <Setter Target="content.Height"
                                            Value="30" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Wide">
                                <VisualState.StateTriggers>
                                    <AdaptiveTrigger MinWindowWidth="720" />
                                </VisualState.StateTriggers>
                                <VisualState.Setters>
                                    <Setter Target="content.Height"
                                            Value="Auto" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </UserControl>
        </DataTemplate>
    </Grid.Resources>

    <ListView Name="items"
              ItemTemplate="{StaticResource MyCustomItemDataTemplate}" />
</Grid>