2014-11-14 63 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