如何轻松地允许用户更新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.

但是我不确定如何将它们绑定到styles.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屋！