Question

我试图设置一个按钮，当前景色改变时，该按钮会改变填充颜色。但是，我使用的dataTrigger没有通过。经过几个小时的搜索，我了解到本地颜色覆盖了风格，但我无法弄清楚如何使其发挥作用。

我试图通过在样式模板中绑定模板然后在按钮本身上使用dataTrigger来基于布尔绑定来更改它，从而通过Foreground传递颜色。

以下是代码：

<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}"
    />

XAML模板Datatrigger前景不变

1 个答案: