2017-06-07 1 views
2

J'ai personnalisé le contrôle ToggleButton à l'aide d'un ControlTemplate comme ceci:Modifier une partie du controltemplate dans les contrôles de style?

<StackPanel> 
    <StackPanel.Resources> 
     <Style x:Key="OptionBarButton" TargetType="{x:Type ToggleButton}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ToggleButton"> 
         <Border Padding="18,12,18,12" Background="{TemplateBinding Background}"> 
          <ContentPresenter /> 
         </Border> 
         <ControlTemplate.Triggers> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsChecked" Value="True" /> 
            <Condition Property="IsMouseOver" Value="True" /> 
           </MultiTrigger.Conditions> 
           <MultiTrigger.Setters> 
            <Setter Property="Background" Value="DarkBlue" /> 
           </MultiTrigger.Setters> 
          </MultiTrigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsChecked" Value="True" /> 
            <Condition Property="IsMouseOver" Value="False" /> 
           </MultiTrigger.Conditions> 
           <MultiTrigger.Setters> 
            <Setter Property="Background" Value="SkyBlue" /> 
           </MultiTrigger.Setters> 
          </MultiTrigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsChecked" Value="False" /> 
            <Condition Property="IsMouseOver" Value="False" /> 
           </MultiTrigger.Conditions> 
           <MultiTrigger.Setters> 
            <Setter Property="Background" Value="#88000000" /> 
           </MultiTrigger.Setters> 
          </MultiTrigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsChecked" Value="False" /> 
            <Condition Property="IsMouseOver" Value="True" /> 
           </MultiTrigger.Conditions> 
           <MultiTrigger.Setters> 
            <Setter Property="Background" Value="#F0000000" /> 
           </MultiTrigger.Setters> 
          </MultiTrigger> 
         </ControlTemplate.Triggers> 

        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </StackPanel.Resources> 

    <ToggleButton Style="{StaticResource OptionBarButton}"> 
     <Image Source="../Assets/icons/action.png" Height="26" RenderOptions.BitmapScalingMode="Fant" /> 
    </ToggleButton> 

    <ToggleButton Style="{StaticResource OptionBarButton}"> 
     <Image Source="../Assets/icons/action2.png" Height="26" RenderOptions.BitmapScalingMode="Fant" /> 
    </ToggleButton> 

</StackPanel> 

Cela fonctionne bien, mais je voudrais maintenant changer certaines parties du modèle dans certaines des commandes de style, à savoir les états de couleur IsChecked (SkyBlue/DarkBlue).

Est-il possible de modifier/transmettre ces couleurs dans/au modèle lors de son utilisation? Je sais que je peux utiliser les propriétés attachées ou/et sous-classer la classe ToggleButton (en y ajoutant des propriétés de dépendance), mais je me demandais s'il n'y avait pas de façon plus idiomatique de résoudre cela, peut-être seulement avec xaml. Avoir à écrire du code personnalisé en C# semble un peu exagéré pour un cas d'utilisation si simple?

Répondre

3

Il n'y a pas de moyen facile de le faire sans code, autant que je sache, mais si vous voulez vraiment - vous pouvez utiliser les ressources dynamiques d'une certaine manière. Habituellement, les ressources dynamiques sont utilisées pour modifier l'apparence de TOUTES les instances de contrôle au moment de l'exécution. Vous référencez une ressource dynamique à partir du modèle, puis modifiez cette ressource et tous les contrôles reflètent cette modification. Ce n'est probablement pas ce dont vous avez besoin dans ce cas, car vous voulez changer "certaines parties du modèle dans certains des contrôles stylisés". Vous pouvez toujours le faire comme ceci:

<!-- default checked and over color --> 
<SolidColorBrush x:Key="TgCheckedAndOver" Color="DarkBlue" /> 
<!-- default checked color --> 
<SolidColorBrush x:Key="TgChecked" Color="SkyBlue" /> 
<Style 
     TargetType="{x:Type ToggleButton}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ToggleButton"> 
       <Border Padding="18,12,18,12" 
         Background="{TemplateBinding Background}"> 
        <ContentPresenter /> 
       </Border> 
       <ControlTemplate.Triggers> 
        <MultiTrigger> 
         <MultiTrigger.Conditions> 
          <Condition Property="IsChecked" 
             Value="True" /> 
          <Condition Property="IsMouseOver" 
             Value="True" /> 
         </MultiTrigger.Conditions> 
         <MultiTrigger.Setters> 
          <Setter Property="Background" 
            Value="{DynamicResource TgCheckedAndOver}" /> 
         </MultiTrigger.Setters> 
        </MultiTrigger> 
        <MultiTrigger> 
         <MultiTrigger.Conditions> 
          <Condition Property="IsChecked" 
             Value="True" /> 
          <Condition Property="IsMouseOver" 
             Value="False" /> 
         </MultiTrigger.Conditions> 
         <MultiTrigger.Setters> 
          <Setter Property="Background" 
            Value="{DynamicResource TgChecked}" /> 
         </MultiTrigger.Setters> 
        </MultiTrigger> 
        <MultiTrigger> 
         <MultiTrigger.Conditions> 
          <Condition Property="IsChecked" 
             Value="False" /> 
          <Condition Property="IsMouseOver" 
             Value="False" /> 
         </MultiTrigger.Conditions> 
         <MultiTrigger.Setters> 
          <Setter Property="Background" 
            Value="#88000000" /> 
         </MultiTrigger.Setters> 
        </MultiTrigger> 
        <MultiTrigger> 
         <MultiTrigger.Conditions> 
          <Condition Property="IsChecked" 
             Value="False" /> 
          <Condition Property="IsMouseOver" 
             Value="True" /> 
         </MultiTrigger.Conditions> 
         <MultiTrigger.Setters> 
          <Setter Property="Background" 
            Value="#F0000000" /> 
         </MultiTrigger.Setters> 
        </MultiTrigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Ceci est l'utilisation régulière de la ressource dynamique. Maintenant, quand vous voulez changer appearence juste pour un contrôle particulier, vous faites ceci:

<ToggleButton> 
    <ToggleButton.Resources> 
     <!-- override default resources --> 
     <SolidColorBrush x:Key="TgChecked" Color="Yellow" /> 
     <SolidColorBrush x:Key="TgCheckedAndOver" 
         Color="Green" /> 
    </ToggleButton.Resources> 
    <Image Source="../Assets/icons/action.png" Height="26" RenderOptions.BitmapScalingMode="Fant" /> 
</ToggleButton> 

Parce que vous placez de nouvelles ressources avec les mêmes touches « plus » au contrôle - modèle les utilisera au lieu de ceux par défaut, et juste ce contrôle particulier le fera, pas tous.

+0

Ah, c'est génial. Je peux certainement voir cela utile dans d'autres scénarios. Merci! – monoceres

0

Malheureusement, ControlTemplates sont une chose tout ou rien. Si vous voulez changer les couleurs que vous référencez à l'intérieur, vous devez changer de modèle. Je suppose qu'ayant références aux ressources dans le modèle n'est pas une option pour vous.

Je créer des propriétés de dépendance pour chacune des couleurs de variable dans OptionBarButton.

+0

Ok, je vois. Y a-t-il une autre technique que ControlTemplates qui serait mieux adaptée à cette situation? – monoceres

+0

Je viens de voir la solution DynamicResource. J'aime vraiment ça. Va dans cette direction! – SuperJMN