如何在Windows 10 UWP中為模板Gridview設置Visual State Manager？

Question

我知道Visual State Manager可以在更改大小屏幕UWP時更改控件屬性。 但是我不知道如何將Visual State Manager用於Datatemplate Gridview？ 如何更改屬性Image控件，TextBlock控件？ 請幫助我這種情況。

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="Phone">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Tablet">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="800" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<GridView x:Name="gv" Grid.Row="1" Background="Gray">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <Image Source="{Binding ImageLeague}" 
                                                Width="50"
                                               Stretch="None"
                                               VerticalAlignment="Top"
                                              HorizontalAlignment="Left"   />


                        <TextBlock Text="{Binding title}" 
                                                   FontSize="26" 
                                                   Foreground="Black"
                                                   VerticalAlignment="Top"
                                                   HorizontalAlignment="Left"
                                                   />
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>

Answer 1

一種方法是將DataTemplate包裝在UserControl中：

    <GridView Width="200" Height="300" x:Name="gv" Grid.Row="1" Background="Gray" ItemsSource="{Binding myList}">

        <GridView.ItemTemplate>
            <DataTemplate>
                <UserControl>
                    <StackPanel>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup>
                                <VisualState x:Name="Phone">
                                    <VisualState.StateTriggers>
                                        <AdaptiveTrigger MinWindowWidth="0" />
                                    </VisualState.StateTriggers>
                                    <VisualState.Setters>
                                        <Setter Target="MyTextBlock.FontSize" Value="15"/>                                        
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Tablet">
                                    <VisualState.StateTriggers>
                                        <AdaptiveTrigger MinWindowWidth="600" />
                                    </VisualState.StateTriggers>
                                    <VisualState.Setters>
                                        <Setter Target="MyTextBlock.FontSize" Value="25"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Image Source="{Binding ImageLeague}" 
                                            Width="50"
                                           Stretch="None"
                                           VerticalAlignment="Top"
                                          HorizontalAlignment="Left"   />


                        <TextBlock x:Name="MyTextBlock"  Text="{Binding title}" 

                                               Foreground="Black"
                                               VerticalAlignment="Top"
                                               HorizontalAlignment="Left"

                                               />
                    </StackPanel>
                </UserControl>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>