0
ComboBoxItemの背景に簡単なアニメーション効果を、ComboBox要素に入れたいです。項目は、ポインタがその上にあるときに定義された色で強調表示され、ポインタが離れるとき元の状態に戻ります。`ComboBoxItem`sのアニメーションによるハイライト効果
これは私が進むべき道であるトリガー勘を持っている私のテンプレート
<Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Border"
Padding="2"
SnapsToDevicePixels="true">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.01"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
To="#FFA7ACD4" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.6"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
To="White" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{DynamicResource ColorItemSelectedBackground}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource SelectedUnfocusedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
です。 VisualSateGroupsをMouseEnterとMouseOverの両方で使用しようとしました。 MouseEnter何もしなかったので、MouseOverは元の状態に戻りませんでした。 この例は私が達成したいことを最もよく反映しています。
WPFは私には新しいものではありませんが、依存オブジェクトは非常に混乱しています。特に、プロパティの操作やアニメートに利用できる複数のアプローチがあります。 ドロップボックスを開くとNullReferenceExceptionがあります。それは私には明らかです。ストーリーボードにリンクされた依存オブジェクトは存在しませんが、このアプローチでは、Styleトリガー内にTargetNameプロパティを設定することはできません。
これにはどのようなアプローチが適していますか？ VisualSateを「ネイティブ」な方法で使用している場合は、これをオーバートリガーにすることをお勧めします。
UPDATE
これは動作しますが、それは、トリガを使用しています。私はちょうど学習目的のためにVisualStateGroupsを使用してソリューションを好むだろう。
<Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.01"
Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="#FFA7ACD4" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.6"
Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="White" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
<Border x:Name="Border"
Padding="2"
SnapsToDevicePixels="true"
Background="White">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{DynamicResource ColorItemSelectedBackground}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource SelectedUnfocusedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
>' Normal'は 'SelectionStates'>' Selected'でストーリーボードを上書きします。選択した項目のビジュアルヒントは、マウスが離れると再適用されません。何か案は？ – DerpyNerd
選択状態を共通グループに移動します。 – mm8
私はあなたの努力に感謝します。しかし、私は理解していない。それが必要な場合、 'SelectionStates'グループはなぜ存在しますか？ – DerpyNerd