uwp - 使用 UWP 中的可视状态管理器更改网格内的样式
问题描述
我是 Visual Studio 的新手。如何使用 Visual State Manager 来创建自适应触发器?最近我有这个使用 Grid 的 XAML 代码。因此,我希望每次更改应用程序的大小时,都应更改单元格内的文本(大小和颜色)。但它并没有改变。这是代码。
任何帮助表示赞赏。
<Page
x:Class="_251707_lab2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:_251707_lab2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Name="coffeeMachineGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FocusVisualPrimaryBrush="White">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="forTablet">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="coffeeMachineGrid.whichCofeeCell.Fill" Value="Green"/>
<Setter Target="myName.(TextBlock.FontSize)" Value="40" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Fill="Beige" Grid.Row="0"/>
<Rectangle x:Name="whichCofeeCell" Grid.Row="1" Fill="LightSteelBlue" />
<Rectangle Fill="PaleVioletRed" Grid.Row="2"/>
<Rectangle Fill="LightGreen" Grid.Row="3"/>
<Rectangle Fill="Black" Grid.Column="1"/>
<Rectangle Fill="Purple" Grid.Column="2"/>
<Rectangle Fill="ForestGreen" Grid.Column="1" Grid.Row="1"/>
<Rectangle Fill="AliceBlue" Grid.Column="2" Grid.Row="1"/>
<Rectangle Fill="HotPink" Grid.Column="1" Grid.Row="2"/>
<Rectangle Fill="Chocolate" Grid.Column="2" Grid.Row="2"/>
<Rectangle Fill="DarkBlue" Grid.Column="1" Grid.Row="3"/>
<Rectangle Fill="Crimson" Grid.Column="2" Grid.Row="3"/>
<TextBox x:Name="theTitle" HorizontalAlignment="Center" Margin="0,27,0,0" Text="Wonderful Coffee machine. " TextWrapping="Wrap" VerticalAlignment="Top" IsReadOnly="True"/>
<TextBlock x:Name="myName" Grid.Column="2" HorizontalAlignment="Center" Text="zen huzaini 251707" TextWrapping="Wrap" VerticalAlignment="Center" Width="98" RenderTransformOrigin="-0.396,0.361"/>
<TextBox x:Name="whihCoffee" HorizontalAlignment="Center" Margin="0,21,0,0" Text="Which Coffee" TextWrapping="Wrap" VerticalAlignment="Top" Grid.Row="1" FocusVisualPrimaryBrush="#FF4D0303" IsReadOnly="True"/>
<TextBox x:Name="price" IsReadOnly="True" Grid.Column="2" HorizontalAlignment="Center" Grid.Row="3" Text="Price" TextWrapping="Wrap" VerticalAlignment="Center" FocusVisualPrimaryBrush="White" Foreground="White" FontSize="20"/>
<TextBox x:Name="withSugar" Grid.Column="2" HorizontalAlignment="Left" Margin="13,21,0,0" Grid.Row="1" Text="With Sugar" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF36023E" FocusVisualPrimaryBrush="#FF3E0228" FontSize="14" IsReadOnly="True"/>
<TextBox x:Name="withCream" IsReadOnly="True" Grid.Column="1" HorizontalAlignment="Center" Margin="0,21,0,0" Grid.Row="1" Text="With Cream" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="-1.415,0.098" Foreground="White" FontSize="14" FocusVisualPrimaryBrush="White"/>
<TextBox x:Name="getDiscount" IsReadOnly="True" HorizontalAlignment="Left" Margin="8,23,0,0" Grid.Row="2" Text="Get Discount" TextWrapping="Wrap" VerticalAlignment="Top"/>
<TextBox x:Name="enterNumber" HorizontalAlignment="Left" Margin="21,0,0,0" Grid.Row="2" Text="TextBox" TextWrapping="Wrap" VerticalAlignment="Center" FocusVisualPrimaryBrush="White" Foreground="White" FontSize="16"/>
<Button x:Name="checkDiscount" Content="Chek Now" Grid.Column="1" Margin="0,59,0,0" Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="18" FocusVisualPrimaryBrush="White" Foreground="White"/>
<TextBox x:Name="doIgetDiscount" Grid.Column="2" HorizontalAlignment="Center" Grid.Row="2" Text="???" TextWrapping="Wrap" VerticalAlignment="Center" IsReadOnly="True" FontSize="20" Foreground="White" FocusVisualPrimaryBrush="White"/>
<Button x:Name="pay" Content="Pay" Grid.Column="1" Margin="0,59,0,0" Grid.Row="3" VerticalAlignment="Top" HorizontalAlignment="Center" FocusVisualPrimaryBrush="White" Foreground="White"/>
</Grid>
</Page>
解决方案
Setter 的 Target 设置目标元素上的属性路径以将值应用到,首先您设置的目标“coffeeMachineGrid.whichCofeeCell.Fill”不正确,因为 whichCofeeCell 不是 coffeeMachineGrid 的属性,它是目标元素,您只需要使用 whichCofeeCell.Fill 作为目标。例如:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="forTablet">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="whichCofeeCell.Fill" Value="Green"/>
<Setter Target="myName.FontSize" Value="40" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
推荐阅读
- r - ggcorr 函数执行平方相关矩阵的问题
- python - 如何在没有默认值的 ModelForm 中显示 ForeignKey 字段?
- outlook - MicrosoftGraph API 按特定类别列出消息
- database - Microsoft Access 2016 导入文本向导系统资源超出
- python-3.x - 用 pyinstaller 制作的可执行文件不起作用
- powershell - windows cmd和powershell和macos,linux终端
- java - 如何返回作为值存储在 HashMap 中的数组
- javascript - 如何修复此代码中未捕获的类型错误?
- java - 尝试创建一个数组来查找给定字符串中出现的字符。只允许使用 String 类中的方法 length 和 charAt
- awk - 如果条件匹配追加到行