Search code examples
c#telerikexpandertogglebuttonradtreeview

How can I change Expander button when the radtreeview is opened or closed?


I had two icons,which is a and b; I need my radtreeviewitem showed Expander button with icon a when it opened, and showed icon b when it closed. The fllowing are two icons

<Style x:Key="ExpanderStyleOpen" TargetType="ToggleButton">
            <Setter Property="IsEnabled" Value="True" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="ToggleButton.IsChecked" Value="True" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        ...
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ExpanderStyleClose" TargetType="ToggleButton">
            <Setter Property="IsEnabled" Value="True" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="ToggleButton.IsChecked" Value="False" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                       ...
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

then my radtreeview...

<telerik:RadTreeView Name="radTreeView"
<!--static can't change...:(-->
                             ExpanderStyle="{StaticResource ExpanderStyleClose}"
                             FontSize="12"
                             IsLineEnabled="True"
                             IsRootLinesEnabled="False"
                             Visibility="{Binding IsVisible}">

Solution

  • By using a Trigger, you can combine your two styles into one.

    The idea is:

    1. Set the closed image as the style's actual image.
    2. Create a Trigger to change the ToggleButton's IsChecked property. It's false when "closed", true when opened.

    Something like this should work:

    <Style x:Key="ExpanderStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="IsEnabled" Value="True" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <StackPanel Orientation="Horizontal">
                        <Grid SnapsToDevicePixels="False" Background="Transparent">
                            <Image x:Name="expanderImage" Source="..." />
                        </Grid>
                        <ContentPresenter />
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="false">
                            <Setter Property="Source" TargetName="expanderImage" Value="..." />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>