爲ComboBoxItem創建動畫

Question

我爲我的ComboBox創建了一個樣式和控件模板，我想用動畫對它進行打扮。

如何創建一個故事板動畫，當我將鼠標懸停在ComboBoxItem中時突出顯示將淡入，一旦我將鼠標懸停在外，突出顯示也會淡出？謝謝！

這是到目前爲止我的代碼：

<!--Area which contains selected items in the ComboBox--> 

<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox"> 
    <!--THIS MUST BE NAMED AS Part_ContentHost--> 
    <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}"/> 
</ControlTemplate> 

<!--ComboBox Style. Uses ComboBoxToggleButton to expand and collapse a Popup control SimpleScrollViewer to all items to be scrolled and SimpleComboBoxItem to define the look of each item. The Popup shows a list of items in a StackPanel--> 
    <Style TargetType="ComboBox"> 
     <Setter Property="SnapsToDevicePixels" Value="True"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ComboBox"> 
        <Grid> 
         <!--The ToggleButton is databound to the ComboBox itself to toggle IsDropDownOpen--> 
         <ToggleButton Grid.Column="2" Template="{DynamicResource ComboBoxToggleButton}" x:Name="ToggleButton" Focusable="False" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/> 
         <ContentPresenter HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="True"/> 

         <!--The TextBox must be named PART_EditableTextBox or ComboBox will not recognize it--> 
         <TextBox Visibility="Hidden" Template="{DynamicResource ComboBoxTextBox}" HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="PART_EditableTextBox" Style="{x:Null}" VerticalAlignment="Center" Focusable="True" IsReadOnly="{TemplateBinding IsReadOnly}" />    

         <!-- The Popup shows the list of items in the ComboBox. IsOpen is databound to IsDropDownOpen which is toggled via the ComboBoxToggleButton --> 
        <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide"> 
         <Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True"> 
          <Border x:Name="DropDownBorder" Background="{DynamicResource ComboBoxWindowBackgroundBrush}" BorderBrush="{DynamicResource ComboBoxSolidBorderBrush}" BorderThickness="1"/> 

          <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True"> 
           <!-- The StackPanel is used to display the children by setting IsItemsHost to be True --> 
           <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/> 
          </ScrollViewer> 
         </Grid> 
        </Popup> 
        </Grid> 

        <ControlTemplate.Triggers>      
         <!-- This forces the DropDown to have a minimum size if it is empty --> 
         <Trigger Property="HasItems" Value="false"> 
          <Setter Property="MinHeight" Value="95" TargetName="DropDownBorder"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="{DynamicResource ComboBoxDisabledForegroundBrush}"/> 
         </Trigger> 
         <Trigger Property="IsGrouping" Value="true"> 
          <Setter Property="ScrollViewer.CanContentScroll" Value="false"/> 
         </Trigger> 
         <Trigger Property="AllowsTransparency" SourceName="Popup" Value="true"> 
          <Setter Property="CornerRadius" Value="4" TargetName="DropDownBorder"/> 
          <Setter Property="Margin" Value="0,2,0,0" TargetName="DropDownBorder"/> 
         </Trigger> 
         <Trigger Property="IsEditable" Value="true"> 
          <Setter Property="IsTabStop" Value="false"/> 
          <Setter Property="Visibility" Value="Visible" TargetName="PART_EditableTextBox"/> 
          <Setter Property="Visibility" Value="Hidden" TargetName="ContentSite"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

     <!--This is used for each item inside of the ComboBox. You can change the selected color of each item below--> 
<Style TargetType="ComboBoxItem"> 
    <Setter Property="SnapsToDevicePixels" Value="true"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ComboBoxItem}"> 
       <Grid SnapsToDevicePixels="true"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="0.004*"/> 
         <ColumnDefinition Width="0.996*"/> 
        </Grid.ColumnDefinitions> 

        <Border x:Name="BorderItem" Grid.Column="1" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>  

        <Border x:Name="BorderSelectedItem" Grid.Column="1" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 

        <Path x:Name="ItemSelectedArrow" Data="M0.5,0.25 L0.5,22.25 19.5,22.25 z" Fill="#FFFFB14C" HorizontalAlignment="Left" Width="10.248" Height="10" Stretch="Fill" StrokeThickness="0" Margin="-0.376,-0.168,0,-0.332" Grid.Column="1" Visibility="Hidden"> 
    </Path> 
        </Border>    

        <ContentPresenter x:Name="ContentSite" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="2,2,0,2"/> 
       </Grid> 
       <ControlTemplate.Triggers> 

        <!-- Change IsHighlighted SelectedBackgroundBrush to set the selection color for the items --> 
        <Trigger Property="IsSelected" Value="True"> 
         <!--<Setter Property="Background" Value="{DynamicResource ComboBoxSelectedBackgroundBrush}" TargetName="BorderSelectedItem"/>--> 
         <Setter Property="Visibility" Value="Visible" TargetName="ItemSelectedArrow"/> 
         <Setter Property="Margin" Value="10,2,0,2" TargetName="ContentSite"/> 
         <Setter Property="FontWeight" Value="Bold"/>    
        </Trigger> 
        <Trigger Property="IsHighlighted" Value="true"> 
         <Setter Property="Background" Value="{DynamicResource ComboBoxHighlightBackgroundBrush}" TargetName="BorderItem"/> 

        </Trigger> 

        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Foreground" Value="{DynamicResource ComboBoxDisabledForegroundBrush}"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 1

與您的項目模板在混合開去你的國家選項卡（或只是做它直接在VisualStateManager XAML爲您的鼠標懸停狀態）和起動

所以調整時間持續時間較長有時間降低過渡速度並使淡出效果出現。您還可以設置您的過渡效果和緩和功能，爲您的簡單過渡提供進一步的涼爽。最簡單的就是使用混合，但這裏有一個快速的骯髒的xaml示例，可能會提供一個更好的主意。希望它有幫助，祝你好運！

<VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition From="Normal" **GeneratedDuration="0:0:0.15"** To="MouseOver"> 
             <VisualTransition.GeneratedEasingFunction> 
              <ExponentialEase EasingMode="EaseIn" Exponent="7"/> 
             </VisualTransition.GeneratedEasingFunction> 
            </VisualTransition> 
            <VisualTransition From="MouseOver" **GeneratedDuration="0:0:0.15"** To="Normal"> 
             <VisualTransition.GeneratedEasingFunction> 
              <CircleEase EasingMode="EaseIn"/> 
             </VisualTransition.GeneratedEasingFunction> 
            </VisualTransition> 
            <VisualTransition GeneratedDuration="0:0:0.15"/> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverBorder"> 
              <EasingDoubleKeyFrame KeyTime="0" Value="1"/> 
              <SplineDoubleKeyFrame KeyTime="00:00:00.0500000" Value="1.0" KeySpline="0,0,0.0299999993294477,0.920000016689301"/> 
             </DoubleAnimationUsingKeyFrames> 
             <ColorAnimation Duration="0" To="{StaticResource BaseColor2}" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/> 
            </Storyboard> 
           </VisualState>