UWP 重用视觉状态管理器

Question

为什么我们没有这么简单的 UWP 响应式帮助程序？

我在单独的 .xaml 文件中有这些样式：

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Project.App.WindowsApp.Styles">
<Style x:Key="TextTitleH1" TargetType="TextBlock" >
<Setter Property="FontFamily" Value="Quicksand"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="FontSize" Value="30" />
</Style>
<Style x:Key="TextTitleH2" TargetType="TextBlock" >
<Setter Property="FontFamily" Value="Quicksand"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="FontSize" Value="24" />
</Style>
<Style x:Key="TextTitleH3" TargetType="TextBlock" >
<Setter Property="FontFamily" Value="Quicksand"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="22" />
</Style>
<Style x:Key="TextTitleH4" TargetType="TextBlock" >
<Setter Property="FontFamily" Value="Quicksand"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="16" />
</Style>
<Style x:Key="TextNormal" TargetType="TextBlock" >
<Setter Property="FontFamily" Value="Quicksand"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="FontSize" Value="16" />
</Style>
</ResourceDictionary>

我有一个使用这些样式的页面(为简单起见省略了很多代码(：

<ScrollViewer >
<Grid>
...
<StackPanel>
<TextBlock  Text="{Binding Source={CustomResource Page_Dashboard_LatestImage}}" Style="{StaticResource TextTitleH4}" />
...
<TextBlock Text="{CustomResource Page_Dashboard_NoImage}" Style="{StaticResource TextNormal}"/>
<TextBlock Text="{CustomResource Page_Dashboard_LatestImage_Description}" Style="{StaticResource TextNormal}" />
...
</StackPanel>
<StackPanel>
<TextBlock Text="{Binding Source={CustomResource Page_Dashboard_TipsTitle}} Style="{StaticResource TextTitleH4}" />
...
</StackPanel>
...
</Grid>
</ScrollViewer>

现在，我可以x:Name所有这些控件，并在此页面中使用VisualStateManager来调整文本大小，但我在整个应用程序中使用这些文本样式，我想一次性更改它们，使用简单的类似 css 的查询为不同的屏幕大小定义字体大小：

@media only screen and (min-width: 600px) {
.TextTileH1 {
font-size: 36;
}
}

那么，如何在ResourceDirectory中通常使用VisualStateManager来一次更改不同屏幕尺寸的所有文本样式呢？

我尝试过使用这个答案，但根据我的评论，我无法成功，我试图对其中一个<StackPanel>应用更大的边距(也给它一个应该的名字(，但没有任何变化。

Answer 1

在测试了您提供的内容(此答案(后，我修改了一些代码：

public class VisualStateExtensions : DependencyObject
{
public static void SetVisualStatefromTemplate(UIElement element, DataTemplate value)
{
element.SetValue(VisualStatefromTemplateProperty, value);
}
public static DataTemplate GetVisualStatefromTemplate(UIElement element)
{
return (DataTemplate)element.GetValue(VisualStatefromTemplateProperty);
}
public static readonly DependencyProperty VisualStatefromTemplateProperty =
DependencyProperty.RegisterAttached("VisualStatefromTemplate", typeof(DataTemplate), typeof(VisualStateExtensions), new PropertyMetadata(null,new PropertyChangedCallback(VisualStatefromTemplateChanged)));
private static void VisualStatefromTemplateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is FrameworkElement frameworkElement)
{
var visualStateGroups = VisualStateManager.GetVisualStateGroups(frameworkElement);
if (visualStateGroups != null)
{
var template = (DataTemplate)e.NewValue;
var content = (FrameworkElement)template.LoadContent();
var groups = VisualStateManager.GetVisualStateGroups(content);
if (groups!=null && groups.Count>0)
{
var original = groups.First();
groups.Remove(original);
visualStateGroups.Add(original);
}
}
}
}
}

用法

App.xaml

...
<DataTemplate x:Key="VisualStateTemplate">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup >
<VisualState x:Name="NarrowView" >
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Header.FontSize" Value="20" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="WideView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1000" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Header.FontSize" Value="30" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</DataTemplate>
...

MainPage.xaml

<Grid controls:VisualStateExtensions.VisualStatefromTemplate="{StaticResource VisualStateTemplate}">
<TextBlock x:Name="Header" Text="Hello World!"/>
</Grid>

此致敬意。