适用于 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 子类，该子类引用 VisualStateManager 操作的对象。

建议将自定义用户控件定义为 Window.Content 根目录或要应用状态的其他内容的容器(如面板(。然后，您可以在用户控件上调用 GoToState 并应用状态，而不管其余内容是否为控件。

有关详细信息，请参阅不是 VisualStateManager 类备注下的控件的元素的视觉状态。