Связывание шаблона внутри шаблона элемента управления ResourceDictionary

Question

У меня есть словарь ресурсов следующим образом:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:uwpControls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:controls="using:Presentation.Common.Controls">
<Style x:Key="ExpanderStyleSection" TargetType="uwpControls:Expander">
        <Setter Property="HeaderStyle" Value="{StaticResource LightExpanderHeaderToggleButtonStyle}"/>
        <Setter Property="Margin" Value="4"/>
    </Style>
 <Style x:Key="LightExpanderHeaderToggleButtonStyle" TargetType="ToggleButton">
 <Setter Property="Template">
 <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid x:Name="RootGrid" 
                                  Background="{StaticResource BrushBeckmanAquaA1}"> <!-- I want to change the background from an other View based on some condition -->
</ControlTemplate>
</Style>
</ResourceDictionary>

Теперь я использую стиль внутри этого словаря следующим образом в другом представлении.

<uwpControls:Expander x:Name="ExpanderLisSharedSettings" Grid.Row="0" Style="{StaticResource ExpanderStyleSection}">
<!--Some Content here-->
</uwpControls:Expander

Всякий раз, когда свойство в ViewModel изменяется, я хочу обновить фон RootGrid в ControlTemplate на другой цвет. Как мне это сделать? Другими словами, есть ли способ создать свойство зависимости типа Bru sh color и привязать его к фону RootGrid в ResourceDictionary. Пожалуйста, помогите.

Answer 1

Используйте TemplateBinding в шаблоне. Вы можете использовать <Setter> для определения значения по умолчанию:

<Style x:Key="LightExpanderHeaderToggleButtonStyle" TargetType="ToggleButton">
    <Setter Property="Background" Value="{StaticResource BrushBeckmanAquaA1}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                    ...
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Затем вы можете установить или связать Background каждого экземпляра элемента управления:

<uwpControls:Expander x:Name="ExpanderLisSharedSettings" Grid.Row="0" Background="Red" />

Например, если модель представления определяет свойство Brush, называемое "TheBackground", вы можете связать его как обычно (только UWP поддерживает {x:Bind}):

<uwpControls:Expander x:Name="ExpanderLisSharedSettings" Grid.Row="0" 
                      Background="{Binding TheBackground}" />

Answer 2

Вы можете создать ViewModel, который содержит свойство SolidColorBru sh и связать его с Background of RootGrid, и вам нужно объявить DataContext на странице, в которой вы используете этот стиль. В этом случае он применяется для Binding .

Если вы хотите использовать x: bind в ResourceDictionary, вам нужно создать для него код класса. Поскольку x: Bind зависит от генерации кода, поэтому ему необходим файл с выделенным кодом, содержащий конструктор, который вызывает InitializeComponent (для инициализации сгенерированного кода).

Здесь мы берем пример привязки.

Page.xaml:

<ToggleButton Style="{StaticResource LightExpanderHeaderToggleButtonStyle}"></ToggleButton>

Page.xaml.cs:

public BlankPage1()
{
    this.InitializeComponent();
    VM = new MyViewModel();
    VM.Fname = "fleegu";
    VM.MyColor = new SolidColorBrush(Colors.Green);
    this.DataContext = VM;
}
public MyViewModel VM { get; set; }

ResourceDictionary. xaml:

<Style x:Key="LightExpanderHeaderToggleButtonStyle" TargetType="ToggleButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Grid x:Name="RootGrid" Background="{Binding MyColor}">
                    <TextBlock Text="{Binding Fname}"></TextBlock>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

MyViewModel:

public class MyViewModel: INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged = delegate { };

    private string _fname { get; set; }
    private SolidColorBrush myColor { get; set; }

    public string Fname
    {
        get { return _fname; }
        set
        {
            _fname = value;
            this.OnPropertyChanged();
        }
    }

    public SolidColorBrush MyColor
    {
        get { return myColor; }
        set
        {
            myColor = value;
            this.OnPropertyChanged();
        }
    }

    public void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}