How to replace WPF Expander's Header Image with custom Up/Down images

1) Place this code in the Resources section of your XAML UserControl or Page
2) Replace the highlighted image path with the images you want to use for WPF Expnder control Header


    <UserControl.Resources>
        <Color x:Key="WindowColor">#FFE8EDF9</Color>
        <Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
        <Color x:Key="ContentAreaColorDark">#FF7381F9</Color>
        <Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
        <Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
        <Color x:Key="DisabledForegroundColor">#FF888888</Color>
        <Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
        <Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>
        <Color x:Key="ControlLightColor">White</Color>
        <Color x:Key="ControlMediumColor">#FF7381F9</Color>
        <Color x:Key="ControlDarkColor">#FF211AA9</Color>
        <Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
        <Color x:Key="ControlPressedColor">#FF211AA9</Color>
        <Color x:Key="GlyphColor">#FF444444</Color>
        <Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>
        <Color x:Key="BorderLightColor">#FFCCCCCC</Color>
        <Color x:Key="BorderMediumColor">#FF888888</Color>
        <Color x:Key="BorderDarkColor">#FF444444</Color>
        <Color x:Key="PressedBorderLightColor">#FF888888</Color>
        <Color x:Key="PressedBorderDarkColor">#FF444444</Color>
        <Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
        <Color x:Key="DisabledBorderDarkColor">#FF888888</Color>
        <Color x:Key="DefaultBorderBrushDarkColor">Black</Color>
        <Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
        <Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
        <Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>
        <Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

        <LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                             StartPoint="0,0"
                             EndPoint="1,0">
            <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#000000FF"
                                  Offset="0" />
                    <GradientStop Color="#600000FF"
                                  Offset="0.4" />
                    <GradientStop Color="#600000FF"
                                  Offset="0.6" />
                    <GradientStop Color="#000000FF"
                                  Offset="1" />
                </GradientStopCollection>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
        <ControlTemplate x:Key="ExpanderToggleButton"
                         TargetType="{x:Type ToggleButton}">
            <Border x:Name="Border"
                    CornerRadius="2,0,0,0"
                    BorderThickness="0,0,0,0">
                <Grid>
                    <!-- Replace the Image source with the Image of your liking-->
                    <Image HorizontalAlignment="Left"
                           Height="24"
                           Source="/Smt.Applications.KingdomConnect;component/Images/Minimize24.png"
                           Stretch="Fill"
                           VerticalAlignment="Bottom"
                           Width="24"
                           x:Name="KCExpanderImage" />
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked"
                         Value="True">
                    <!-- Replace the Image source with the Image of your liking-->
                    <Setter TargetName="KCExpanderImage"
                            Property="Source"
                            Value="/Smt.Applications.KingdomConnect;component/Images/Maximize24.png" />

                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <Style TargetType="{x:Type Expander}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Expander}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition x:Name="ContentRow"
                                               Height="0" />
                            </Grid.RowDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver" />
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                                          Storyboard.TargetProperty="(Panel.Background).
                      (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0"
                                                                     Value="{StaticResource DisabledControlDarkColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                                          Storyboard.TargetProperty="(Border.BorderBrush).
                      (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0"
                                                                     Value="{StaticResource DisabledBorderLightColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="Border"
                                    Grid.Row="0"
                                    BorderThickness="1"
                                    BorderBrush="LightGray">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <!-- Column 0 will host the Toggle Button and your Image-->
                                        <ColumnDefinition Width="30" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <ToggleButton OverridesDefaultStyle="False"
                                                  Template="{StaticResource ExpanderToggleButton}"
                                                  IsChecked="{Binding IsExpanded, Mode=TwoWay,
                                                  RelativeSource ={RelativeSource TemplatedParent}}"
                                                  HorizontalAlignment="Center"
                                                  VerticalAlignment="Center"
                                                  x:Name="KCExpanderToggle">
                                    </ToggleButton>
                                    <ContentPresenter Grid.Column="1"
                                                      Margin="4"
                                                      ContentSource="Header"
                                                      RecognizesAccessKey="True" />
                                </Grid>
                            </Border>
                            <Border x:Name="Content"
                                    Grid.Row="1"
                                    BorderThickness="1,0,1,1"
                                    CornerRadius="0"
                                    BorderBrush="LightGray">
                                <ContentPresenter Margin="4" />
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded"
                                     Value="True">
                                <Setter TargetName="ContentRow"
                                        Property="Height"
                                        Value="{Binding DesiredHeight, ElementName=Content}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>




Comments

Post a Comment

Popular posts from this blog

WPF How to Dispose ViewModel when the associated UserControl (Not Window) closes?

Note: If your WPF UserControl is hosted in MFC Window, you may want to clean-up the ViewModel that is DataContext of your UserControl. Since Unloaded event is not called reliably for the UserControl when the hosting MFC Window closes, there is a need for another solution. XAML: < UserControl  x : Class = "Views.MyUserControl"               xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"               xmlns : x = "http://schemas.microsoft.com/winfx/2006/xaml"               xmlns : mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"                 xmlns : d = "http://schemas.microsoft.com/expression/blend/2008"                 mc : Ignorable = "d"                 d : DesignHeight = "300"  d : DesignWidth = "300" >      < Grid >                   </ Grid > </ UserControl > Code Behind: using  System; using  ViewModels; name
Read more

C# How to unit test Dispatcher

Dispatcher provides services for managing the queue of work items for a thread. Sometimes to execute a task on a background thread.  Any task executed by calling Dispatcher.BeginInvoke(...) in unit test does not get executed until you do some wire-up. This is how you would unit test code with Dispatcher. using  System; using  System.Windows.Threading; using  Microsoft.VisualStudio.TestTools.UnitTesting; namespace  UnitTesting.Tests {     [ TestClass ]      public   class   DispatcherUtilTest     {          private   ClassThatUsesDispatcher  _subject;         [ TestInitialize ]          public   void  TestInitialize()         {             _subject =  new   ClassThatUsesDispatcher ();         }         [ TestMethod ]          public   void  UseDispatcher()         {              // Arrange              var  backgroundWorkDone =  false ;             _subject.BackgroungWorkAction = () => { backgroundWorkDone =  true ; };              // Act             _subject.DoWork(
Read more

WPF: How to Deep Copy WPF object (e.g. UIElement) ?

         ///  Generic Method to perform Deep-Copy of a WPF element (e.g. UIElement)          public   static  T DeepCopy (T element)         {              var  xaml =  XamlWriter .Save(element);              var  xamlString =  new   StringReader (xaml);              var  xmlTextReader =  new   XmlTextReader (xamlString);              var  deepCopyObject = (T) XamlReader .Load(xmlTextReader);              return  deepCopyObject;         }          ///  Test showing that the deep copied object does not have the same reference as the object being copied         [ TestMethod ]          public   void  DeepCopy()         {              // Arrange              Shape  shape =  new   Rectangle  {Fill =  new   SolidColorBrush ( Colors .Red)};              // Act              var  deepCopyShape =  MyClass .DeepCopy(shape);              // Assert              Assert .AreNotSame(shape, deepCopyShape);         }  
Read more