Puzzle - Modifier dynamiquement le contrôle du modèle de données à partir d'un autre modèle de données

Question

J'ai un DataTemplate qui contient un Expander avec une bordure dans l'en-tête. Je veux que la bordure de l'en-tête ait des coins arrondis lorsqu'elle est repliée et des coins inférieurs droits lorsqu'elle est agrandie. Quelle serait la meilleure pratique pour y parvenir (points bonus pour les échantillons de code car je suis nouveau à XAML)?

C'est le modèle qui maintient l'extension:

<DataTemplate x:Key="A"> 
     <StackPanel> 
      <Expander Name="ProjectExpander" Header="{Binding .}" HeaderTemplate="{StaticResource B}" > 
       <StackPanel> 
        <Border CornerRadius="0,0,2,2"> 

Ceci est l'extension DataTemplate:

<DataTemplate x:Key="B"> 
     <Border x:Name="ProjectExpanderHeader" 
       CornerRadius="{Binding local:ItemUserControl.ProjectHeaderBorderRadius, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}}" 
       Background="{StaticResource ItemGradient}" 
       HorizontalAlignment="{Binding HorizontalAlignment, 
               RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}, 
               Mode=OneWayToSource}"> 
      <local:ItemContentsUserControl Height="30"/> 
     </Border> 
    </DataTemplate> 

Answer 1

Bind la propriété CornerRadius à la propriété Expander.IsExpanded et joindre un IValueConverter qui retourne des coins arrondis lorsque les coins inférieurs faux et droits quand c'est vrai. Ce n'est pas le plus élégant, mais il fera le travail. Si vous utilisez MVVM, l'autre méthode consiste à exposer une propriété booléenne et à la lier à la propriété Expander.IsExpanded. Ensuite, exposez une autre propriété pour le CornerRadius, qui vérifie la propriété booléenne et renvoie les valeurs appropriées. C'est certainement la "meilleure pratique" à faire à ce sujet.

Answer 2

Une autre méthode consiste à modifier le modèle de contrôle. On peut faire valoir que c'est la meilleure pratique, même si je ne suis pas sûr d'être prêt à m'y engager.

Il est facile de le faire si vous avez Expression Blend. L'un des avantages de l'édition du modèle de contrôle est qu'il sépare le comportement de l'Expander de votre modèle de données, ce qui vous permet de le réutiliser sur différents types de données. Un inconvénient est que vous finissez par incorporer les propriétés du Border de l'en-tête dans le modèle de contrôle, de sorte que vous ne pouvez pas vraiment les modifier pour une instance individuelle du contrôle. (Autres inconvénients: vous devez avoir Expression Blend, et il produit un grand bolus de XAML que vous devez mettre dans votre dictionnaire de ressources.)

Dans Expression Blend, créez une page vide et placez-y un Expander. Faites un clic droit sur l'Expander et choisissez "Modifier le modèle/Modifier une copie ...". Donnez-lui un nom comme "ExpanderRoundedCorners".

Cela ajoutera environ 200 lignes de XAML à Page.Resources, mais la plupart de ceci est utilisé pour créer les graphiques sur le bouton d'expansion. Basculez vers la vue XAML et recherchez le ToggleButton nommé "HeaderSite". C'est le bouton d'expansion. Notez que sa propriété Content est définie sur {TemplateBinding Header}. Nous allons vouloir régler ça.

Supprimer la propriété Content, et ajouter un élément enfant à la ToggleButton comme ceci:

<ToggleButton.Content> 
    <Border x:Name="HeaderBorder" BorderBrush="Red" BorderThickness="2"> 
    <ContentPresenter Content="{TemplateBinding Header}"/> 
</Border> 
</ToggleButton.Content> 

maintenant trouver l'élément déclencheur qui rend ExpandSite visible lorsque l'on appuie sur ToggleButton. Ajoutez ce setter à cela:

<Setter TargetName="HeaderBorder" Property="CornerRadius" Value="4"/> 

C'est tout. Maintenant, chaque fois que vous créez un Expander avec le style ExpanderRoundedCorners, le contenu de l'en-tête sera inclus dans un Border dont les coins sont arrondis lorsque le Expander est développé.

Vous aurez probablement envie de jigger autour avec un peu plus quand vous l'avez fonctionné.À tout le moins, vous devez supprimer le Border du modèle d'en-tête dans votre style, puisqu'il fait maintenant partie du modèle de contrôle.