locked
Change toggle button background color in WPF Expander control RRS feed

  • Question

  • I am using Expander control on WPF usercontrol.

    Now my problem is how to change the WPF toggle button background, but is should not change the header style of the expander control.

     

    Friday, July 1, 2011 11:05 AM

Answers

  • Hi Amit Shelke,

    Since the background of the entire togglebutton is hard coded to Transparent in the default control template, we need to re-template the Expander to change the entire background of the togglebutton.

    For example,

     

     

      <Window.Resources>
        <SolidColorBrush x:Key="HeaderBackground" Color="Gray"/>
        <ControlTemplate x:Key="Template1" TargetType="Expander">
          <Border Background="{TemplateBinding Control.Background}" BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="{TemplateBinding Control.BorderThickness}" CornerRadius="3" SnapsToDevicePixels="True">
            <DockPanel>
              <ToggleButton Content="{TemplateBinding HeaderedContentControl.Header}" ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}" DockPanel.Dock="Top" FontFamily="{TemplateBinding Control.FontFamily}" FontSize="{TemplateBinding Control.FontSize}" FontStretch="{TemplateBinding Control.FontStretch}" FontStyle="{TemplateBinding Control.FontStyle}" FontWeight="{TemplateBinding Control.FontWeight}" Foreground="{TemplateBinding Control.Foreground}" HorizontalContentAlignment="{TemplateBinding Control.HorizontalContentAlignment}" IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" MinHeight="0" MinWidth="0" Name="HeaderSite" Padding="{TemplateBinding Control.Padding}" VerticalContentAlignment="{TemplateBinding Control.VerticalContentAlignment}">
                <ToggleButton.FocusVisualStyle>
                  <Style>
                    <Setter Property="Control.Template">
                      <Setter.Value>
                        <ControlTemplate>
                          <Border>
                            <Rectangle Margin="0" SnapsToDevicePixels="True" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" />
                          </Border>
                        </ControlTemplate>
                      </Setter.Value>
                    </Setter>
                  </Style>
                </ToggleButton.FocusVisualStyle>
                <ToggleButton.Style>
                  <Style TargetType="ToggleButton">
                    <Setter Property="Control.Template">
                      <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                          <Border Padding="{TemplateBinding Control.Padding}">
                            <Grid Background="{StaticResource HeaderBackground}" SnapsToDevicePixels="False">
                              <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="19" />
                                <ColumnDefinition Width="*" />
                              </Grid.ColumnDefinitions>
                              <Ellipse Height="19" HorizontalAlignment="Center" Name="circle" Stroke="DarkGray" VerticalAlignment="Center" Width="19" />
                              <Path Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Center" Name="arrow" SnapsToDevicePixels="False" Stroke="#FF666666" StrokeThickness="2" VerticalAlignment="Center" />
                              <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" Grid.Column="1" HorizontalAlignment="Left" Margin="4,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center" />
                            </Grid>
                          </Border>
                          <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                              <Setter Property="Path.Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5" />
                            </Trigger>
                            <Trigger Property="UIElement.IsMouseOver" Value="True">
                              <Setter Property="Shape.Stroke" TargetName="circle" Value="#FF3C7FB1" />
                              <Setter Property="Shape.Stroke" TargetName="arrow" Value="#FF222222" />
                            </Trigger>
                            <Trigger Property="ButtonBase.IsPressed" Value="True">
                              <Setter Property="Shape.Stroke" TargetName="circle" Value="#FF526C7B" />
                              <Setter Property="Shape.StrokeThickness" TargetName="circle" Value="1.5" />
                              <Setter Property="Shape.Stroke" TargetName="arrow" Value="#FF003366" />
                            </Trigger>
                          </ControlTemplate.Triggers>
                        </ControlTemplate>
                      </Setter.Value>
                    </Setter>
                  </Style>
                </ToggleButton.Style>
              </ToggleButton>
              <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" DockPanel.Dock="Bottom" Focusable="False" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" Margin="{TemplateBinding Control.Padding}" Name="ExpandSite" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" Visibility="Collapsed" />
            </DockPanel>
          </Border>
          <ControlTemplate.Triggers>
            <Trigger Property="Expander.IsExpanded" Value="True">
              <Setter Property="UIElement.Visibility" TargetName="ExpandSite" Value="Visible" />
            </Trigger>
            <Trigger Property="Expander.ExpandDirection" Value="Right">
              <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Right" />
              <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Left" />
              <Setter Property="FrameworkElement.Style" TargetName="HeaderSite">
                <Setter.Value>
                  <Style TargetType="ToggleButton">
                    <Setter Property="Control.Template">
                      <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                          <Border Padding="{TemplateBinding Control.Padding}">
                            <Grid Background="{StaticResource HeaderBackground}" SnapsToDevicePixels="False">
                              <Grid.RowDefinitions>
                                <RowDefinition Height="19" />
                                <RowDefinition Height="*" />
                              </Grid.RowDefinitions>
                              <Grid>
                                <Grid.LayoutTransform>
                                  <TransformGroup>
                                    <RotateTransform Angle="-90" />
                                  </TransformGroup>
                                </Grid.LayoutTransform>
                                <Ellipse Height="19" HorizontalAlignment="Center" Name="circle" Stroke="DarkGray" VerticalAlignment="Center" Width="19" />
                                <Path Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Center" Name="arrow" SnapsToDevicePixels="False" Stroke="#FF666666" StrokeThickness="2" VerticalAlignment="Center" />
                              </Grid>
                              <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" Grid.Row="1" HorizontalAlignment="Center" Margin="0,4,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top" />
                            </Grid>
                          </Border>
                          <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                              <Setter Property="Path.Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5" />
                            </Trigger>
                            <Trigger Property="UIElement.IsMouseOver" Value="True">
                              <Setter Property="Shape.Stroke" TargetName="circle" Value="#FF3C7FB1" />
                              <Setter Property="Shape.Stroke" TargetName="arrow" Value="#FF222222" />
                            </Trigger>
                            <Trigger Property="ButtonBase.IsPressed" Value="True">
                              <Setter Property="Shape.Stroke" TargetName="circle" Value="#FF526C7B" />
                              <Setter Property="Shape.StrokeThickness" TargetName="circle" Value="1.5" />
                              <Setter Property="Shape.Stroke" TargetName="arrow" Value="#FF003366" />
                            </Trigger>
                          </ControlTemplate.Triggers>
                        </ControlTemplate>
                      </Setter.Value>
                    </Setter>
                  </Style>
                </Setter.Value>
              </Setter>
            </Trigger>
            <Trigger Property="Expander.ExpandDirection" Value="Up">
              <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top" />
              <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom" />
              <Setter Property="FrameworkElement.Style" TargetName="HeaderSite">
                <Setter.Value>
                  <Style TargetType="ToggleButton">
                    <Setter Property="Control.Template">
                      <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                          <Border Padding="{TemplateBinding Control.Padding}">
                            <Grid Background="{StaticResource HeaderBackground}" SnapsToDevicePixels="False">
                              <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="19" />
                                <ColumnDefinition Width="*" />
                              </Grid.ColumnDefinitions>
                              <Grid>
                                <Grid.LayoutTransform>
                                  <TransformGroup>
                                    <RotateTransform Angle="180" />
                                  </TransformGroup>
                                </Grid.LayoutTransform>
                                <Ellipse Height="19" HorizontalAlignment="Center" Name="circle" Stroke="DarkGray" VerticalAlignment="Center" Width="19" />
                                <Path Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Center" Name="arrow" SnapsToDevicePixels="False" Stroke="#FF666666" StrokeThickness="2" VerticalAlignment="Center" />
                              </Grid>
                              <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" Grid.Column="1" HorizontalAlignment="Left" Margin="4,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center" />
                            </Grid>
                          </Border>
                          <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                              <Setter Property="Path.Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5" />
                            </Trigger>
                            <Trigger Property="UIElement.IsMouseOver" Value="True">
                              <Setter Property="Shape.Stroke" TargetName="circle" Value="#FF3C7FB1" />
                              <Setter Property="Shape.Stroke" TargetName="arrow" Value="#FF222222" />
                            </Trigger>
                            <Trigger Property="ButtonBase.IsPressed" Value="True">
                              <Setter Property="Shape.Stroke" TargetName="circle" Value="#FF526C7B" />
                              <Setter Property="Shape.StrokeThickness" TargetName="circle" Value="1.5" />
                              <Setter Property="Shape.Stroke" TargetName="arrow" Value="#FF003366" />
                            </Trigger>
                          </ControlTemplate.Triggers>
                        </ControlTemplate>
                      </Setter.Value>
                    </Setter>
                  </Style>
                </Setter.Value>
              </Setter>
            </Trigger>
            <Trigger Property="Expander.ExpandDirection" Value="Left">
              <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Left" />
              <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Right" />
              <Setter Property="FrameworkElement.Style" TargetName="HeaderSite">
                <Setter.Value>
                  <Style TargetType="ToggleButton">
                    <Setter Property="Control.Template">
                      <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                          <Border Padding="{TemplateBinding Control.Padding}">
                            <Grid Background="{StaticResource HeaderBackground}" SnapsToDevicePixels="False">
                              <Grid.RowDefinitions>
                                <RowDefinition Height="19" />
                                <RowDefinition Height="*" />
                              </Grid.RowDefinitions>
                              <Grid>
                                <Grid.LayoutTransform>
                                  <TransformGroup>
                                    <RotateTransform Angle="90" />
                                  </TransformGroup>
                                </Grid.LayoutTransform>
                                <Ellipse Height="19" HorizontalAlignment="Center" Name="circle" Stroke="DarkGray" VerticalAlignment="Center" Width="19" />
                                <Path Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Center" Name="arrow" SnapsToDevicePixels="False" Stroke="#FF666666" StrokeThickness="2" VerticalAlignment="Center" />
                              </Grid>
                              <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" Grid.Row="1" HorizontalAlignment="Center" Margin="0,4,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top" />
                            </Grid>
                          </Border>
                          <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                              <Setter Property="Path.Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5" />
                            </Trigger>
                            <Trigger Property="UIElement.IsMouseOver" Value="True">
                              <Setter Property="Shape.Stroke" TargetName="circle" Value="#FF3C7FB1" />
                              <Setter Property="Shape.Stroke" TargetName="arrow" Value="#FF222222" />
                            </Trigger>
                            <Trigger Property="ButtonBase.IsPressed" Value="True">
                              <Setter Property="Shape.Stroke" TargetName="circle" Value="#FF526C7B" />
                              <Setter Property="Shape.StrokeThickness" TargetName="circle" Value="1.5" />
                              <Setter Property="Shape.Stroke" TargetName="arrow" Value="#FF003366" />
                            </Trigger>
                          </ControlTemplate.Triggers>
                        </ControlTemplate>
                      </Setter.Value>
                    </Setter>
                  </Style>
                </Setter.Value>
              </Setter>
            </Trigger>
            <Trigger Property="UIElement.IsEnabled" Value="False">
              <Setter Property="Control.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Window.Resources>
      <StackPanel>
        <Expander IsExpanded="True" Header="Header" Content="Content" Template="{StaticResource Template1}" />
      </StackPanel>

     

    Best regards,


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    • Marked as answer by Min Zhu Monday, July 11, 2011 1:43 AM
    Saturday, July 2, 2011 5:17 AM

All replies

  • Hi Amit Shelke,

    Since the background of the entire togglebutton is hard coded to Transparent in the default control template, we need to re-template the Expander to change the entire background of the togglebutton.

    For example,

     

     

      <Window.Resources>
        <SolidColorBrush x:Key="HeaderBackground" Color="Gray"/>
        <ControlTemplate x:Key="Template1" TargetType="Expander">
          <Border Background="{TemplateBinding Control.Background}" BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="{TemplateBinding Control.BorderThickness}" CornerRadius="3" SnapsToDevicePixels="True">
            <DockPanel>
              <ToggleButton Content="{TemplateBinding HeaderedContentControl.Header}" ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}" DockPanel.Dock="Top" FontFamily="{TemplateBinding Control.FontFamily}" FontSize="{TemplateBinding Control.FontSize}" FontStretch="{TemplateBinding Control.FontStretch}" FontStyle="{TemplateBinding Control.FontStyle}" FontWeight="{TemplateBinding Control.FontWeight}" Foreground="{TemplateBinding Control.Foreground}" HorizontalContentAlignment="{TemplateBinding Control.HorizontalContentAlignment}" IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" MinHeight="0" MinWidth="0" Name="HeaderSite" Padding="{TemplateBinding Control.Padding}" VerticalContentAlignment="{TemplateBinding Control.VerticalContentAlignment}">
                <ToggleButton.FocusVisualStyle>
                  <Style>
                    <Setter Property="Control.Template">
                      <Setter.Value>
                        <ControlTemplate>
                          <Border>
                            <Rectangle Margin="0" SnapsToDevicePixels="True" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" />
                          </Border>
                        </ControlTemplate>
                      </Setter.Value>
                    </Setter>
                  </Style>
                </ToggleButton.FocusVisualStyle>
                <ToggleButton.Style>
                  <Style TargetType="ToggleButton">
                    <Setter Property="Control.Template">
                      <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                          <Border Padding="{TemplateBinding Control.Padding}">
                            <Grid Background="{StaticResource HeaderBackground}" SnapsToDevicePixels="False">
                              <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="19" />
                                <ColumnDefinition Width="*" />
                              </Grid.ColumnDefinitions>
                              <Ellipse Height="19" HorizontalAlignment="Center" Name="circle" Stroke="DarkGray" VerticalAlignment="Center" Width="19" />
                              <Path Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Center" Name="arrow" SnapsToDevicePixels="False" Stroke="#FF666666" StrokeThickness="2" VerticalAlignment="Center" />
                              <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" Grid.Column="1" HorizontalAlignment="Left" Margin="4,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center" />
                            </Grid>
                          </Border>
                          <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                              <Setter Property="Path.Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5" />
                            </Trigger>
                            <Trigger Property="UIElement.IsMouseOver" Value="True">
                              <Setter Property="Shape.Stroke" TargetName="circle" Value="#FF3C7FB1" />
                              <Setter Property="Shape.Stroke" TargetName="arrow" Value="#FF222222" />
                            </Trigger>
                            <Trigger Property="ButtonBase.IsPressed" Value="True">
                              <Setter Property="Shape.Stroke" TargetName="circle" Value="#FF526C7B" />
                              <Setter Property="Shape.StrokeThickness" TargetName="circle" Value="1.5" />
                              <Setter Property="Shape.Stroke" TargetName="arrow" Value="#FF003366" />
                            </Trigger>
                          </ControlTemplate.Triggers>
                        </ControlTemplate>
                      </Setter.Value>
                    </Setter>
                  </Style>
                </ToggleButton.Style>
              </ToggleButton>
              <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" DockPanel.Dock="Bottom" Focusable="False" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" Margin="{TemplateBinding Control.Padding}" Name="ExpandSite" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" Visibility="Collapsed" />
            </DockPanel>
          </Border>
          <ControlTemplate.Triggers>
            <Trigger Property="Expander.IsExpanded" Value="True">
              <Setter Property="UIElement.Visibility" TargetName="ExpandSite" Value="Visible" />
            </Trigger>
            <Trigger Property="Expander.ExpandDirection" Value="Right">
              <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Right" />
              <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Left" />
              <Setter Property="FrameworkElement.Style" TargetName="HeaderSite">
                <Setter.Value>
                  <Style TargetType="ToggleButton">
                    <Setter Property="Control.Template">
                      <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                          <Border Padding="{TemplateBinding Control.Padding}">
                            <Grid Background="{StaticResource HeaderBackground}" SnapsToDevicePixels="False">
                              <Grid.RowDefinitions>
                                <RowDefinition Height="19" />
                                <RowDefinition Height="*" />
                              </Grid.RowDefinitions>
                              <Grid>
                                <Grid.LayoutTransform>
                                  <TransformGroup>
                                    <RotateTransform Angle="-90" />
                                  </TransformGroup>
                                </Grid.LayoutTransform>
                                <Ellipse Height="19" HorizontalAlignment="Center" Name="circle" Stroke="DarkGray" VerticalAlignment="Center" Width="19" />
                                <Path Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Center" Name="arrow" SnapsToDevicePixels="False" Stroke="#FF666666" StrokeThickness="2" VerticalAlignment="Center" />
                              </Grid>
                              <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" Grid.Row="1" HorizontalAlignment="Center" Margin="0,4,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top" />
                            </Grid>
                          </Border>
                          <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                              <Setter Property="Path.Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5" />
                            </Trigger>
                            <Trigger Property="UIElement.IsMouseOver" Value="True">
                              <Setter Property="Shape.Stroke" TargetName="circle" Value="#FF3C7FB1" />
                              <Setter Property="Shape.Stroke" TargetName="arrow" Value="#FF222222" />
                            </Trigger>
                            <Trigger Property="ButtonBase.IsPressed" Value="True">
                              <Setter Property="Shape.Stroke" TargetName="circle" Value="#FF526C7B" />
                              <Setter Property="Shape.StrokeThickness" TargetName="circle" Value="1.5" />
                              <Setter Property="Shape.Stroke" TargetName="arrow" Value="#FF003366" />
                            </Trigger>
                          </ControlTemplate.Triggers>
                        </ControlTemplate>
                      </Setter.Value>
                    </Setter>
                  </Style>
                </Setter.Value>
              </Setter>
            </Trigger>
            <Trigger Property="Expander.ExpandDirection" Value="Up">
              <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top" />
              <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom" />
              <Setter Property="FrameworkElement.Style" TargetName="HeaderSite">
                <Setter.Value>
                  <Style TargetType="ToggleButton">
                    <Setter Property="Control.Template">
                      <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                          <Border Padding="{TemplateBinding Control.Padding}">
                            <Grid Background="{StaticResource HeaderBackground}" SnapsToDevicePixels="False">
                              <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="19" />
                                <ColumnDefinition Width="*" />
                              </Grid.ColumnDefinitions>
                              <Grid>
                                <Grid.LayoutTransform>
                                  <TransformGroup>
                                    <RotateTransform Angle="180" />
                                  </TransformGroup>
                                </Grid.LayoutTransform>
                                <Ellipse Height="19" HorizontalAlignment="Center" Name="circle" Stroke="DarkGray" VerticalAlignment="Center" Width="19" />
                                <Path Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Center" Name="arrow" SnapsToDevicePixels="False" Stroke="#FF666666" StrokeThickness="2" VerticalAlignment="Center" />
                              </Grid>
                              <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" Grid.Column="1" HorizontalAlignment="Left" Margin="4,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center" />
                            </Grid>
                          </Border>
                          <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                              <Setter Property="Path.Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5" />
                            </Trigger>
                            <Trigger Property="UIElement.IsMouseOver" Value="True">
                              <Setter Property="Shape.Stroke" TargetName="circle" Value="#FF3C7FB1" />
                              <Setter Property="Shape.Stroke" TargetName="arrow" Value="#FF222222" />
                            </Trigger>
                            <Trigger Property="ButtonBase.IsPressed" Value="True">
                              <Setter Property="Shape.Stroke" TargetName="circle" Value="#FF526C7B" />
                              <Setter Property="Shape.StrokeThickness" TargetName="circle" Value="1.5" />
                              <Setter Property="Shape.Stroke" TargetName="arrow" Value="#FF003366" />
                            </Trigger>
                          </ControlTemplate.Triggers>
                        </ControlTemplate>
                      </Setter.Value>
                    </Setter>
                  </Style>
                </Setter.Value>
              </Setter>
            </Trigger>
            <Trigger Property="Expander.ExpandDirection" Value="Left">
              <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Left" />
              <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Right" />
              <Setter Property="FrameworkElement.Style" TargetName="HeaderSite">
                <Setter.Value>
                  <Style TargetType="ToggleButton">
                    <Setter Property="Control.Template">
                      <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                          <Border Padding="{TemplateBinding Control.Padding}">
                            <Grid Background="{StaticResource HeaderBackground}" SnapsToDevicePixels="False">
                              <Grid.RowDefinitions>
                                <RowDefinition Height="19" />
                                <RowDefinition Height="*" />
                              </Grid.RowDefinitions>
                              <Grid>
                                <Grid.LayoutTransform>
                                  <TransformGroup>
                                    <RotateTransform Angle="90" />
                                  </TransformGroup>
                                </Grid.LayoutTransform>
                                <Ellipse Height="19" HorizontalAlignment="Center" Name="circle" Stroke="DarkGray" VerticalAlignment="Center" Width="19" />
                                <Path Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Center" Name="arrow" SnapsToDevicePixels="False" Stroke="#FF666666" StrokeThickness="2" VerticalAlignment="Center" />
                              </Grid>
                              <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" Grid.Row="1" HorizontalAlignment="Center" Margin="0,4,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top" />
                            </Grid>
                          </Border>
                          <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                              <Setter Property="Path.Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5" />
                            </Trigger>
                            <Trigger Property="UIElement.IsMouseOver" Value="True">
                              <Setter Property="Shape.Stroke" TargetName="circle" Value="#FF3C7FB1" />
                              <Setter Property="Shape.Stroke" TargetName="arrow" Value="#FF222222" />
                            </Trigger>
                            <Trigger Property="ButtonBase.IsPressed" Value="True">
                              <Setter Property="Shape.Stroke" TargetName="circle" Value="#FF526C7B" />
                              <Setter Property="Shape.StrokeThickness" TargetName="circle" Value="1.5" />
                              <Setter Property="Shape.Stroke" TargetName="arrow" Value="#FF003366" />
                            </Trigger>
                          </ControlTemplate.Triggers>
                        </ControlTemplate>
                      </Setter.Value>
                    </Setter>
                  </Style>
                </Setter.Value>
              </Setter>
            </Trigger>
            <Trigger Property="UIElement.IsEnabled" Value="False">
              <Setter Property="Control.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Window.Resources>
      <StackPanel>
        <Expander IsExpanded="True" Header="Header" Content="Content" Template="{StaticResource Template1}" />
      </StackPanel>

     

    Best regards,


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    • Marked as answer by Min Zhu Monday, July 11, 2011 1:43 AM
    Saturday, July 2, 2011 5:17 AM
  • Hi Amit Shelke,

    Just checking in to see if the information was helpful. Please let us know if you would like further assistance.

    Have a great day!


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, July 6, 2011 5:03 AM