WPF扩展器按钮样式,因此它在Expander标头内

时间:2010-05-22 21:10:27

标签: wpf silverlight xaml expander

我正在使用Expander控件并设置标题样式,如下图所示:

http://www.hughgrice.com/Expander.jpg

我遇到的问题是我希望扩展程序按钮包含在标题中,以便标题模板末尾的行与Expander内容对齐,即我最终希望得到类似的内容到下图:

http://www.hughgrice.com/Expander.gif

提前致谢。

2 个答案:

答案 0 :(得分:15)

我看到你想要将扩展器按钮实际移动到你的HeaderTemplate中,而不仅仅是重新设置它。这可以通过FindAncestor轻松完成:

首先添加一个ToggleButton并使用FindAncestor绑定其IsChecked属性,沿着以下几行:

<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提供的原始按钮。为此,我建议您更换Expander的ControlTemplate。

以下是Expander的ControlTemplate的完整副本,其中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" ... />

调整负边距以获得您想要的外观。这个解决方案更简单但是更差,因为如果你切换到不同的系统主题,所需的边距可能会改变,你的扩展器可能看起来不再好看。

答案 1 :(得分:6)

您需要编辑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还没有这种能力。