Verwenden Sie Checkbox als Togglebutton in Expander

Question

Ich bin ziemlich neu zu wpf und habe folgendes Problem.

Ich muss eine Liste erstellen (ich verwende eine Listbox) von Elementen, die (Expander) erweitert werden können. Das Problem ist, dass sie nur dann erweitert werden können, wenn sie 'ausgewählt' wurden. Jedes listboxitem sollte eine Checkbox und etwas Text haben.

So sehr einfaches Beispiel zu veranschaulichen, was ich meine:

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

Wenn eine der Kontrollkästchen im Listenfeld (so mehrere erlaubt ist) überprüft, dann das Element mehr Daten erweitert zeigt.

Wieder ein Beispiel:

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

Ich kann nicht einen Expander erhalten eine Checkbox als 'ToggleButton' zu verwenden.

Kann mir jemand helfen? Einige Beispiel-Code wäre sehr willkommen ...

Answer 1

Dies sollte den Trick:

<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> 

ich eine Style hier definiert haben, dass die Template aller Expander Kontrollen verändert, auf die die Style angewendet wird. (Und da ich die Style in der ListBox.Resources gestellt haben, werden diese automatisch in eine Expander Kontrollen in der Liste gelten.)

Der Trick, um die CheckBox zu bekommen zu arbeiten, ist, dass wenn man es (oder in der Tat jede ToggleButton Basis Kontrolle (Control)) in eine Expander Vorlage, müssen Sie eine Datenbindung verwenden konfiguriert mit seiner RelativeSource auf die TemplatedParent festgelegt. Dies ermöglicht eine Zwei-Wege-Bindung - das bedeutet, dass der CheckBox nicht nur den aktuellen Zustand des Expanders widerspiegelt, sondern auch den aktuellen Status ändern kann.

Answer 2

Alles was Sie brauchen ein Kontrollkästchen in der Kopfzeile hinzuzufügen, ist dieser Code:

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

ich Rad Steuerung verwende, kann das gleiche