Modifier le style d'un bouton lorsqu'il est désactivé (IsEnabled = False)

Question

J'ai une question UWP. Comment puis-je changer le style d'un bouton quand il est désactivé (IsEnabled = False)?

Answer 1

Voici comment vous le faites.

<StackPanel> 

    <Button x:Name="button" Content="Click Me" 
      IsEnabled="{Binding IsChecked, ElementName=checkBox}"> 
     <Interactivity:Interaction.Behaviors> 

      <Core:DataTriggerBehavior Binding="{Binding IsEnabled, 
       ElementName=button, Mode=OneWay}" Value="True"> 
       <Core:ChangePropertyAction PropertyName="Opacity" Value="1"/> 
      </Core:DataTriggerBehavior> 

      <Core:DataTriggerBehavior Binding="{Binding IsEnabled, 
       ElementName=button, Mode=OneWay}" Value="False"> 
       <Core:ChangePropertyAction PropertyName="Opacity" Value=".5"/> 
      </Core:DataTriggerBehavior> 

     </Interactivity:Interaction.Behaviors> 
    </Button> 

    <CheckBox x:Name="checkBox" IsChecked="True" /> 

</StackPanel> 

N'oubliez pas que vous devez référencer le SDK Behaviors.

Bonne chance!

Answer 2

Microsoft a ajouté le VisualStateManager (connu de Silverlight) à Windows Universal Plattform. Son but est de gérer l'apparence d'un contrôle pour différents états. L'état "Désactivé" d'un bouton est un bon exemple. Les états visuels d'un contrôle sont définis dans ControlTemplate. Pour personnaliser ces états, le plus simple est de faire un clic droit sur votre bouton dans le concepteur et choisissez "Modifier le modèle" puis "Modifier une copie ...". Cela permet de copier le modèle par défaut de ce contrôle dans l'emplacement sélectionné. Si le contrôle est un bouton, vous avez une ressource de style comme ceci:

<Style x:Key="MyButtonStyle" TargetType="Button"> 
     <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
     <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
     <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/> 
     <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/> 
     <Setter Property="Padding" Value="8,4,8,4"/> 
     <Setter Property="HorizontalAlignment" Value="Left"/> 
     <Setter Property="VerticalAlignment" Value="Center"/> 
     <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> 
     <Setter Property="FontWeight" Value="Normal"/> 
     <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/> 
     <Setter Property="UseSystemFocusVisuals" Value="True"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="PointerOver"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Maintenant, vous pouvez voir les états visuels du bouton et les setters/animations qui leur sont associés. Vous pouvez les modifier à la main ou vous pouvez ouvrir Microsoft Blend 2015. Il a de grandes capacités pour la conception d'états visuels. Faites un clic droit sur votre bouton et cliquez sur "Modifier le modèle" -> "Modifier le courant" dans le mélange et vous pouvez voir tous les états de votre contrôle sur l'onglet états (à gauche).

Lorsque vous sélectionnez l'état « Désactivé », vous verrez une bordure rouge arround la fenêtre du concepteur. Le texte dans le coin supérieur gauche vous indique que "Enregistrement d'état désactivé est activé ...". Cela signifie que chaque modification apportée à un objet de votre arborescence de contrôle passe à l'état "Désactivé" du contrôle. Par exemple, vous pouvez modifier la couleur de premier plan de l'environnement Contentpresenter pour l'état désactivé. L'animation suivante sera ajoutée à votre XAML:

          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <SolidColorBrush Color="#FF225EFF"/> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 

Pour un peu plus d'informations sur VisualSateManager et où commencer jeter un oeil à la New XAML Tools in Visual Studio 2015 and Blend Video on Channel9.

Espérons que cela soit utile