按鈕模板 - IsMouseOver在IsPressed執行後停止工作

Question

我有一個奇怪的問題，我希望你能幫助我。

我創建了一個按鈕的樣式並添加了一些觸發器到模板。 一個用於IsMouseOver和一個用於IsPressed。

兩個觸發器有EnterAction和ExitAction動畫模板的背景色。

當我只是將鼠標懸停在按鈕上時，我可以看到顏色變化，但後我點擊按鈕懸停觸發器停止工作。

下面是一個例子代碼：

<Button Margin="142,130,214,138" Content="Hi Mum!"> 

    <Button.Resources> 
     <Color x:Key="backgroundColor" A="255" R="52" G="152" B="219" /> 
     <Color x:Key="hoverBackgroundColor" A="255" R="62" G="182" B="255" /> 
     <Color x:Key="pressedBackgroundColor" A="255" R="42" G="122" B="175" /> 
    </Button.Resources> 

    <Button.Style> 
     <Style TargetType="{x:Type Button}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Button}"> 

         <Border BorderBrush="{TemplateBinding BorderBrush}" 
           BorderThickness="{TemplateBinding BorderThickness}" 
           CornerRadius="6"> 
          <Border.Background> 
           <SolidColorBrush x:Name="backgroundBrush" Color="{StaticResource backgroundColor}" /> 
          </Border.Background> 

          <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" 
               Content="{TemplateBinding Content}" 
               ContentStringFormat="{TemplateBinding ContentStringFormat}" 
               Focusable="False" 
               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
               Margin="{TemplateBinding Padding}" 
               RecognizesAccessKey="True" 
               SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
               VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
         </Border> 

         <ControlTemplate.Triggers> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Trigger.EnterActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <ColorAnimation Storyboard.TargetName="backgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource hoverBackgroundColor}" Duration="0:0:0.2" /> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.EnterActions> 

           <Trigger.ExitActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <ColorAnimation Storyboard.TargetName="backgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource backgroundColor}" Duration="0:0:0.2" /> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.ExitActions> 
          </Trigger> 

          <Trigger Property="IsPressed" Value="True"> 
           <Trigger.EnterActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <ColorAnimation Storyboard.TargetName="backgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource pressedBackgroundColor}" Duration="0:0:0.2" /> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.EnterActions> 

           <Trigger.ExitActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <ColorAnimation Storyboard.TargetName="backgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource backgroundColor}" Duration="0:0:0.2" /> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.ExitActions> 
          </Trigger> 
         </ControlTemplate.Triggers> 

        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Button.Style> 
</Button> 

Answer 1

看起來像最後一個觸發器勝利（嘗試改變觸發器的順序，IsPressed第一次，IsMouseOver第二次，你會看到）。

你真的應該使用VisualStateManager這種東西。

有關如何使用VSM，請參見msdn上的默認按鈕模板。

http://msdn.microsoft.com/en-us/library/cc278069(v=vs.95).aspx

編輯謝里丹爲：它就像一個魅力：

<Window.Resources> 
     <Color x:Key="OverColor">Blue</Color> 
     <Color x:Key="PressedColor">Green</Color> 
    </Window.Resources> 
    <Grid> 
     <Button Content="Hi sheridan!" HorizontalAlignment="Center" VerticalAlignment="Center"> 
      <Button.Style> 
       <Style TargetType="{x:Type Button}"> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate TargetType="{x:Type Button}"> 
           <Border Background="LightBlue"> 
            <VisualStateManager.VisualStateGroups> 
             <VisualStateGroup x:Name="CommonStates"> 
              <VisualStateGroup.Transitions> 
               <VisualTransition GeneratedDuration="0:0:0.2"/> 
              </VisualStateGroup.Transitions> 
              <VisualState x:Name="Normal"/> 
              <VisualState x:Name="Pressed"> 
               <Storyboard> 
                <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
                    To="{StaticResource PressedColor}"/> 
               </Storyboard> 
              </VisualState> 
              <VisualState x:Name="MouseOver"> 
               <Storyboard> 
               <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
                   To="{StaticResource OverColor}"/> 
               </Storyboard> 
              </VisualState> 
             </VisualStateGroup> 
            </VisualStateManager.VisualStateGroups> 

            <ContentPresenter Content="{TemplateBinding Content}"/> 
           </Border> 
          </ControlTemplate> 
         </Setter.Value> 
        </Setter> 
       </Style> 
      </Button.Style> 
     </Button> 
    </Grid> 

Answer 2

有三個部分來此解決方案：

1. 名稱您IsMouseOverBeginStoryBoard對象。
2. 在IsPressedTrigger.EnterActions中的兩個StopStoryBoard對象中使用這些名稱。
3. 反向您Trigger對象的順序：

你應該像這樣結束：

<Trigger Property="IsPressed" Value="True"> 
    <Trigger.EnterActions> 
     <StopStoryboard BeginStoryboardName="MouseOverStoryBoard" /> 
     <StopStoryboard BeginStoryboardName="MouseOverStoryBoard2" /> 
     <BeginStoryboard> 
      <Storyboard> 
       <ColorAnimation Storyboard.TargetName="backgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource pressedBackgroundColor}" Duration="0:0:0.2" /> 
      </Storyboard> 
     </BeginStoryboard> 
    </Trigger.EnterActions> 
    <Trigger.ExitActions> 
     <BeginStoryboard> 
      <Storyboard> 
       <ColorAnimation Storyboard.TargetName="backgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource backgroundColor}" Duration="0:0:0.2" /> 
      </Storyboard> 
     </BeginStoryboard> 
    </Trigger.ExitActions> 
</Trigger> 
<Trigger Property="IsMouseOver" Value="True"> 
    <Trigger.EnterActions> 
     <BeginStoryboard Name="MouseOverStoryBoard"> 
      <Storyboard> 
       <ColorAnimation Storyboard.TargetName="backgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource hoverBackgroundColor}" Duration="0:0:0.2" /> 
      </Storyboard> 
     </BeginStoryboard> 
    </Trigger.EnterActions> 
    <Trigger.ExitActions> 
     <BeginStoryboard Name="MouseOverStoryBoard2"> 
      <Storyboard> 
       <ColorAnimation Storyboard.TargetName="backgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource backgroundColor}" Duration="0:0:0.2" /> 
      </Storyboard> 
     </BeginStoryboard> 
    </Trigger.ExitActions> 
</Trigger> 

事實上，我認爲你可能能夠在無第二StopStoryboard做，但讓他們倆都不會受傷。