如何制作“手风琴小工具"?在 WPF 中? [英] How can I make an "Accordion Widget" in WPF?

查看:15
本文介绍了如何制作“手风琴小工具"?在 WPF 中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

目标:

我正在尝试在 WPF 中实现这样的目标:

I'm trying to achieve something like this in WPF:


(来源:wordpress.org)

初步解决方案:

目前,我正在尝试将 ItemsControl 与由 Expander 组成的 ItemTemplate 一起使用.

At the moment, I'm trying to use an ItemsControl with an ItemTemplate composed of an Expander.

我想要 ExpanderHeader 部分的外观一致,但我想要 Expander<的 Content 部分/code> 完全灵活.因此,它基本上是一组垂直堆叠的portlet",其中每个 portlet 具有一致的标题栏但内容不同.

I want a consistent look for the Header portion of the Expander, but I want the Content portion of the Expander to be completely flexible. So, it's basically a set of "portlets" stacked vertically, where each portlet has a consistent title bar but different content.

目前的代码:

这是我目前所拥有的:

<ItemsControl
    Grid.Row="2"
    Grid.Column="2">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Expander>
                <Expander.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel
                            Orientation="Horizontal">
                            <TextBlock
                                FontSize="14"
                                FontWeight="Bold"
                                Text="Title_Of_Expander_Goes_Here" />
                            <TextBlock
                                Margin="10,0,0,0"
                                FontWeight="Bold"
                                FontSize="18"
                                Text="*" />
                        </StackPanel>
                    </DataTemplate>
                </Expander.HeaderTemplate>
                <Expander.Template>
                    <ControlTemplate
                        TargetType="Expander">
                        <Border
                            BorderThickness="1">
                            <ContentPresenter />
                        </Border>
                    </ControlTemplate>
                </Expander.Template>
            </Expander>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.Items>
        <StackPanel>
            <TextBlock
                FontSize="14"
                FontWeight="Bold"
                Text="Users:" />
            <wt:DataGrid
                Margin="0,1,0,0"
                AutoGenerateColumns="False"
                CanUserAddRows="True"
                CanUserDeleteRows="True"
                ItemsSource="{Binding Source={StaticResource Main_SystemUsers}, XPath=//Users/*}">
                <wt:DataGrid.Columns>
                    <wt:DataGridTextColumn
                        Header="User Name"
                        Binding="{Binding XPath=@UserName}" />
                    <wt:DataGridComboBoxColumn
                        Header="Role"
                        ItemsSource="{Binding Source={StaticResource Main_UserRoles}, XPath=//Roles/*}"
                        SelectedValueBinding="{Binding XPath=@Role}" />
                </wt:DataGrid.Columns>
            </wt:DataGrid>
            <StackPanel
                Margin="0,10,0,0"
                Orientation="Horizontal">
                <Button
                    Content="Add New User..." />
                <Button
                    Margin="10,0,0,0"
                    Content="Delete User..." />
            </StackPanel>
        </StackPanel>
    </ItemsControl.Items>
</ItemsControl>

<小时>

讨论:

当我运行它时,唯一显示的是用户的 DataGrid 和它下面的按钮(添加新用户"和删除用户").没有 Expander 或标题栏.另外,即使我确实看到了,我也不知道如何为标题栏上显示的标题设置 Binding.如果我使用 ItemsSource,我知道如何进行绑定,但我想以声明方式设置我的项目.

The only thing that shows up when I run this is the DataGrid of users and the buttons ("Add New User" and "Delete User") below it. There is no Expander or title bar. Also, even if I did see one, I'm not sure how to set up a Binding for the title that appears on the title bar. I know how to do bindings if I use ItemsSource, but I wanted to set my items declaratively.

问题:

我该怎么办?我正在寻找对我现在拥有的东西的修复或干净的解决方案.

How should I go about this? I'm looking for either a fix for what I have now or a clean-sheet solution.

我最终做的是用 StackPanel 替换 ItemsControl 并为我的扩展器编写样式.事实证明,这要简单得多,而且 ItemsControl 确实没有任何好处,因为无论如何我都需要为每个项目声明自定义内容.剩下的一个问题是如何为每个扩展器实现自定义标题.这就是@Thomas Levesque 建议使用 TemplateBinding 的地方.我所要做的就是将标题模板中的 Text="Title_Of_Expander_Goes_Here" 替换为 Text="{TemplateBinding Content}".

What I ended up doing was replacing the ItemsControl with a StackPanel and just writing a style for my expanders. This proved to be much simpler, and there really was no benefit to the ItemsControl since I needed to declare custom content for each item anyway. The one issue remaining was how to achieve a custom title for each expander. That's where @Thomas Levesque's suggestion to use TemplateBinding came in. All I had to do was replace Text="Title_Of_Expander_Goes_Here" in my header's template (see code above) with Text="{TemplateBinding Content}".

推荐答案

您没有看到 Expander,因为您重新定义了它的模板.这个应该更好用:

You're not seeing the Expander because you redefined its template. This one should work better :

        ...
        <Expander.Template>
          <ControlTemplate
              TargetType="Expander">
              <Border
                  BorderThickness="1">
                  <Expander Content="{TemplateBinding Content}" Header="{TemplateBinding Header}"/>
              </Border>
          </ControlTemplate>
        </Expander.Template>
        ...

这篇关于如何制作“手风琴小工具"?在 WPF 中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆