WPF擴展器按鈕是內部擴展頭

Question

我使用的Expander控制和已風格的標頭，如示於下圖：

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

我的問題是，我想在膨脹按鈕標題中包含從而用於頭部模板的末尾符合Expander內容即對準我ultimatly想類似下面的圖像的東西結束：

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

在此先感謝。

Answer 1

我看到你想要將擴展器按鈕實際移動到HeaderTemplate中，而不僅僅是重新定義它。這是很容易與FindAncestor完成：

加上一個切換按鈕，並使用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。

這裏是擴展的控件模板的完整副本與切換按鈕用一個簡單的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中的負邊距用於覆蓋擴展器按鈕。相反，上面顯示的控件模板中，你會DataTemplat只包含這樣的事情：

<DataTemplate ...> 
    <Border Margin="-20 0 0 0" ... /> 

調整陰性切緣得到你想要的效果。這種解決方案更簡單但更差，因爲如果切換到不同的系統主題，所需的保證金可能會改變，您的擴展器可能不再看起來不錯。

Answer 2

您將需要編輯擴展器的模板，而不是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並沒有真正具備這種能力。