WPF 扩展器按钮样式,因此它位于扩展器标题内 [英] WPF Expander Button Styled so it is inside Expander Header
问题描述
我正在使用 Expander
控件并设置标题的样式,如下图所示:
I am using the Expander
control and have styled the header as shown in the picture below:
http://www.hughgrice.com/Expander.jpg
我遇到的问题是我希望扩展器按钮包含在标题中,以便标题模板末尾的行与 Expander
内容对齐,即我最终想要结束类似于下图:
The problem I have is that I want the expander button to be contained within the header so that the line for the end of the header template aligns with the Expander
content i.e. I ultimatly want to end up with something similar to the image below:
http://www.hughgrice.com/Expander.gif
提前致谢.
推荐答案
我看到您希望将扩展按钮实际移动到您的 HeaderTemplate 中,而不仅仅是重新设置它的样式.这可以通过 FindAncestor 轻松完成:
I see that you want to actually move the expander button into your HeaderTemplate, not just restyle it. This is easily done with FindAncestor:
首先添加一个 ToggleButton 并使用 FindAncestor 绑定其 IsChecked 属性,如下所示:
First add a ToggleButton and bind its IsChecked property using FindAncestor, along these lines:
<DataTemplate x:Key="MyHeaderTemplate">
<Border ...>
<DockPanel>
<!-- Expander button -->
<ToggleButton
IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor,Header,1}}"
Content=... />
<!-- Other content here -->
...
</DockPanel>
</Border>
</DataTemplate>
这会在标题模板中添加一个展开按钮,但不会隐藏扩展器提供的原始按钮.为此,我建议您更换扩展器的 ControlTemplate.
This adds an expand button inside the header template but does not hide the original button provided by the Expander. To do this I recommend you replace the Expander's ControlTemplate.
这是 Expander 的 ControlTemplate 的完整副本,其中 ToggleButton 替换为简单的 ContentPresenter:
Here is a complete copy of Expander's ControlTemplate with the ToggleButton replaced with a simple ContentPresenter:
<ControlTemplate x:Key="ExpanderWithoutButton" TargetType="{x:Type Expander}">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
CornerRadius="3"
SnapsToDevicePixels="true">
<DockPanel>
<ContentPresenter
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
DockPanel.Dock="Top"
Margin="1"
Focusable="false" />
<ContentPresenter
x:Name="ExpandSite"
Visibility="Collapsed"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"
Focusable="false" />
</DockPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="true">
<Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
可以如下使用:
<Expander Template="{StaticResource ExpanderWithoutButton}">
<Expander.HeaderTemplate>
<DataTemplate ...>
<Border ...>
<DockPanel>
<ToggleButton ...
IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor,Header,1}}" />
... other header template content here ...
更简单的替代方法是在 yourHeaderTemplate 中设置负边距以覆盖扩展器按钮.而不是上面显示的 ControlTemplate,您的 DataTemplat 将只包含如下内容:
A simpler alternative would be to just set a negative margin in yourHeaderTemplate to cover the expander button. Instead of the ControlTemplate shown above, your DataTemplat would just contain something like this:
<DataTemplate ...>
<Border Margin="-20 0 0 0" ... />
调整负边距以获得您想要的外观.此解决方案更简单但效果较差,因为如果您切换到不同的系统主题,所需的边距可能会发生变化,并且您的扩展器可能不再美观.
Adjust the negative margin to get the look you want. This solution is simpler but inferior in that if you switch to a different system theme the required margin may change and your expander may no longer look good.
这篇关于WPF 扩展器按钮样式,因此它位于扩展器标题内的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!