如何轻松地允许用户更新 XAML (UWP) 中使用的元素样式

Question

这适用于 Windows 10 UWP。 我需要允许用户更新与整个应用程序中使用的元素相关联的样式上的值（即允许用户更改各种文本块的字体大小、背景颜色堆栈面板等）。

我目前将所有样式都放在一个单独的文件中。

我的App.xaml如下：

<Application
    x:Class="MyTestApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Application.Resources>

        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Styles/Styles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>

    </Application.Resources>

</Application>

我的Styles.xaml （部分）如下：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:converters="using:MyTestApp.Views"
    xmlns:x1="using:System">

    <Style x:Key="HeaderTextBlocks" TargetType="TextBlock" BasedOn="{StaticResource TitleTextBlockStyle}">
        <Setter Property="FontSize" Value="24"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="TextWrapping" Value="NoWrap"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Bottom"/>
        <Setter Property="Margin" Value="10,4,0,0"/>
    </Style>

    <Style x:Key="RegularTextBlocks" TargetType="TextBlock" BasedOn="{StaticResource TitleTextBlockStyle}">
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="TextWrapping" Value="NoWrap"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Bottom"/>
        <Setter Property="Margin" Value="0,0,0,0"/>
    </Style>
</ResourceDictionary>

我在整个应用程序中使用这些样式来引用这些样式：

<TextBlock Style="{StaticResource HeaderTextBlocks}" />

我创建了一个设置页面 (settings.xaml)，其中包含供用户更新各种样式设置的文本框。

但我不确定如何将这些绑定到 style.xaml 文件中各种样式的设置，以便在用户更改值时更新样式并更新引用样式的控件。

<TextBox Header="Font Size of Header TextBlocks" Text="{x:Bind HeaderTextBlocks.FontSize ???, Mode=TwoWay}" />
<TextBox Header="Font Size of Regular TextBlocks" Text="{x:Bind RegularTextBlocks.FontSize???, Mode=TwoWay}" />

有人可以指出我正确的方向吗？ 我正在尝试以尽可能少的（或没有背后的代码）来做到这一点。

Answer 1

不幸的是，这种用户定义的样式在 UWP 中并不容易获得。 但是，您可以使用数据绑定来实现一种样式解决方案。

第一步是创建一个像CustomUISettings这样的类，它实现INotifyPropertyChanged并具有HeaderFontSize等属性。

现在在应用程序启动时创建此类的一个实例并将其添加为应用程序资源：

Application.Current.Resources["CustomUISettings"] = new CustomUISettings();

现在，您可以在代码的任何位置绑定到此类中的属性：

<TextBox FontSize="{Binding HeaderFontSize, Source={StaticResource CustomUISettings}}" />

您必须使用经典的{Binding}标记扩展，因为{x:Bind}不支持Source设置。

要修改 UI 设置，您可以在任何地方检索实例并根据需要设置属性：

var customUISettings = (CustomUISettings)Application.Current.Resources["CustomUISettings"];
customUISettings.HeaderFontSize = 50;

您必须确保CustomUISettings类中的所有属性CustomUISettings触发PropertyChanged事件。 例如，您可以在此处查看如何实现INotifyPropertyChanged接口。