ListBoxItem樣式保留MouseOver和所選樣式

我有一個列表框，我想用滑動顯示當前狀態的顏色Rectangle。ListBoxItem樣式保留MouseOver和所選樣式

當物品Selected或MouseOver的Recangle應該否則延伸應該收縮。

<ControlTemplate.Resources> 
    <Storyboard x:Key="MoveOutStoryboard"> 
     <DoubleAnimation To="175" 
        Storyboard.TargetProperty="Width" 
        Storyboard.TargetName="AnimatingGrid"> 
      <DoubleAnimation.EasingFunction> 
       <QuinticEase EasingMode="EaseOut" /> 
      </DoubleAnimation.EasingFunction> 
     </DoubleAnimation> 
     <ColorAnimation Storyboard.TargetName="ContentPresenter" 
       Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" 
       To="White" /> 
    </Storyboard> 

    <Storyboard x:Key="MoveInStoryboard"> 
     <DoubleAnimation To="16" 
        Storyboard.TargetProperty="Width" 
        Storyboard.TargetName="AnimatingGrid"> 
      <DoubleAnimation.EasingFunction> 
       <QuinticEase EasingMode="EaseOut" /> 
      </DoubleAnimation.EasingFunction> 
     </DoubleAnimation> 
     <ColorAnimation Storyboard.TargetName="ContentPresenter" 
       Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" 
       To="Black" /> 
    </Storyboard> 
</ControlTemplate.Resources>

至於有沒有「或」 Multitrigger我想通了以下觸發：

<ControlTemplate.Triggers> 
    <Trigger Property="IsMouseOver" Value="True"> 
     <Trigger.EnterActions> 
      <BeginStoryboard Storyboard="{StaticResource MoveOutStoryboard}" /> 
     </Trigger.EnterActions> 
    </Trigger> 

    <Trigger Property="IsSelected" Value="True"> 
     <Trigger.EnterActions> 
      <BeginStoryboard Storyboard="{StaticResource MoveOutStoryboard}" /> 
     </Trigger.EnterActions> 
    </Trigger> 

    <MultiTrigger> 
     <MultiTrigger.Conditions> 
      <Condition Property="IsMouseOver" Value="False" /> 
      <Condition Property="IsSelected" Value="False" /> 
     </MultiTrigger.Conditions> 

     <MultiTrigger.EnterActions> 
      <BeginStoryboard Storyboard="{StaticResource MoveInStoryboard}" /> 
     </MultiTrigger.EnterActions> 
    </MultiTrigger> 
</ControlTemplate.Triggers>

，但不知何故，當我有最後MultiTrigger集MoveOutStoryboard永遠不會被調用，但我想不通爲什麼。

感謝您的幫助。

來源

2014-08-28 Johannes Wanzek

這兩個故事板動畫相同的屬性？嘗試在激活新故事板之前停止活動故事板，以訪問動畫屬性。 – icebat 2014-08-28 07:22:16

共享「MoveOutStoryboard」和「MoveInStoryboard」的一些示例代碼 – pushpraj 2014-08-28 07:24:19

我將故事板添加到了我的問題中。在我的理解中，由最後一個觸發器激活的MoveInStorybard應該覆蓋之前的動畫。 – 2014-08-28 07:54:03

因爲另一個動畫不能接管性質的控制，除非相同的觸發啓動，所以給這一個嘗試

  <Trigger Property="IsMouseOver" 
        Value="True"> 
       <Trigger.EnterActions> 
        <BeginStoryboard Storyboard="{StaticResource MoveOutStoryboard}" /> 
       </Trigger.EnterActions> 
       <Trigger.ExitActions> 
        <BeginStoryboard Storyboard="{StaticResource MoveInStoryboard}" /> 
       </Trigger.ExitActions> 
      </Trigger> 
      <Trigger Property="IsSelected" 
        Value="True"> 
       <Trigger.EnterActions> 
        <BeginStoryboard Storyboard="{StaticResource MoveOutStoryboard}" /> 
       </Trigger.EnterActions> 
       <Trigger.ExitActions> 
        <BeginStoryboard Storyboard="{StaticResource MoveInStoryboard}" /> 
       </Trigger.ExitActions> 
      </Trigger>

，如果你用鼠標所面臨的問題和IsSelected然後用這個

  <Trigger Property="IsMouseOver" 
        Value="True"> 
       <Trigger.EnterActions> 
        <RemoveStoryboard BeginStoryboardName="moveIn2" /> 
        <RemoveStoryboard BeginStoryboardName="moveOut2" /> 
        <BeginStoryboard x:Name="moveOut1" 
            Storyboard="{StaticResource MoveOutStoryboard}" /> 
       </Trigger.EnterActions> 
       <Trigger.ExitActions> 
        <RemoveStoryboard BeginStoryboardName="moveIn2" /> 
        <RemoveStoryboard BeginStoryboardName="moveOut2" /> 
        <BeginStoryboard x:Name="moveIn1" 
            Storyboard="{StaticResource MoveInStoryboard}" /> 
       </Trigger.ExitActions> 
      </Trigger> 
      <Trigger Property="IsSelected" 
        Value="True"> 
       <Trigger.EnterActions> 
        <RemoveStoryboard BeginStoryboardName="moveIn1" /> 
        <RemoveStoryboard BeginStoryboardName="moveOut1" /> 
        <BeginStoryboard x:Name="moveOut2" 
            Storyboard="{StaticResource MoveOutStoryboard}" /> 
       </Trigger.EnterActions> 
       <Trigger.ExitActions> 
        <RemoveStoryboard BeginStoryboardName="moveIn1" /> 
        <RemoveStoryboard BeginStoryboardName="moveOut1" /> 
        <BeginStoryboard x:Name="moveIn2" 
            Storyboard="{StaticResource MoveInStoryboard}" /> 
       </Trigger.ExitActions> 
      </Trigger>

也刪除多觸發器，這可能不是必需的，或者您可以將刪除故事板方法與您的方法結合起來，這也應該起作用。

編輯

這裏與RemoveStoryboard你的方法，這是工作，我測試過

<ControlTemplate.Triggers> 
     <Trigger Property="IsMouseOver" 
        Value="True"> 
      <Trigger.EnterActions> 
       <RemoveStoryboard BeginStoryboardName="multi" /> 
       <RemoveStoryboard BeginStoryboardName="sel" /> 
       <BeginStoryboard x:Name="over" 
            Storyboard="{StaticResource MoveOutStoryboard}" /> 
      </Trigger.EnterActions> 
     </Trigger> 

     <Trigger Property="IsSelected" 
        Value="True"> 
      <Trigger.EnterActions> 
       <RemoveStoryboard BeginStoryboardName="multi" /> 
       <RemoveStoryboard BeginStoryboardName="over" /> 
       <BeginStoryboard x:Name="sel" 
            Storyboard="{StaticResource MoveOutStoryboard}" /> 
      </Trigger.EnterActions> 
     </Trigger> 

     <MultiTrigger> 
      <MultiTrigger.Conditions> 
       <Condition Property="IsMouseOver" 
          Value="False" /> 
       <Condition Property="IsSelected" 
          Value="False" /> 
      </MultiTrigger.Conditions> 

      <MultiTrigger.EnterActions> 
       <RemoveStoryboard BeginStoryboardName="sel" /> 
       <RemoveStoryboard BeginStoryboardName="over" /> 
       <BeginStoryboard x:Name="multi" 
            Storyboard="{StaticResource MoveInStoryboard}" /> 
      </MultiTrigger.EnterActions> 
     </MultiTrigger> 
    </ControlTemplate.Triggers>

或這一點，但是這可能是車和你可以看到動畫中的一些快照

<ControlTemplate.Triggers> 
     <Trigger Property="IsMouseOver" 
        Value="True"> 
      <Trigger.EnterActions> 
       <BeginStoryboard x:Name="over" 
            Storyboard="{StaticResource MoveOutStoryboard}" /> 
      </Trigger.EnterActions> 
      <Trigger.ExitActions> 
       <RemoveStoryboard BeginStoryboardName="over" /> 
      </Trigger.ExitActions> 
     </Trigger> 

     <Trigger Property="IsSelected" 
        Value="True"> 
      <Trigger.EnterActions> 
       <BeginStoryboard x:Name="sel" 
            Storyboard="{StaticResource MoveOutStoryboard}" /> 
      </Trigger.EnterActions> 
      <Trigger.ExitActions> 
       <RemoveStoryboard BeginStoryboardName="sel" /> 
      </Trigger.ExitActions> 
     </Trigger> 

     <MultiTrigger> 
      <MultiTrigger.Conditions> 
       <Condition Property="IsMouseOver" 
          Value="False" /> 
       <Condition Property="IsSelected" 
          Value="False" /> 
      </MultiTrigger.Conditions> 

      <MultiTrigger.EnterActions> 
       <BeginStoryboard x:Name="multi" 
            Storyboard="{StaticResource MoveInStoryboard}" /> 
      </MultiTrigger.EnterActions> 
      <MultiTrigger.ExitActions> 
       <RemoveStoryboard BeginStoryboardName="multi" /> 
      </MultiTrigger.ExitActions> 
     </MultiTrigger> 
    </ControlTemplate.Triggers>

來源

2014-08-28 08:52:16 pushpraj

第一種方法正在工作，直到您選擇並取消選擇一個項目。然後它不會再顯示MouseOver效果。第二種方法不會停留在選定狀態:( – 2014-08-28 09:01:24

您是否嘗試過使用多觸發器將刪除故事板與您的方法結合在一起？ – pushpraj 2014-08-28 09:03:16

我將您的答案標記爲已接受，另請參閱我的答案，非常感謝！ – 2014-08-28 09:14:46

因此，經過許多嘗試，並在pushpraj的幫助下，我得到了最終的解決方案。也許它會幫助任何人有同樣的問題：

<MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsMouseOver" 
             Value="True" /> 
           <Condition Property="IsSelected" 
             Value="False" /> 
          </MultiTrigger.Conditions> 

          <MultiTrigger.EnterActions> 
           <RemoveStoryboard BeginStoryboardName="moveIn1" /> 
           <RemoveStoryboard BeginStoryboardName="moveOut2" /> 
           <BeginStoryboard x:Name="moveOut1" 
             Storyboard="{StaticResource MoveOutStoryboard}" /> 
          </MultiTrigger.EnterActions> 
         </MultiTrigger> 

         <Trigger Property="IsSelected" 
          Value="True"> 
          <Trigger.EnterActions> 
           <BeginStoryboard x:Name="moveOut2" 
             Storyboard="{StaticResource MoveOutStoryboard}" /> 
          </Trigger.EnterActions> 
         </Trigger> 

         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsMouseOver" 
             Value="False" /> 
           <Condition Property="IsSelected" 
             Value="False" /> 
          </MultiTrigger.Conditions> 

          <MultiTrigger.EnterActions> 
           <RemoveStoryboard BeginStoryboardName="moveOut2" /> 
           <BeginStoryboard x:Name="moveIn1" 
             Storyboard="{StaticResource MoveInStoryboard}" /> 
          </MultiTrigger.EnterActions> 
         </MultiTrigger>

來源

2014-08-28 09:13:50

很棒的發現！當你必須在不同的動畫/觸發器中操作相同的屬性時，事情變得非常棘手。 – pushpraj 2014-08-28 09:16:53

ListBoxItem樣式保留MouseOver和所選樣式

回答

相關問題