WPF状態、複数の状態で同じプロパティを設定する正しい方法は何ですか？

Question

トグルボタンのスタイルを設定しようとしています。選択した状態とMouseOver状態をForeground色で白にします。次のように

私のスタイルは、次のとおりです。

<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 OK>：離れてマウスを移動 - >テキストは白のままです - > OK

3：ボタンの上にマウスを移動 - OK

4> - >テキストは白のままです：離れてマウスを動かす - で> OKではない

- >テキストが戻ってあなた以外のチェックをデフォルトの色になりますつまり、同じコントロールの同じプロパティを2つの異なる値から変更しないでください視覚状態グループ。最後の変更が勝ったからです。

あなたのケース内の溶液は、これを次のようになります。

<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>