如何在 xaml 中悬停并单击后更改按钮的颜色

本文关键字：按钮 颜色 单击 xaml 悬停 | 更新日期: 2023-09-27 18:30:20

以下是我写的在悬停和单击时更改按钮颜色的内容。它有效。我希望在单击后保留新颜色，而不是返回到以前的颜色。我尝试使用单击事件，但它不起作用。还有其他方法可以做到吗？

<Button.Template>
    <ControlTemplate TargetType="{x:Type Button}">
        <Border x:Name="bdr_main"  CornerRadius="5" BorderThickness="2" BorderBrush="#FFBC89BC" >
            <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="#FF603276"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter TargetName="bdr_main" Property="Background" Value="#FF603276"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Button.Template>

如何在 xaml 中悬停并单击后更改按钮的颜色

使用 Trigger 正常设置它不起作用，因为我们需要一些持久状态来保持效果。但IsMouseOver和IsPressed都是非持久性状态。但是，您可以使用一些动画来保留结束值（从而保留效果）。为了防止原始边框被动画源污染，您可以再添加一个边框（并改为对此边框进行动画处理）。两个边框都包含在同一个网格中，因此它们相互覆盖。这种技术在 WPF 样式和模板化中非常常用。下面是一个代码示例：

<Button>
   <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">                
            <Grid>
              <Border x:Name="bdr_main" CornerRadius="5" BorderThickness="2" 
                      BorderBrush="#FFBC89BC" Background="White">  
                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="8,6,8,6" ContentSource="Content" />
              </Border>
              <Border Name="b2" Background="#FF603276" Opacity="0" CornerRadius="5" BorderThickness="2" BorderBrush="#FFBC89BC">
              </Border>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="bdr_main" Property="Background" Value="#FF603276"/>
                </Trigger>
                <EventTrigger RoutedEvent="Button.Click">
                   <BeginStoryboard>
                      <Storyboard>
                         <DoubleAnimation Storyboard.TargetName="b2" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                      </Storyboard>
                   </BeginStoryboard>
                </EventTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

正如Flat Eric评论的那样，您可能希望使用一些ToggleButton。它具有一个名为 IsChecked 的属性，该属性具有持久状态。单击将切换该属性。

<ToggleButton>
   <ToggleButton.Template>
        <ControlTemplate TargetType="{x:Type ToggleButton}">
            <Border x:Name="bdr_main" Background="White" CornerRadius="5" BorderThickness="2" BorderBrush="#FFBC89BC" >
                <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="#FF603276"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="bdr_main" Property="Background" Value="#FF603276"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>

请注意，上面代码中的触发器侦听IsChecked而不是IsPressed。

相关文章：