UWP 的 XAML 中的可视状态管理器不起作用

Question

我是 UWP 开发和 XAML 工作的新手。有人可以告诉我以下 XAML 有什么问题，其中视觉状态不起作用。当我调整窗口大小时，行和列的值不会改变。堆栈面板的背景颜色也不会改变。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="40,0,0,0">

    <GridView ItemsSource="{x:Bind Ticket}">
        <GridView.ItemTemplate>
            <DataTemplate x:DataType="data:Ticket">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup>
                            <VisualState x:Name="NarrowLayout">
                                <VisualState.StateTriggers>
                                    <AdaptiveTrigger MinWindowWidth="600" />
                                </VisualState.StateTriggers>
                                <VisualState.Setters>
                                    <Setter Target="StackPanel00.Background" Value="Blue" />
                                    <Setter Target="StackPanel00.(Grid.Column)" Value="0" />
                                    <Setter Target="StackPanel00.(Grid.Row)" Value="0" />
                                    <Setter Target="StackPanel01.(Grid.Column)" Value="0" />
                                    <Setter Target="StackPanel01.(Grid.Row)" Value="1" />
                                    <Setter Target="StackPanel10.(Grid.Row)" Value="2" />
                                    <Setter Target="StackPanel10.(Grid.Column)" Value="0" />
                                    <Setter Target="StackPanel11.(Grid.Column)" Value="0" />
                                    <Setter Target="StackPanel11.(Grid.Row)" Value="3" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="WideLayout">
                                <VisualState.StateTriggers>
                                    <AdaptiveTrigger MinWindowWidth="1100" />
                                </VisualState.StateTriggers>
                                <VisualState.Setters>
                                    <Setter Target="StackPanel00.(Grid.Column)" Value="0" />
                                    <Setter Target="StackPanel00.(Grid.Row)" Value="0" />
                                    <Setter Target="StackPanel01.(Grid.Column)" Value="1" />
                                    <Setter Target="StackPanel01.(Grid.Row)" Value="0" />
                                    <Setter Target="StackPanel10.(Grid.Row)" Value="1" />
                                    <Setter Target="StackPanel10.(Grid.Column)" Value="0" />
                                    <Setter Target="StackPanel11.(Grid.Column)" Value="1" />
                                    <Setter Target="StackPanel11.(Grid.Row)" Value="1" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <StackPanel Name="StackPanel00" Grid.Row="0" Grid.Column="0" Margin="20">
                        <StackPanel Name="StackPanel000" Orientation="Horizontal">
                            <TextBlock Name="TicketLineLabel" Text="Ticket Line: " />
                            <TextBlock Name="TicketLineData" Text="{x:Bind Line}" Margin="10,0,0,0" />
                        </StackPanel>
                        <StackPanel Name="StackPanel001" Orientation="Horizontal" Margin="0,10,0,0" >
                            <TextBlock Name="TicketLocationLabel" Text="Ticket Location: " />
                            <TextBlock Name="TicketLocationData" Text="{x:Bind TicketLocation}" Margin="10,0,0,0" />
                        </StackPanel>
                    </StackPanel>

                    <StackPanel Name="StackPanel01" Grid.Row="0" Grid.Column="1" Margin="20">
                        <StackPanel Orientation="Horizontal" >
                            <TextBlock Name="StopDateFromLabel" Text="Stop Date From: " />
                            <TextBlock Name="StopDateFromData" Text="{x:Bind StopDateTime}" Margin="10,0,0,0" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                            <TextBlock Name="InvoiceDateLabel" Text="Invoice Date: " />
                            <TextBlock Name="InvoiceDateData" Text="{x:Bind InvoiceDate}" Margin="10,0,0,0" />
                        </StackPanel>
                    </StackPanel>

                    <StackPanel Name="StackPanel10" Grid.Row="1" Grid.Column="0" Margin="20">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Name="NetBarrelsLabel" Text="Net Barrels: " RelativePanel.AlignLeftWithPanel="True" />
                            <TextBlock Name="NetBarrelsData" Text="{x:Bind NetBarrels}" RelativePanel.RightOf="NetBarrelsLabel" Margin="10,0,0,0" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                            <TextBlock Name="WaterBarrelsLabel" Text="Water Barrels: " RelativePanel.AlignLeftWithPanel="True" />
                            <TextBlock Name="WaterBarrelsData" Text="{x:Bind NetBarrels}" RelativePanel.RightOf="WaterBarrelsLabel" Margin="10,0,0,0" />
                        </StackPanel>
                    </StackPanel>

                    <StackPanel Name="StackPanel11" Margin="20">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Name="TicketTypeLabel" Text="Ticket Type: " RelativePanel.AlignLeftWithPanel="True" />
                            <TextBlock Name="TicketTypeData" Text="{x:Bind TicketType}" RelativePanel.RightOf="TicketTypeLabel" Margin="10,0,0,0" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                            <TextBlock Name="OriginBillingTypeLabel" Text="Origin Billing Type: " RelativePanel.AlignLeftWithPanel="True" />
                            <TextBlock Name="OriginBillingTypeData" Text="{x:Bind OriginBillingType}" RelativePanel.RightOf="OriginBillingTypeLabel" Margin="10,0,0,0" />
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Grid>

Answer 1

要使VisualStateManager 在DataTemplate 中工作，我们需要将它放在Control 子类中，例如UserControl，如下所示：

<GridView ItemsSource="{x:Bind Ticket}">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="data:Ticket">
            <UserControl>
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        ...
                    </VisualStateManager.VisualStateGroups>
                    ...
                </Grid>
            </UserControl>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

视觉状态有时在您想要更改 UI 的某些区域的状态时很有用，该区域不是 Control 子类。您不能直接这样做，因为GoToState 方法的control 参数需要一个Control 子类，它引用VisualStateManager 作用的对象。

我们建议您将自定义 UserControl 定义为 Window.Content 根，或者作为您要对其应用状态的其他内容的容器（例如 Panel）。然后您可以在您的UserControl 上调用GoToState 并应用状态，而不管其余内容是否为Control。

有关详细信息，请参阅Remarks of VisualStateManager Class 下的非控件元素的视觉状态。