我如何制作一个“手风琴小部件”？在WPF中？ [英] How can I make an "Accordion Widget" in WPF?
问题描述
目标：
我正在WPF中尝试实现以下目标：
（来源： wordpress.org ）
最初的解决方案：
此刻，我正在尝试使用 ItemsControl 和 ItemTemplate 由 Expander 组成。
我希望对 Expander 的 Header 部分保持一致的外观，但我希望<$ c Expander 的$ c> Content 部分要完全灵活。因此，它基本上是一组垂直堆叠的 portlet，其中每个portlet具有一致的标题栏，但内容不同。 > 到目前为止的代码：
这是我目前拥有的内容：
< 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>
<边界
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
标头=用户名
Binding = {Binding XPath = @ UserName} />
< wt：DataGridComboBoxColumn
标头=角色
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>
<按钮
Content =添加新用户... />
<按钮
Margin = 10,0,0,0
Content =删除用户... />
< / StackPanel>
< / StackPanel>
< /ItemsControl.Items>
< / ItemsControl>
讨论：
运行此命令时显示的唯一内容是用户的 DataGrid 和按钮（添加新用户和删除用户）。没有 Expander 或标题栏。另外，即使我确实看到了一个，也不确定如何为出现在标题栏上的标题设置 Binding 。如果使用 ItemsSource ，我知道如何进行绑定，但是我想声明性地设置项目。
问题：
我应该怎么做？我正在寻找现在可用的解决方案或干净的解决方案。
编辑：
我最终要做的是将 ItemsControl 替换为 StackPanel 并编写我的扩展器的样式。事实证明，这要简单得多， ItemsControl 确实没有任何好处，因为无论如何我都需要声明每个项目的自定义内容。剩下的一个问题是如何为每个扩展器获得自定义标题。这就是@Thomas Levesque建议使用 TemplateBinding 的地方。我要做的就是替换 Text = Title_Of_Expander_Goes_Here 在我的标头模板中（请参见上面的代码），并带有 Text = {TemplateBinding Content} 。
您没有看到扩展器，因为您重新定义了它的模板。此选项应该更好地工作：
...
< Expander.Template>
< ControlTemplate
TargetType = Expander>
<边界
BorderThickness = 1>
< Expander Content = {TemplateBinding Header}标头= {TemplateBinding标头} />
< / Border>
< / ControlTemplate>
< /Expander.Template>
...
The goal:
I'm trying to achieve something like this in WPF:
(source: wordpress.org)
An initial solution:
At the moment, I'm trying to use an ItemsControl with an ItemTemplate composed of an Expander.
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.
The code so far:
This is what I have at the moment:
<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>
Discussion:
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.
The question:
How should I go about this? I'm looking for either a fix for what I have now or a clean-sheet solution.
Edit:
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}".
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屋！
