如何制作“手风琴小工具"?在 WPF 中? [英] How can I make an "Accordion Widget" in 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
.
我想要 Expander
的 Header
部分的外观一致,但我想要 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屋!