WPF Expander botón con el estilo por lo que se encuentra dentro del ampliador de cabecera

Question

estoy usando el control Expander y han labrado la cabecera como se muestra en la imagen siguiente:

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

El problema que tengo es que quiero el expansor botón para estar contenido dentro de la cabecera para que la línea para el final de la plantilla de cabecera se alinee con el Expander es decir, contenido que ultimatly quiero terminar con algo similar a la imagen de abajo:

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

Gracias de antemano.

Answer 1

Veo que realmente quiere mover el botón de expansión a su plantilla de encabezado, no solo cambiarlo. Esto se hace fácilmente con FindAncestor:

primero Añadir un ToggleButton y se unen su propiedad IsChecked usando FindAncestor, a lo largo de estas líneas:

<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>   

Esto añade un botón de expansión dentro de la plantilla de cabecera, pero no oculta el botón de originales proporcionado por el Expansor. Para hacer esto, te recomiendo que reemplaces ControlTemplate del expansor.

Aquí es una copia completa de ControlTemplate de Expander con el ToggleButton reemplazado con un 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> 

Podría ser utilizado de la siguiente manera:

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

Una alternativa más simple sería fijar simplemente un margen negativo en yourHeaderTemplate para cubrir el botón de expansión. En lugar de la ControlTemplate mostrado anteriormente, su DataTemplat acaba de contener algo como esto:

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

ajustar el margen negativo para conseguir el aspecto deseado. Esta solución es más simple pero inferior porque si cambia a un tema de sistema diferente, el margen requerido puede cambiar y su expansor puede no verse bien.

Answer 2

Deberá editar la plantilla del expansor, no la plantilla de encabezado. HeaderTemplate no contiene el botón expandir, solo el contenido dentro de él. plantilla de control

El valor por defecto es como la siguiente:

<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> 

Saqué la mayor parte de los atributos pero la izquierda en las cosas importantes. Básicamente, deseará agregar sus personalizaciones en ToggleButton. Eso es lo que contiene el botón expandir y el contenido del encabezado.

Si tiene Expression Blend, hace este proceso mucho más fácil porque simplemente puede editar una copia de la plantilla original. Visual Studio realmente no tiene esta habilidad todavía.