在扩展器中使用复选框作为切换按钮

Question

我对 wpf 很陌生，必须解决以下问题。

我需要创建一个可以扩展（扩展器）的项目列表（我正在使用列表框）。 问题是，只有当它们被“选择”时，它们才能被扩展。 每个列表框项目应该有一个复选框和一些文本。

这是一个非常基本的例子来说明我的意思：

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

我无法让扩展器使用复选框作为“切换按钮”。

有人可以帮我吗？一些示例代码将非常受欢迎......

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 ，它可以更改 Expander 控件的 Template ，而 Style< /code> 已应用。 （由于我已将 Style 放入 ListBox.Resources 中，它将自动应用于列表中的 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 Control，使用标准扩展器也可以完成相同的操作