ComboBoxItem
의 배경에 간단한 애니메이션 효과가 ComboBox
요소에 포함되도록하고 싶습니다. 항목은 포인터가 위에있을 때 정의 된 색상으로 강조 표시되고 포인터가 떠날 때 원래 상태로 되돌려 야합니다. 'ComboBoxItem`에 대한 애니메이션이있는 Hightlight 효과
이
내가 길을 가야하는 것입니다 트리거 직감을 내 템플릿<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>
. 선택한 항목에 대한 시각적 힌트는 마우스를 놓은 후에 다시 적용되지 않습니다. 어떤 아이디어? – DerpyNerd
선택 상태를 공통 그룹으로 이동하십시오. – mm8
귀하의 노력에 감사드립니다. 그러나 나는 이해하지 못한다. 그것이 필요한 경우, 왜'SelectionStates' 그룹이 존재합니까? – DerpyNerd