2017-02-19 1 views
0

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을 사용하여 MouseEnterMouseOver을 모두 사용해 보았습니다. 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> 

답변

1

이 시도 : 보조 노트로

<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" 
            Background="White"> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="Common"> 
          <VisualState x:Name="Normal"> 
           <Storyboard> 
            <ColorAnimation 
                 Storyboard.TargetName="Border" 
                 Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                 To="White" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <ColorAnimation Duration="0:0:1" 
                 Storyboard.TargetName="Border" 
                 Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                 To="#FFA7ACD4" /> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <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="Red" /> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="SelectedUnfocused"> 
           <Storyboard> 
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" 
                        Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="0" Value="Green" /> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <ContentPresenter /> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
+0

. 선택한 항목에 대한 시각적 힌트는 마우스를 놓은 후에 다시 적용되지 않습니다. 어떤 아이디어? – DerpyNerd

+0

선택 상태를 공통 그룹으로 이동하십시오. – mm8

+0

귀하의 노력에 감사드립니다. 그러나 나는 이해하지 못한다. 그것이 필요한 경우, 왜'SelectionStates' 그룹이 존재합니까? – DerpyNerd

0

을 MM8의 대답에. 선택한 항목을 강조 표시하고 마우스 포인터 아래에 항목을 강조 표시하는 유일한 방법입니다.

VisualStateManagerNormal 상태로 덮어 쓰기 때문에 Selected 상태로 돌아갈 수없는 것처럼 보입니다.

그 때문에 VisualStateManager을 제거하여 멀티 트리거 방식을 선호했습니다. 잘 작동하지만,이 유일한 문제가있는 스토리 보드`Common`이>`Normal`는`SelectionStates`>`Selected`에서 스토리 보드를 무시한다는 것입니다

<Color x:Key="ItemBackground">White</Color> 
<Color x:Key="ItemSelectedBackground">#FFC5CBF9</Color> 
<Color x:Key="ItemMouseOverBackground">#FFA7ACD4</Color> 

<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 for hightlighting items on MouseOver --> 
        <MultiTrigger> 
         <MultiTrigger.Conditions> 
          <Condition Property="IsHighlighted" Value="true" /> 
          <Condition Property="IsSelected" Value="false" /> 
         </MultiTrigger.Conditions> 
         <MultiTrigger.EnterActions> 
          <BeginStoryboard> 
           <Storyboard> 
            <ColorAnimation Duration="0:0:0.01" 
                Storyboard.TargetName="Border" 
                Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                To="{StaticResource ItemMouseOverBackground}" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </MultiTrigger.EnterActions> 

         <MultiTrigger.ExitActions> 
          <BeginStoryboard> 
           <Storyboard> 
            <ColorAnimation Duration="0:0:0.2" 
                Storyboard.TargetName="Border" 
                Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                To="{StaticResource ItemBackground}" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </MultiTrigger.ExitActions> 
        </MultiTrigger> 
        <!-- Trigger for hightlighting selected items on MouseOver --> 
        <MultiTrigger> 
         <MultiTrigger.Conditions> 
          <Condition Property="IsHighlighted" Value="true" /> 
          <Condition Property="IsSelected" Value="true" /> 
         </MultiTrigger.Conditions> 
         <MultiTrigger.EnterActions> 
          <BeginStoryboard> 
           <Storyboard> 
            <ColorAnimation Duration="0:0:0.01" 
                Storyboard.TargetName="Border" 
                Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                To="{StaticResource ItemMouseOverBackground}" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </MultiTrigger.EnterActions> 

         <MultiTrigger.ExitActions> 
          <BeginStoryboard> 
           <Storyboard> 
            <ColorAnimation Duration="0:0:0.2" 
                Storyboard.TargetName="Border" 
                Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                To="{StaticResource ItemSelectedBackground}" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </MultiTrigger.ExitActions> 
        </MultiTrigger> 
       </ControlTemplate.Triggers> 

       <Border 
        x:Name="Border" 
        Padding="2" 
        SnapsToDevicePixels="true" 
        Background="White"> 
        <!--<VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"> 
           <Storyboard> 
            <ColorAnimationUsingKeyFrames 
             Storyboard.TargetName="Border" 
             Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ItemBackground}" /> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <ColorAnimationUsingKeyFrames 
             Storyboard.TargetName="Border" 
             Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ItemMouseOverBackground}" /> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <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="{StaticResource ItemSelectedBackground}" /> 
            </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>