如何轻松地允许用户更新 XAML (UWP) 中使用的元素样式 [英] How to easily allow users to update Styles used be elements in XAML (UWP)

问题描述

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

This is for a Windows 10 UWP. I need to allow users to update values on Styles that are associated with elements used throughout the application (i.e allow users to change the font size of various textblocks, background color stackpanels etc.) .

我目前将所有样式保存在一个单独的文件中.

I currently have all my Styles in a separately file.

我的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>

我在整个应用程序中引用这些样式的控件，如下所示:

I refer to these styles on controls throughout the application using like this:

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

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

I have created a Settings page (settings.xaml) which has textboxes for the users to update various style settings.

但我不确定如何将这些绑定到 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}" />

有人可以指出我正确的方向吗?我正在尝试以尽可能少的(或没有背后的代码)来做到这一点.

Could someone please point me in the right direction? I am trying to do this with minimal (or no code behind) as possible.

推荐答案

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

Unfortunately this kind of user-defined styling is not easily available in UWP. You can however implement a kind of styling solution using data binding.

第一步是创建一个类似于 CustomUISettings 的类，它实现了 INotifyPropertyChanged 并具有 HeaderFontSize 等属性.

First step is to create a class like CustomUISettings which implements INotifyPropertyChanged and has properties like HeaderFontSize, etc.

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

Now on app start create an instance of this class and add it as app resource:

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

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

Now you can bind to the properties in this class anywhere in your code:

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

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

You must use the classic {Binding} markup extension, because {x:Bind} does not support Source setting.

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

To modify the UI settings you can just retrieve the instance anywhere and set the properties as you see fit:

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

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

You must make sure that all properties in CustomUISettings class fire the PropertyChanged event. You can see how to implement INotifyPropertyChanged interface for example here.

这篇关于如何轻松地允许用户更新 XAML (UWP) 中使用的元素样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！