根據自“IsChecked”屬性將屬性顏色樣式觸發器更改為自定義控件

Question

我有以下自定義切換開關：

XAML

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CommonWindows.ToggleSwitch">

<Style TargetType="{x:Type local:ToggleSwitch}">
    <Setter Property="MaxHeight" Value="{Binding RelativeSource={RelativeSource Mode=Self}, Path=SwitchHeight}"/>
    <Setter Property="MaxWidth" Value="{Binding RelativeSource={RelativeSource Mode=Self}, Path=SwitchWidth}"/>
    <Setter Property="MinHeight" Value="{Binding RelativeSource={RelativeSource Mode=Self}, Path=SwitchHeight}"/>
    <Setter Property="MinWidth" Value="{Binding RelativeSource={RelativeSource Mode=Self}, Path=SwitchWidth}"/>
    <Setter Property="IsChecked" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:ToggleSwitch}">
                <Border
                    x:Name="border"
                    Background="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=OnColor}"
                    CornerRadius="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=CalcCornerRadius}">
                    <Ellipse
                        x:Name="elipse"
                        Fill="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=ToggleColor}"
                        HorizontalAlignment="Left"
                        Margin="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=CalcMargin}"
                        Width="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=CalcElipseWidth}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter TargetName="elipse" Property="HorizontalAlignment" Value="Right"/>
                        <Setter TargetName="border" Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=OffColor}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

CS

using System.Windows;
using System.Windows.Media;
using System.Windows.Controls.Primitives;

namespace CommonWindows.ToggleSwitch
{
    public class ToggleSwitch : ToggleButton
    {
        #region Dimensions

        public double SwitchWidth
        {
            get => (double)GetValue(SwitchWidthProperty);
            set => SetValue(SwitchWidthProperty, value);
        }

        public static readonly DependencyProperty SwitchWidthProperty =
            DependencyProperty.Register(nameof(SwitchWidth), typeof(double), typeof(ToggleSwitch));

        public double SwitchHeight
        {
            get => (double)GetValue(SwitchHeightProperty);
            set => SetValue(SwitchHeightProperty, value);
        }

        public static readonly DependencyProperty SwitchHeightProperty =
            DependencyProperty.Register(nameof(SwitchHeight), typeof(double), typeof(ToggleSwitch));

        public double CalcCornerRadius => SwitchHeight / 2;
        public double CalcMargin => SwitchHeight / 10;
        public double CalcElipseWidth => SwitchHeight - (CalcMargin * 2);

        #endregion

        #region Color

        public SolidColorBrush OnColor
        {
            get => (SolidColorBrush)GetValue(OnColorProperty);
            set => SetValue(OnColorProperty, value);
        }

        public static readonly DependencyProperty OnColorProperty =
            DependencyProperty.Register(nameof(OnColor), typeof(SolidColorBrush), typeof(ToggleSwitch));

        public SolidColorBrush OffColor
        {
            get => (SolidColorBrush)GetValue(OffColorProperty);
            set => SetValue(OffColorProperty, value);
        }

        public static readonly DependencyProperty OffColorProperty =
            DependencyProperty.Register(nameof(OffColor), typeof(SolidColorBrush), typeof(ToggleSwitch));

        public SolidColorBrush ToggleColor
        {
            get => (SolidColorBrush)GetValue(ToggleColorProperty);
            set => SetValue(ToggleColorProperty, value);
        }

        public static readonly DependencyProperty ToggleColorProperty =
            DependencyProperty.Register(nameof(ToggleColor), typeof(SolidColorBrush), typeof(ToggleSwitch));

        #endregion

        static ToggleSwitch()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ToggleSwitch), new FrameworkPropertyMetadata(typeof(ToggleSwitch)));
        }
    }
}

ToggleSwitch在項目中的實現

老的

<Toggle:ToggleSwitch
                Margin="0 10 0 0"
                x:Name="Light"
                OnColor="#202020" 
                OffColor="White"
                SwitchHeight="30"
                ToggleColor="#EFEFEF"
                FlowDirection="LeftToRight"
                IsChecked="{Binding LightCheckState}"
                SwitchWidth="70">
                <Toggle:ToggleSwitch.Style>
                    <Style TargetType="{x:Type Toggle:ToggleSwitch}">
                        <Style.Triggers>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter Property="ToggleColor" Value="{Binding ElementName=Light, Path=OnColor}"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Toggle:ToggleSwitch.Style>
            </Toggle:ToggleSwitch>

我的問題是，我怎么能更改屬性的顏色ToggleColor通過點擊ToggleSwitch ，使財產IsChecked為True。 我目前的方法不起作用。 在整個項目中，風格觸發器就像一個魅力，但我想我不能以這種方式改變自己的財產。

感謝所有幫助的人;)

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

編輯：

好的，我不得不在樣式中移動ToggleColor顏色的設置，以使其成為“動態”而不是“靜態”顏色。

新的

<Toggle:ToggleSwitch
                Margin="0 10 0 0"
                x:Name="Light"
                OnColor="#202020" 
                OffColor="White"
                SwitchHeight="30"
                FlowDirection="LeftToRight"
                IsChecked="{Binding LightCheckState}"
                SwitchWidth="70">
                <Toggle:ToggleSwitch.Style>
                    <Style TargetType="{x:Type Toggle:ToggleSwitch}">
                        <Setter Property="ToggleColor" Value="#EFEFEF"/>
                        <Style.Triggers>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter Property="ToggleColor" Value="{Binding ElementName=Light, Path=OnColor}"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Toggle:ToggleSwitch.Style>
            </Toggle:ToggleSwitch>

Answer 1

亞倫。 你的代碼很好。 但是當你使用樣式觸發器時，你應該小心地使用它們。 有優先權。 嘗試使用以下源代碼。

<Toggle:ToggleSwitch
                Margin="0 10 0 0"
                x:Name="Light"
                OnColor="#202020" 
                OffColor="White"
                SwitchHeight="30"
                FlowDirection="LeftToRight"
                SwitchWidth="70">
                <Toggle:ToggleSwitch.Style>
                    <Style TargetType="{x:Type Toggle:ToggleSwitch}">
                        <Setter Property="ToggleColor" Value="#...."/>
                        <Style.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="ToggleColor" Value="{Binding ElementName=Light, Path=OnColor}"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Toggle:ToggleSwitch.Style>
            </Toggle:ToggleSwitch>