2016-12-02 141 views
1

我有一個邊框的WPF樣式。它用於按鈕。如何在樣式中正確設置WPF EventTrigger?

<Style x:Key="RoundCorner" TargetType="{x:Type Button}"> 
    <Setter Property="ClickMode" Value="Press"/> 
    <EventSetter Event="PreviewMouseUp" Handler="RegularButtonRelease"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Grid x:Name="grid"> 
        <Border x:Name="border" CornerRadius="2" BorderBrush="#FF444444" BorderThickness="1"> 
         <Border.Background> 
          <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1.2" > 
           <GradientStop Color="#ffaaaaaa" Offset="0" /> 
           <GradientStop Color="White" Offset="1" /> 
          </LinearGradientBrush>        
         </Border.Background> 
        </Border> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsPressed" Value="True"> 
         <!--some style --> 
        </Trigger> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <!--some style -->         
        </Trigger> 
        <EventTrigger RoutedEvent="PreviewMouseLeftButtonUp"> 
         <BeginStoryboard> 
          <Storyboard Duration="0:0:2" AutoReverse="False"> 
           <ColorAnimation 
            Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
            FillBehavior="Stop" To="Tomato"/> 
          </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

我想在給定的時間內設置邊框背景顏色爲不同的,當我釋放鼠標點擊按鈕。 (例如按下按鈕時是黑色的,當我釋放時,它變爲紅色,然後變回白色)

使用上面的代碼,我可以看到按鈕顏色在釋放鼠標按鈕後不斷變化,而我的事件處理程序RegularButtonRelease也被連續發射。 很快,應用程序掛起,並給我一個例外的System.StackOverflowException

如果我在風格上帶走了EventTrigger,我的應用程序正確執行,所以我的EventTrigger必須是錯誤的。

我的問題是,我怎麼能正確設置背景顏色變化在鼠標按鈕(使用EventTrigger或其他)?

UPDATE:

我嘗試設置邊框和背景,同時使用:

<ColorAnimation 
    Duration="0:0:0.8" 
    Storyboard.TargetName="border" 
    Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" 
    To="Red"/> 
<ColorAnimation 
    Duration="0:0:0.8" 
    Storyboard.TargetName="border" 
    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
    To="Red"/> 

這一次的邊界線變爲紅色,就像一個魅力。但背景仍然存在,沒有任何變化。

如何正確更改我的背景?

+0

這行添加到你的'Triggers'標籤 - '<觸發屬性=「IsMouseOver」 VALUE =「真」>' –

回答

2

首先,你的錯誤: 你正在試圖改變Background,因爲它被設置爲LinearGradientBrush這是不可能的Color,其次你還沒有設置Storyboard.TargetName可言。

我已經做了一些更改,第一次:將x:Name分配到第二個GradientStop,然後在動畫中使用x:Name作爲Storyboard.TargetName="C2"

<Style x:Key="RoundCorner" TargetType="{x:Type Button}"> 
     <Setter Property="ClickMode" Value="Press"/> 
     <EventSetter Event="PreviewMouseUp" Handler="RegularButtonRelease"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Grid x:Name="grid"> 
         <Border x:Name="border" CornerRadius="2" BorderBrush="#FF444444" BorderThickness="1"> 
          <Border.Background> 
           <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1.2" > 
            <GradientStop Color="#ffaaaaaa" Offset="0" /> 
            <GradientStop x:Name="C2" Color="White" Offset="1" /> 
           </LinearGradientBrush> 
          </Border.Background> 
         </Border> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsPressed" Value="True"> 
          <!--some style --> 
         </Trigger> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <!--some style --> 
         </Trigger> 
         <EventTrigger RoutedEvent="PreviewMouseLeftButtonUp"> 
          <BeginStoryboard> 
           <Storyboard Duration="0:0:1" AutoReverse="False"> 
            <ColorAnimation Storyboard.TargetName="C2" 
             Storyboard.TargetProperty="Color" 
             FillBehavior="Stop" To="Red"/> 
           </Storyboard> 
          </BeginStoryboard> 
         </EventTrigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
+0

謝謝。你的修改效果很好。 – Dia

0

或者試試下面這個例子:

<ControlTemplate.Triggers> 
      <Trigger Property="IsPressed" Value="True"> 
       <Setter Property="Background" TargetName="Background" Value="Red"/> 
      </Trigger> 
     </ControlTemplate.Triggers> 

參考:

Change color of Button when Mouse is over

How do you change Background for a Button MouseOver in WPF?

來到System.StackOverflowException部分,根據MSDN,你可以通過創建太多得到StackOverflowExceptions堆棧中的大對象,它通常是因爲你的代碼已經存在而發生的進入一種反覆調用相同功能鏈的狀態。像遞歸一樣。

+0

感謝評論,但我的風格已經有一個'IsPressed' tragger是改變邊界背景。當我釋放鼠標時,我想要另一種顏色,持續〜1秒。 – Dia

+0

類似於[Pietu1998答案](http://stackoverflow.com/a/21113588/5588347)中的內容? –

+0

呃,那對我沒有幫助。但是現在我可以更改邊框線的顏色,只能在更改背景時失敗。我編輯了主帖。 – Dia

相關問題