2014-11-14 74 views
2

下面是我写的用于在悬停和单击时更改我的按钮颜色。有用。我点击后我希望新颜色保持不变并且不会返回到原来的颜色。我尝试使用点击事件,但它没有奏效。有没有其他方法可以做到这一点?如何在悬停后更改按钮的颜色并单击xaml

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

也许'ToggleButton'就是你想要的 – 2014-11-14 14:32:32

+0

只要触发条件变回来,属性值就会恢复。您将需要使用一些*仍*的条件。动画可以*保存*值(作为一般的想法)。 – Sinatr 2014-11-14 14:45:14

+0

我会尝试一个转换器,返回true后得到一个单一的真。 – Paparazzi 2014-11-14 15:08:11

回答

0

使用触发器正常进行设置将不起作用,因为我们需要一些持久状态来保持效果。但IsMouseOverIsPressed都是非持久状态。不过,你可以使用一些动画来保持最终值(因此保持效果)。为了防止原始边框被动画源污染,您可以添加一个边框(并改为为此边框设置动画效果)。两个边界都包含在同一个网格中,因此它们互相覆盖。这种技术在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> 

由于平埃里克评论,你可能需要使用一些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