如何在 Windows 10 UWP 中为模板 Gridview 设置可视状态管理器？答案

【问题标题】：How to set Visual State Manager for template Gridview in Windows 10 UWP?如何在 Windows 10 UWP 中为模板 Gridview 设置可视状态管理器？
【发布时间】：2015-10-27 08:29:37
【问题描述】：

我知道 Visual State Manager 可以在更改 UWP 屏幕大小时更改控件属性。但我不知道如何为 Datatemplate Gridview 使用 Visual State Manager ？如何更改属性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>

【问题讨论】：

标签： c# windows gridview windows-10 win-universal-app

【解决方案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>

【讨论】：

@Marcelo de Aguiar 我不知道确切的技术原因，但在“Windows 10 开发人员指南”中告诉你必须这样做。（抱歉我解释的不好……也许你可以直接问培训师）channel9.msdn.com/Events/Windows/…
我尝试了不同的解决方案，但这些都不起作用。有了你的代码，它终于可以工作了。你为我节省了很多时间。非常感谢！