Кнопка Расширителя WPF, Стилизованная, таким образом, это - внутренний Заголовок Расширителя
Я использую Expander управляйте и разработали заголовок как показано в изображении ниже:
http://www.hughgrice.com/Expander.jpg
Проблема, которую я имею, состоит в том, что я хочу, чтобы кнопка расширителя содержалась в заголовке так, чтобы строка для конца шаблона заголовка выровнялась с Expander содержание т.е. Я ultimatly хотим закончить с чем-то подобным изображению ниже:
http://www.hughgrice.com/Expander.gif
Заранее спасибо.
2 ответа
Я вижу, что вы действительно хотите переместить кнопку расширителя в шаблон HeaderTemplate, а не просто изменить ее стиль. Это легко сделать с помощью FindAncestor:
Сначала добавьте ToggleButton и привяжите его свойство IsChecked с помощью FindAncestor в следующих строках:
<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>
Это добавляет кнопку развертывания внутри шаблона заголовка, но не скрывает исходную кнопку, предоставленную Expander. Для этого я рекомендую вам заменить ControlTemplate расширителя.
Вот полная копия ControlTemplate Expander с ToggleButton, замененным простым 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 будет содержать что-то вроде этого:
<DataTemplate ...>
<Border Margin="-20 0 0 0" ... />
Отрегулируйте отрицательное поле, чтобы получить желаемый вид. Это решение проще, но уступает в том, что если вы переключитесь на другую системную тему, требуемый запас может измениться, и ваш расширитель может больше не выглядеть хорошо.
Вам нужно будет отредактировать шаблон Expander, а не HeaderTemplate. HeaderTemplate не содержит кнопки расширения, только содержимое внутри нее.
Шаблон управления по умолчанию выглядит примерно так:
<ControlTemplate TargetType="{x:Type Expander}">
<Border>
<DockPanel>
<ToggleButton x:Name="HeaderSite"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
DockPanel.Dock="Top"
IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
<ContentPresenter x:Name="ExpandSite" />
</DockPanel>
</Border>
</ControlTemplate>
Я убрал большинство атрибутов, но оставил важные вещи. По сути, вы захотите добавить свои настройки вокруг ToggleButton. Это то, что содержит кнопку расширения и содержимое заголовка.
Если у вас есть Expression Blend, это значительно упрощает этот процесс, потому что вы можете просто редактировать копию исходного шаблона. Visual Studio пока не имеет такой возможности.