如何在UWP中的ListView中插入VisualState触发器?

时间:2016-04-22 19:47:39

标签: xaml winrt-xaml win-universal-app windows-10

我正在尝试将一个VisualState触发器添加到Listview,但它没有被触发。这是最有效的方式,因为ListView中的项目数量有时可能超过300个。

当宽度变小时,触发器正在尝试重新定位网格。

我目前的代码:

<Page.Resources>
    <DataTemplate x:Key="mainDataTemplate">
        <Grid Padding="15" BorderBrush="Aqua" BorderThickness="1" Margin="6">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="mobileView">
                        <VisualState.Setters>
                            <Setter Target="TitleDescGrid.(Grid.Row)" Value="1" />
                            <Setter Target="TitleDescGrid.(Grid.Column)" Value="0" />
                            <Setter Target="TitleDescGrid.(Grid.ColumnSpan)" Value="2" />
                            <Setter Target="PosterGrid.Background" Value="Pink" />
                        </VisualState.Setters>
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="500" />
                        </VisualState.StateTriggers>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <Grid x:Name="PosterGrid" Grid.Column="0" Grid.Row="0"  Margin="3,10,3,3"
                                  Height="400" Width="180" DataContext="{Binding}" Background="SaddleBrown"
                                  SizeChanged="PosterGrid_SizeChanged">
                <TextBlock Text="{Binding}" />
            </Grid>
            <Grid x:Name="TitleDescGrid" Grid.Row="0" Grid.Column="1"
                                  SizeChanged="TitleDescGrid_SizeChanged"
                                  Background="DarkCyan" DataContext="{Binding}" 
                                  Width="420" Margin="5,14,5,5" >
                <TextBlock Text="{Binding}" />
            </Grid>
            <Grid x:Name="RatingsGrid" Grid.Row="0" 
                                  DataContext="{Binding}" 
                                  Grid.Column="2"
                                  Background="Olive"
                                  Width="200" Margin="5,15,0,0" >
                <TextBlock Text="{Binding}" />
            </Grid>
        </Grid>
    </DataTemplate>
</Page.Resources>

在里面,我得到了ListView声明的部分

<StackPanel x:Name="ParentSP">
    <ListView  x:Name="movieListview" Margin="8,0,8,8" 
              Grid.Row="0"
              ItemTemplate="{StaticResource mainDataTemplate}" 
              SizeChanged="movieListview_SizeChanged">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>
</StackPanel>

1 个答案:

答案 0 :(得分:4)

尝试将DataTemplate的内容包装到UserControl中。

所以

<Page.Resources>
    <DataTemplate x:Key="mainDataTemplate">
        <UserControl>
            <Grid Padding="15" BorderBrush="Aqua" BorderThickness="1" Margin="6">