ExpanderのToggleButtonとしてチェックボックスを使用します

Question

私はWPFにかなり新しいので、問題に従わなければなりません。

拡張できるアイテムのリスト（リストボックスを使用しています）を作成する必要があります（Expander）。問題は、「選択された」場合にのみ、拡張できることです。各ListBoxItemには、チェックボックスといくつかのテキストが必要です。

私が意味することを説明するための非常に基本的な例：

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

リストボックスのチェックボックスがチェックされている場合（そのため、複数が許可されている）、より多くのデータを表示するアイテムが拡張されます。

再び例：

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

「ToggleButton」としてチェックボックスを使用するエキスパンダーを取得できません。

誰かが私を助けることができますか？いくつかの例コードは大歓迎です...

Answer 1

これはトリックを行う必要があります：

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

私は定義しました Style ここでそれが変わります Template 任意の Expander そのコントロール Style 適用されます。 （そして、私が置いたので Style の中に ListBox.Resources Anに自動的に適用されます Expander リスト内のコントロール。）

取得するためのトリック CheckBox 仕事はあなたがそれを置くとき（または実際に何か ToggleButton ベースのコントロール）に Expander テンプレート、そので構成されたデータバインディングを使用する必要があります RelativeSource に設定します TemplatedParent. 。これにより、双方向のバインディングが可能になります - それは CheckBox エキスパンダーの現在の状態を反映して、 変化する 現在の状態。

Answer 2

ヘッダーにチェックボックスを追加する必要があるのは、このコードだけです。

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

私はradコントロールを使用しています、同じことは標準のエキスパンダーを使用して行うことができます