XAML 模板 Datatrigger 前景未更改

Question

我正在尝试设置一个按钮的样式，当前景色发生变化时，该按钮的填充颜色会发生变化。但是，我正在使用的 dataTrigger 没有通过。经过数小时的搜索，我了解到本地颜色会覆盖样式，但我不知道如何使其工作。

我正在尝试通过在样式模板中绑定模板，然后在按钮本身上使用 dataTrigger 根据布尔绑定来更改它，从而通过前景传递颜色。

代码如下：

<Button Click="Button_Click" Style="{DynamicResource PowerButton}" >
    <Style TargetType="{x:Type Button}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding CR_mainKillSwitch, UpdateSourceTrigger=PropertyChanged}" Value="False">
                <Setter Property="Foreground" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding CR_mainKillSwitch, UpdateSourceTrigger=PropertyChanged}" Value="True">
                <Setter Property="Foreground" Value="Green" />
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Button>

资源中的样式：

<Style x:Key="PowerButton" TargetType="{x:Type Button}">
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
                <GradientStop Color="#cccccc" Offset="1"/>
                <GradientStop Color="#ddd" Offset="0.9"/>
                <GradientStop Color="#eee" Offset="0.6"/>
                <GradientStop Color="#eee" Offset="0"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">                        
                <Grid Width="100"  Height="100">
                    <Ellipse Fill="#555">
                    </Ellipse>
                    <Ellipse Width="98" Height="98" Fill="{TemplateBinding Background}" />
                    <Path Stretch="Uniform" Stroke="#555" Width="40" Fill="{TemplateBinding Foreground}">
                        <Path.Data>
                            F1 M 36.4167,36.4167L 36.4167,17.4167L 41.1667,17.4167L 41.1667,36.4167L 36.4167,36.4167 Z M 57,39.5833C 57,50.0767 48.4934,58.5833 38,58.5833C 27.5066,58.5833 19,50.0767 19,39.5833C 19,30.7301 25.0552,23.2911 33.25,21.1819L 33.25,27.8374C 28.6079,29.7165 25.3333,34.2675 25.3333,39.5833C 25.3333,46.5789 31.0044,52.25 38,52.25C 44.9956,52.25 50.6667,46.5789 50.6667,39.5833C 50.6667,34.8949 48.1194,30.8014 44.3333,28.6113L 44.3333,21.6645C 51.7129,24.2728 57,31.3106 57,39.5833 Z
                        </Path.Data>
                    </Path>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

您从未将带有触发器的样式应用于按钮。您将其设置为按钮的内容，但是您执行 应用的样式中的模板完全忽略了按钮的内容，因此它只是消失了。

你的方式不是最好的方式（见下文我更喜欢的方式），但做你想做的事，你想做的是将按钮的样式设置为新的样式，即 基于 PowerButton，并向其添加触发器。

并且您要确保CR_mainKillSwitch 实际上是按钮的DataContext 的属性，并且您不妨摆脱绑定中的no-op 属性。

<Button Click="Button_Click" >
    <!-- 
    This Button.Style element is how you set the Style property of Button with XML elements
    instead of with an attribute. 
    -->
    <Button.Style>
        <Style TargetType="{x:Type Button}" BasedOn="{StaticResource PowerButton}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding CR_mainKillSwitch}" Value="False">
                    <Setter Property="Foreground" Value="Red" />
                </DataTrigger>
                <DataTrigger Binding="{Binding CR_mainKillSwitch}" Value="True">
                    <Setter Property="Foreground" Value="Green" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

---

但这是一种更好的方法：

<Style x:Key="PowerButton" TargetType="{x:Type ToggleButton}">
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
                <GradientStop Color="#cccccc" Offset="1"/>
                <GradientStop Color="#ddd" Offset="0.9"/>
                <GradientStop Color="#eee" Offset="0.6"/>
                <GradientStop Color="#eee" Offset="0"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Grid Width="100"  Height="100">
                    <Ellipse Fill="#555">
                    </Ellipse>
                    <Ellipse Width="98" Height="98" Fill="{TemplateBinding Background}" />
                    <Path Stretch="Uniform" Stroke="#555" Width="40" Fill="{TemplateBinding Foreground}">
                        <Path.Data>
                            F1 M 36.4167,36.4167L 36.4167,17.4167L 41.1667,17.4167L 41.1667,36.4167L 36.4167,36.4167 Z M 57,39.5833C 57,50.0767 48.4934,58.5833 38,58.5833C 27.5066,58.5833 19,50.0767 19,39.5833C 19,30.7301 25.0552,23.2911 33.25,21.1819L 33.25,27.8374C 28.6079,29.7165 25.3333,34.2675 25.3333,39.5833C 25.3333,46.5789 31.0044,52.25 38,52.25C 44.9956,52.25 50.6667,46.5789 50.6667,39.5833C 50.6667,34.8949 48.1194,30.8014 44.3333,28.6113L 44.3333,21.6645C 51.7129,24.2728 57,31.3106 57,39.5833 Z
                        </Path.Data>
                    </Path>
                </Grid>
                <ControlTemplate.Triggers>
                    <!-- 
                    Let it be the default foreground for null, if that ever happens. 
                    ToggleButton.IsChecked is bool?, three-state. 
                    -->
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Foreground" Value="Green" />
                    </Trigger>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter Property="Foreground" Value="Red" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

用法。您可能不需要担心 Click 事件。

<ToggleButton 
    Click="Button_Click" 
    Style="{DynamicResource PowerButton}"
    IsChecked="{Binding CR_mainKillSwitch}"
    />