9

私はExpanderコントロールを使用しており、下の図に示すようにヘッダーのスタイルを設定しています:

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

私が抱えている問題は、ヘッダーテンプレートの最後の行がExpanderコンテンツと一致するように、ヘッダー内にエキスパンダーボタンを含めることです。つまり、最終的には下の画像のようなものになりたいと思っています:

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

前もって感謝します。

4

2 に答える 2

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 を置き換えることをお勧めします。

ToggleButton を単純な ContentPresenter に置き換えた Expander の ControlTemplate の完全なコピーを次に示します。

<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" ... />

必要な外観になるように負のマージンを調整します。このソリューションはより単純ですが、別のシステム テーマに切り替えると、必要なマージンが変わり、エキスパンダーの見栄えが悪くなる可能性があるという点で劣っています。

于 2010-06-02T18:27:42.297 に答える
6

HeaderTemplateではなく、Expanderのテンプレートを編集する必要があります。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には、まだこの機能はありません。

于 2010-05-22T22:22:13.583 に答える