WPF 상태, 여러 상태에서 동일한 속성을 설정하는 올바른 방법은 무엇입니까

Question

토글 단추 스타일을 시도하고 선택한 상태 및 MouseOver 상태에 대한 전경색을 흰색으로합니다. 다음과 같이

내 스타일은 다음과 같습니다

<Window.Resources> 
    <ControlTemplate x:Key="MenuButton" TargetType="{x:Type ToggleButton}"> 
     <Border x:Name="border" > 
      <VisualStateManager.VisualStateGroups> 

       <VisualStateGroup x:Name="CommonStates"> 
        <VisualState x:Name="MouseOver"> 
         <Storyboard> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Cursor)" Storyboard.TargetName="MenuItemContainer"> 
           <DiscreteObjectKeyFrame KeyTime="0"> 
            <DiscreteObjectKeyFrame.Value> 
             <Cursor>Hand</Cursor> 
            </DiscreteObjectKeyFrame.Value> 
           </DiscreteObjectKeyFrame> 
          </ObjectAnimationUsingKeyFrames> 
          <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="menuText"> 
           <EasingColorKeyFrame KeyTime="0" Value="White"/> 
          </ColorAnimationUsingKeyFrames> 
          <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="icon"> 
           <EasingColorKeyFrame KeyTime="0" Value="White"/> 
          </ColorAnimationUsingKeyFrames> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Normal"/> 
       </VisualStateGroup> 

       <VisualStateGroup x:Name="CheckStates"> 
        <VisualState x:Name="Checked"> 
         <Storyboard> 
          <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border"> 
           <EasingThicknessKeyFrame KeyTime="0" Value="4,0,0,0"/> 
          </ThicknessAnimationUsingKeyFrames> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="border"> 
           <DiscreteObjectKeyFrame KeyTime="0"> 
            <DiscreteObjectKeyFrame.Value> 
             <SolidColorBrush Color="#FF19AA8D"/> 
            </DiscreteObjectKeyFrame.Value> 
           </DiscreteObjectKeyFrame> 
          </ObjectAnimationUsingKeyFrames> 
          <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="icon"> 
           <EasingColorKeyFrame KeyTime="0" Value="White"/> 
          </ColorAnimationUsingKeyFrames> 
          <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="menuText"> 
           <EasingColorKeyFrame KeyTime="0" Value="White"/> 
          </ColorAnimationUsingKeyFrames> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Unchecked"/> 
       </VisualStateGroup> 


      </VisualStateManager.VisualStateGroups> 

      <StackPanel x:Name="MenuItemContainer" Orientation="Horizontal" Height="46" Margin="14,0,0,0" Background="Transparent" > 
       <TextBlock x:Name="icon" Grid.Column="0" VerticalAlignment="Center" FontFamily="{StaticResource FontAwesome}" Foreground="#a7b1c2" FontSize="13" Text="&#xF009;" Margin="0,0,6,0"/> 
       <TextBlock x:Name="menuText" VerticalAlignment="Center" Foreground="#a7b1c2" FontSize="13" Text="{TemplateBinding Property=ContentControl.Content}"/> 
      </StackPanel> 
     </Border> 
    </ControlTemplate> 
</Window.Resources> 

이것은 잘 작동하고 마우스 오버율 및 전경이 흰색으로 설정되어 선택된 상태입니다. 그러나 Expression Blend Designer에서 "예측할 수없는 동작을 피하려면 하나 이상의 상태에서 개체 속성을 변경하면 안됩니다 ..."

이 경고를 무시하면 좋을까요, 아니면 더 나은 것이 있습니까? 달성하려는 목표를 구현하는 방법은 무엇입니까?

감사합니다.

Answer 1

예.주의해야합니다. 사실 스타일이 올바르게 작동하지 않습니다.

1 : 다음 테스트를 확인 버튼을 설정 -> 텍스트로 전환 흰색 - 확인>

2 : 멀리 마우스를 이동 -> 텍스트가 흰색으로 유지 -> 확인

3 : -> 텍스트 흰색에 남아 - 버튼 위에 마우스를 이동> 확인

4 : 멀리 마우스를 이동 ->되지 확인

에서 -> 텍스트를 다시 체크되지 않은 기본 색으로 변합니다 다른 단어를 두 개의 differen에서 같은 컨트롤의 동일한 속성을 수정해서는 안됩니다 시각 상태 그룹. 마지막 변경이 이기기 때문입니다.

귀하의 경우 해결책이 될 수있다 :

<ControlTemplate x:Key="MenuButton" TargetType="{x:Type ToggleButton}"> 
     <Border x:Name="border" > 
      <VisualStateManager.VisualStateGroups> 

       <VisualStateGroup x:Name="CommonStates"> 
        <VisualState x:Name="MouseOver"> 
         <Storyboard> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Cursor)" Storyboard.TargetName="MenuItemContainer"> 
           <DiscreteObjectKeyFrame KeyTime="0"> 
            <DiscreteObjectKeyFrame.Value> 
             <Cursor>Hand</Cursor> 
            </DiscreteObjectKeyFrame.Value> 
           </DiscreteObjectKeyFrame> 
          </ObjectAnimationUsingKeyFrames> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Visibility)" Storyboard.TargetName="menuTextMouseOver"> 
           <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" /> 
          </ObjectAnimationUsingKeyFrames> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="iconMouseOver"> 
           <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" /> 
          </ObjectAnimationUsingKeyFrames> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="menuText"> 
           <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}" /> 
          </ObjectAnimationUsingKeyFrames> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="icon"> 
           <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}" /> 
          </ObjectAnimationUsingKeyFrames> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Normal"/> 
       </VisualStateGroup> 

       <VisualStateGroup x:Name="CheckStates"> 
        <VisualState x:Name="Checked"> 
         <Storyboard> 
          <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border"> 
           <EasingThicknessKeyFrame KeyTime="0" Value="4,0,0,0"/> 
          </ThicknessAnimationUsingKeyFrames> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="border"> 
           <DiscreteObjectKeyFrame KeyTime="0"> 
            <DiscreteObjectKeyFrame.Value> 
             <SolidColorBrush Color="#FF19AA8D"/> 
            </DiscreteObjectKeyFrame.Value> 
           </DiscreteObjectKeyFrame> 
          </ObjectAnimationUsingKeyFrames> 
          <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="icon"> 
           <EasingColorKeyFrame KeyTime="0" Value="White"/> 
          </ColorAnimationUsingKeyFrames> 
          <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="menuText"> 
           <EasingColorKeyFrame KeyTime="0" Value="White"/> 
          </ColorAnimationUsingKeyFrames> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Unchecked"/> 
       </VisualStateGroup> 


      </VisualStateManager.VisualStateGroups> 

      <StackPanel x:Name="MenuItemContainer" Orientation="Horizontal" Height="46" Margin="14,0,0,0" Background="Transparent" > 
       <TextBlock x:Name="iconMouseOver" Grid.Column="0" VerticalAlignment="Center" Foreground="White" FontSize="13" Text="the icon" Margin="0,0,6,0" Visibility="Collapsed"/> 
       <TextBlock x:Name="menuTextMouseOver" VerticalAlignment="Center" Foreground="White" FontSize="13" Text="{TemplateBinding Property=ContentControl.Content}" Visibility="Collapsed"/> 
       <TextBlock x:Name="icon" Grid.Column="0" VerticalAlignment="Center" Foreground="#a7b1c2" FontSize="13" Text="the icon" Margin="0,0,6,0"/> 
       <TextBlock x:Name="menuText" VerticalAlignment="Center" Foreground="#a7b1c2" FontSize="13" Text="{TemplateBinding Property=ContentControl.Content}"/> 
      </StackPanel> 
     </Border> 
    </ControlTemplate>