wpfxamltemplatesexpander

Adding image as Expander icon WPF


I am trying to add an image as the icon for the Expander but am getting stuck when trying to set the new image when the button is toggled to show what is in the expander. I have chopped up the Expander template to make my own as from what I have seen it is the only way of making a custom icon for it. This is what I currently have and it shows the initial image when it is unchecked however I have no idea how to change the image source within <Trigger Property="IsChecked" Value="true">:

<Style x:Key="ExpanderDownHeaderStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border Padding="{TemplateBinding Padding}">
                            <Grid SnapsToDevicePixels="False">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="19"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Image Source="Assets\icons\hide.png"/>
                                <ContentPresenter Grid.Column="1" HorizontalAlignment="Left" Margin="4,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"/>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="true">

                            #Change image when button is checked want to change to Assets\icons\show.png

                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
etc...

Solution

  • You can update the Image's Source property with a Setter in your Trigger:

    <Style x:Key="ExpanderDownHeaderStyle"
            TargetType="{x:Type ToggleButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Padding="{TemplateBinding Padding}">
                        <Grid SnapsToDevicePixels="False">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="19" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Source="Assets\icons\hide.png"
                                    Name="icon" />
                            <ContentPresenter Grid.Column="1"
                                                HorizontalAlignment="Left"
                                                Margin="4,0,0,0"
                                                RecognizesAccessKey="True"
                                                SnapsToDevicePixels="True"
                                                VerticalAlignment="Center" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked"
                                    Value="true">
                            <Setter Property="Source"
                                    Value="Assets\icons\show.png"
                                    TargetName="icon" />
                        </Trigger>
                        <Trigger Property="IsChecked"
                                    Value="False">
                            <Setter Property="Source"
                                    Value="Assets\icons\hide.png"
                                    TargetName="icon" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>