Question

以下是我在悬停和点击时更改按钮颜色的内容。有用。我希望在点击之后保留新颜色，而不是返回原来的颜色。我尝试使用点击事件，但它没有用。还有其他办法吗？

<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>

Answer 1

使用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。

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

1 个答案: