Utilisez la case à cocher comme bouton bascule dans l'expander

Im assez nouveau à wpf et dois suivre le problème.Utilisez la case à cocher comme bouton bascule dans l'expander

Je dois créer une liste (j'utilise une zone de liste) d'éléments qui peuvent être développés (expanseur). Le problème est qu'ils peuvent être étendus, seulement s'ils ont été «sélectionnés». Chaque listboxitem doit avoir une case à cocher et du texte.

Ainsi par exemple très basique pour illustrer ce que je veux dire:

<listbox> 
<item>(checkbox) John Doe</item> 
<item>(checkbox) Mike Murray</item> 
</listbox>

Si un (si multiple est autorisée) des cases à cocher dans la zone de liste sont vérifiées, puis l'élément se développe montrant plus de données.

Encore une fois un exemple:

<listbox> 
<item> 
    (checkbox-checked) John Doe 
    Some extra data shown in expanded area 
</item> 
<item> 
    (checkbox-unchecked) Mike Murray</item> 
</listbox>

Je ne peux pas obtenir un détendeur pour utiliser une case à cocher comme 'togglebutton'.

Quelqu'un peut-il m'aider? Certains exemples de code serait la bienvenue ...

Source

2010-12-01 Shatish

Cela devrait faire l'affaire:

<ListBox> 
    <ListBox.Resources> 
     <Style TargetType="Expander"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Expander"> 
         <Grid> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="Auto" /> 
           <RowDefinition Height="Auto" /> 
          </Grid.RowDefinitions> 

          <CheckBox 
           IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" 
           Content="{TemplateBinding Header}" 
           /> 
          <ContentControl 
           x:Name="body" 
           Grid.Row="1" Content="{TemplateBinding Content}" 
           /> 
         </Grid> 

         <ControlTemplate.Triggers> 
          <Trigger Property="IsExpanded" Value="False"> 
           <Setter TargetName="body" Property="Visibility" Value="Collapsed" /> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

    </ListBox.Resources> 

    <Expander Header="One"> 
     Content one 
    </Expander> 

    <Expander Header="Two"> 
     Content two 
    </Expander> 
</ListBox>

J'ai défini un Style ici qui change la Template de tout Expander contrôles auxquels l'Style est appliqué. (Et comme je l'ai mis la Style dans le ListBox.Resources il va appliquer automatiquement à un Expander contrôles dans la liste.)

L'astuce pour obtenir le CheckBox au travail est que lorsque vous le mettez (ou bien une base ToggleButton contrôle) dans un modèle Expander, vous devez utiliser une liaison de données configurée avec RelativeSource définie sur TemplatedParent. Cela permet une liaison bidirectionnelle - cela signifie que non seulement le CheckBox reflète l'état actuel de l'expanseur, mais il est également capable de de changer l'état actuel.

Source

2010-12-02 11:04:38

Salut Ian, merci vous beaucoup pour votre réponse. J'ai votre exemple de travail et aussi travailler (dans une certaine mesure) dans mon application. J'ai une autre question et espère que vous pourriez aider avec lui aussi. Étant donné la configuration de la question d'origine, une zone de liste avec une case à cocher comme bouton bascule, je l'utilise pour afficher une liste de clients. Mon prochain problème est le suivant: Certains clients doivent être présélectionnés (par exemple: si un client a> 18 ans, par défaut = est coché, lorsque le formulaire est chargé) Puis-je faire ceci (et est-ce possible grâce à la liaison?) – Shatish

Btw, j'utilise le modèle MVVM ... – Shatish

Oui, certainement possible. Je suppose que vous utilisez un ItemTemplate en pratique, et que l'Expander est là. (Et si vous n'êtes pas vous devriez!) Dans votre ViewModel, vous aurez besoin d'une classe viewmodel par item, donc votre viewmodel principal peut exposer une liste par itemmodels par item pour agir en tant que ItemSource de votre liste. Et puis, liez simplement la propriété IsExpanded de l'Expander à une propriété booléenne du viewmodel par élément. –

Tout ce que vous devez ajouter une case à cocher dans l'en-tête est ce code:

  <telerik:RadExpander.Header> 
       <StackPanel Orientation="Horizontal"> 
        <CheckBox VerticalAlignment="Center"/> 
        <TextBlock Margin="5,0,0,0">Legend</TextBlock> 
       </StackPanel> 
      </telerik:RadExpander.Header>

J'utilise le contrôle Rad, La même chose peut être fait en utilisant l'extension norme

Source

2012-12-12 07:20:20 Biondo86

Utilisez la case à cocher comme bouton bascule dans l'expander

Répondre

Questions connexes