Le style fonctionne uniquement pour la première occurrence en dehors de Grid.Resources?

Question

J'ai un gridview avec un modèle de données qui inclut un bouton bascule. Le datatemplate pour les éléments de la grille a une grille, avec un bouton bascule stylisé. Le style du bouton Toggle est situé dans Grid.Resources. Cela fonctionne correctement, mais lorsque je déplace le style de Grid.Resources vers Page.Resources ou App.xaml, le contenu du bouton défini dans le style disparaît de tous sauf la première occurrence du bouton dans le gridview. Voici le style:

<Style TargetType="ToggleButton" x:Key="teststyle"> 
     <Setter Property="Padding" Value="0"/> 
     <Setter Property="Content"> 
      <Setter.Value> 
       <Path HorizontalAlignment="Center" Stroke="Black" StrokeThickness="1.25" VerticalAlignment="Center" Height="9" Width="9" Stretch="Uniform" Fill="Black" Data="M 0,0 -11.78,-11.779 0,-23.561 l 1.061,1.061 -9.97,9.971 21.064,0 0,1.5 -21.064,0 9.97,9.968 L 0,0 Z" RenderTransformOrigin="0.5,0.5" > 
        <Path.RenderTransform> 
         <CompositeTransform Rotation="-90"/> 
        </Path.RenderTransform> 
       </Path> 
      </Setter.Value> 
     </Setter> 
</Style> 

Voici des captures d'écran du comportement: http://imgur.com/a/8iZaD L'image du haut est celui d'origine lorsque le style était situé dans Grid.Resources, et le fond est quand le style est déplacé.

Answer 1

Vous pouvez contourner ce problème en utilisant ContentTemplate dans votre style plutôt contenu.

<Page.Resources> 
    <Style TargetType="ToggleButton"> 
     <Setter Property="Padding" Value="0"/> 
     <Setter Property="ContentTemplate"> 
      <Setter.Value> 
       <DataTemplate> 
        <Path HorizontalAlignment="Center" Stroke="Black" StrokeThickness="1.25" VerticalAlignment="Center" Height="9" Width="9" Stretch="Uniform" Fill="Black" Data="M 0,0 -11.78,-11.779 0,-23.561 l 1.061,1.061 -9.97,9.971 21.064,0 0,1.5 -21.064,0 9.97,9.968 L 0,0 Z" RenderTransformOrigin="0.5,0.5" > 
         <Path.RenderTransform> 
          <CompositeTransform Rotation="-90"/> 
         </Path.RenderTransform> 
        </Path> 
       </DataTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Page.Resources> 

Answer 2

La meilleure façon de déplacer vos styles dans XAML est d'utiliser le concepteur de fusion.

Vous pouvez afficher et organiser vos styles à partir de la section Ressources dans Mélange. Après cela, vous pouvez glisser et déposer votre style local dans App.xaml ou Resources.xaml. Toutes les références seront mises à jour automatiquement, vous pouvez vérifier l'image gif ci-dessous.

Answer 3

Style peut travailler en dehors de votre DataTemplate, le problème est ici le Path que vous avez défini comme Content de votre ToggleButton.

ressources XAML Style doivent être partageable (Voir XAML resources must be shareable):

Pour qu'un objet existe dans un ResourceDictionary, cet objet doit être partageable. Être partageable est nécessaire car, lorsque l'arbre d'objet d'une application est construit et utilisé au moment de l'exécution, les objets ne peuvent pas exister à plusieurs emplacements dans l'arborescence. En interne, le système de ressources crée des copies des valeurs de ressource à utiliser dans le graphique d'objet de votre application lorsque chaque ressource XAML est demandée.

Mais UIElement ne peut jamais être partageable et Path hérite de UIElement si Path n'est pas partageable. Lorsque vous réglez votre Style sur DataTemplate et que vous placez le Style en dehors du DataTemplate, tous les ToggleButton dans les articles appliquent le Style, mais le ne peut s'afficher qu'une seule fois car il n'est pas partageable. Pour le tester, vous pouvez ajouter un objet dans votre Style comme:

<Style x:Key="teststyle" TargetType="ToggleButton"> 
    <Setter Property="Padding" Value="0" /> 
    <Setter Property="Content"> 
     <Setter.Value> 
      <Path Width="9" 
        Height="9" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center" 
        Data="M 0,0 -11.78,-11.779 0,-23.561 l 1.061,1.061 -9.97,9.971 21.064,0 0,1.5 -21.064,0 9.97,9.968 L 0,0 Z" 
        Fill="Black" 
        RenderTransformOrigin="0.5,0.5" 
        Stretch="Uniform" 
        Stroke="Black" 
        StrokeThickness="1.25"> 
       <Path.RenderTransform> 
        <CompositeTransform Rotation="-90" /> 
       </Path.RenderTransform> 
      </Path> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Background" Value="Red" /> 
</Style> 

Ensuite, vous trouverez tous les horizons de votre ToggleButton deviennent rouges. Aussi, vous pouvez directement mettre deux ToggleButton dans un StackPanel comme:

<StackPanel> 
    <ToggleButton Style="{StaticResource teststyle}" /> 
    <ToggleButton Style="{StaticResource teststyle}" /> 
</StackPanel> 

Vous pouvez également trouver que la première ToggleButton ont le chemin.

Et lorsque vous mettez le Style à l'intérieur DataTemplate, chaque élément aura son propre Resources, donc ça fonctionne très bien.

Si vous utilisez ContentTemplate comme @ dit Jean-Sébastien Dupuy, le Value devenir un DataTemplate qui est partageable comme il est dérivé de FrameworkTemplate, il fonctionne aussi très bien.