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

【问题标题】：Use checkbox as togglebutton in expander在扩展器中使用复选框作为切换按钮
【发布时间】：2011-05-18 17:11:22
【问题描述】：

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

我需要创建一个可以扩展（扩展器）的项目列表（我正在使用列表框）。问题是，只有当它们被“选择”时，它们才能被扩展。每个 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>

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

谁能帮帮我？一些示例代码将非常受欢迎......

【问题讨论】：

标签： wpf checkbox expander togglebutton

【解决方案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，它更改了应用Style 的任何Expander 控件的Template。（并且由于我已将Style 放入ListBox.Resources，它会自动应用于列表中的Expander 控件。）

让CheckBox 工作的诀窍是，当您将它（或实际上任何基于ToggleButton 的控件）放入Expander 模板时，您需要使用配置了其RelativeSource 集的数据绑定到TemplatedParent。这启用了双向绑定 - 这意味着 CheckBox 不仅反映了扩展器的当前状态，还能够更改当前状态。

【讨论】：

您好伊恩，非常感谢您的回复。我有你的例子在我的应用程序中工作（在某种程度上）。我还有一个问题，希望你也能帮忙。鉴于原始问题的设置，一个带有复选框的列表框作为切换按钮，我用它来显示客户列表。我的下一个问题是：有些客户需要预先选择（例如：如果客户> 18岁，默认=选中，当表单加载时）我可以这样做（并且可以通过绑定？）
是的，绝对有可能。我假设您在实践中使用 ItemTemplate，并且 Expander 就在其中。（如果你不是，你应该这样做！）在你的 ViewModel 中，你需要一个每个项目的视图模型类，所以你的主视图模型可以公开一个列表，它每个项目的视图模型作为你列表的 ItemSource。然后，只需将 Expander 的 IsExpanded 属性绑定到每个项目视图模型的布尔属性。
我还没有列表框中项目的每个项目的 viemodel 类（还），我会尝试的。我现在要做的是将 Expander 的 IsExpanded 属性与我当前表单/视图的视图模型中的一个属性绑定，但不知何故我无法访问/找到该属性。当我写： IsExpanded="True" 时，它工作得很好。当我写 IsExpanded="{Binding Path=PropertyNameThatGivesBooleanForSelected}" （或没有 Path=）时，它不起作用。永远不会读取该属性。正如你所说，我会尝试每个项目的视图模型，但我实际上希望我现在也能工作。
我刚刚按照你所说的创建了一个每项视图模型，现在它可以完美运行了！非常感谢您的帮助！

【解决方案2】：

您只需要在标题中添加一个复选框就是以下代码：

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

我正在使用 Rad Control，使用标准扩展器也可以做到这一点

【讨论】：