使用圆角器更改颜色按钮

Question

我找到了这段代码： XAML：

<Button Content="Click Me!" Margin="209,135,263.4,140.8" Background="{x:Null}" BorderBrush="{x:Null}" Click="Button_Click_1">
        <Button.Template>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="bdr_main" CornerRadius="3" Margin="0" BorderThickness="1" BorderBrush="Black" Background="LightGray">
                    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="8,6,8,6" ContentSource="Content" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="bdr_main" Property="Background" Value="LightGreen"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="bdr_main" Property="Background" Value="Red"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>

可以用 WTF 代码改变背景颜色吗？ 我点击按钮，背景颜色发生变化。

使用普通按钮 我可以使用这段代码： bdr_main.Background = new SolidColorBrush(Colors.Red); 或者 bdr_main.Background = 画笔.Red; 但他不工作 你能帮帮我吗？

Answer 1

您可以使用 ToggleButton 及其 IsChecked 属性

<ToggleButton Content="Click Me!" Margin="209,135,263.4,140.8">
    <ToggleButton.Template>
        <ControlTemplate TargetType="{x:Type ToggleButton}">
            <Border x:Name="bdr_main" CornerRadius="3" Margin="0" 
                    Background="LightGray" BorderThickness="1" BorderBrush="Black">
                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="8,6,8,6" ContentSource="Content" />
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="bdr_main" Property="Background" Value="LightGreen"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="bdr_main" Property="Background" Value="Red"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>

编辑

如果你想从后面的代码中改变背景颜色，你需要实现它的 TemplateBinding

prop="{TemplateBinding Background}

将 XAML 剥离到骨骼中

<ToggleButton Click="Button_Click" Content="Click Me!"
              Background="LightGray" Margin="209,135,263.4,140.8">
    <ToggleButton.Template>
        <ControlTemplate TargetType="{x:Type ToggleButton}">
            <Border x:Name="bdr_main" CornerRadius="3" Margin="0" BorderThickness="1" BorderBrush="Black" 
                    Background="{TemplateBinding Background}">
                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="8,6,8,6" ContentSource="Content" />
            </Border>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>

现在可以

using System.Windows.Controls.Primitives;

...

public void Button_Click(object sender, EventArgs e)
{
    var butt = sender as ToggleButton;
    if ((bool)butt.IsChecked)
        butt.Background = Brushes.Red;
    else
        butt.Background = Brushes.LightGray;
}

MouseOver 事件最好在 ControlTemplate 中处理，要获得与我第一篇文章中相同的行为，您可以将其更改为

<ControlTemplate TargetType="{x:Type ToggleButton}">
    <Border x:Name="bdr_main" CornerRadius="3" Margin="0" BorderThickness="1" BorderBrush="Black" 
            Background="{TemplateBinding Background}">
        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="8,6,8,6" ContentSource="Content" />
    </Border>
    <ControlTemplate.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver" Value="True" />
                <Condition Property="IsChecked" Value="False" />
            </MultiTrigger.Conditions>
            <MultiTrigger.Setters>
                <Setter TargetName="bdr_main" Property="Background" Value="LightGreen" />
            </MultiTrigger.Setters>
        </MultiTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Answer 2

根据 OP 跟进，Edit 更改为 ToggleButton

只需在触发器中添加一个 setter。

        <ToggleButton Content="Click Me!" Margin="209,135,263.4,140.8" Background="{x:Null}" BorderBrush="{x:Null}" Click="Button_Click_1">
            <ToggleButton.Template>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border x:Name="bdr_main" CornerRadius="3" Margin="0" BorderThickness="1" BorderBrush="Black" Background="LightGray">
                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="8,6,8,6" ContentSource="Content" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="bdr_main" Property="Background" Value="LightGreen"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="bdr_main" Property="Background" Value="Red"/>

                            //Add line below
                            <Setter Property="Background" Value="Red" />

                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>

编辑 您不再需要这样做

如果您想在 click 事件处理程序后面的代码中执行此操作；请注意，此行为与上面的触发器不同，背景将保持红色。

Button_Click_1(sender, e)
{
    ((Button)sender).Background = Colors.Red;