Template for GridViewToggleRowDetailsColumn

[GEB]

I am using VS2010, SL4 Beta with the Blend 4 Preview.  In this environment, I am unable to get the teamplates for RadGridView using Blend.  I would like to change the +/- symbol on a GridViewToggleRowDetailsColumn.  Is there an example on how to do this, or can someone post the teamplate for GridViewToggleRowDetailsColumn?

 

[Stefan Dobrev]

Hi GEB,

This column is using GridViewToggleButton control. You can find its style bellow:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
    xmlns:grid="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <SolidColorBrush x:Key="GridViewDisabledBackground" Color="#FFEEEEEE"/>
    <LinearGradientBrush x:Key="GridViewIndicatorsPartsFill" StartPoint="0.5,0" EndPoint="0.5,1">
        <GradientStop Offset="0" Color="#FF000000"/>
        <GradientStop Offset="1" Color="#FF000000"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="GridLinesFill" Color="#FFB3B3B3"/>
    <ControlTemplate x:Key="GridViewToggleButtonTemplate" TargetType="controls:GridViewToggleButton">
        <Border
            x:Name="Background"
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver"/>
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames
                                BeginTime="00:00:00"
                                Duration="00:00:00.001"
                                Storyboard.TargetName="Background"
                                Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                                <EasingColorKeyFrame KeyTime="00:00:00" Value="{StaticResource GridViewDisabledBackground}"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="CheckStates">
                    <VisualState x:Name="Checked">
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames
                                BeginTime="00:00:00"
                                Duration="00:00:00.001"
                                Storyboard.TargetName="plus"
                                Storyboard.TargetProperty="(UIElement.Opacity)">
                                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames
                                BeginTime="00:00:00"
                                Duration="00:00:00.001"
                                Storyboard.TargetName="minus"
                                Storyboard.TargetProperty="(UIElement.Opacity)">
                                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unchecked"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                    <VisualState x:Name="Focused"/>
                    <VisualState x:Name="Unfocused"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid>
                <Path
                    x:Name="plus"
                    Width="8"
                    Height="8"
                    HorizontalAlignment="Center"
                    Margin="0"
                    VerticalAlignment="Center"
                    Data="M19.5,0 L27.5,0 L27.5,19.5 L47,19.5 L47,27.5 L27.5,27.5 L27.5,47 L19.5,47 L19.5,27.5 L0,27.5 L0,19.5 L19.5,19.5 z"
                    Fill="{StaticResource GridViewIndicatorsPartsFill}"
                    Stretch="Fill"
                    StrokeThickness="1"/>
                <Path
                    x:Name="minus"
                    Width="8"
                    Height="2"
                    HorizontalAlignment="Center"
                    Margin="0"
                    VerticalAlignment="Center"
                    Data="M0,0 L8,0 L8,47 L0,47 z"
                    Fill="{StaticResource GridViewIndicatorsPartsFill}"
                    Opacity="0"
                    RenderTransformOrigin="0.5,0.5"
                    Stretch="Fill"
                    StrokeThickness="1"/>
            </Grid>
        </Border>
    </ControlTemplate>
    <Style TargetType="controls:GridViewToggleButton">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="{StaticResource GridLinesFill}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="Template" Value="{StaticResource GridViewToggleButtonTemplate}"/>
    </Style>
</ResourceDictionary>

Greetings,
Stefan Dobrev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Sébastien ISINGRINI]

I try to use the style to change the appearance of the toggle button.
I changed the controlTemplate using "plus" and "minus" images insted of using path.

Even if I use and x:Key and then link it the ToggleButtonStyle property of my column, It does not seem to work : the plus and minus are always the same, the original ones.

Do you have an idea or can you provide a small full sample?

Thanks

[Stefan Dobrev]

Hi Sébastien,

We have introduced a regression issue and this style did not get applied in the latest version of the grid. This will be fixed for the next latest internal build.

All the best,
Stefan Dobrev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[saravanakumar subramaniam]

Hi,
I am using WPF 3.5, so i was not able to use the above sample code... Is there a way to get it through WPF 3.5?

[Ganesh Shivshankar]

Hi Stefan,

I'm on 2012.1.326.1040. Even now when I set the ToggleButtonStyle on the GridViewToggleRowDetailsColumn with my style, it still seems to use the inbuilt +/- icons.

Need help here.

Cheers.
Ganesh

[Vanya Pavlova]

Hi Ganesh,

 


Indeed GridViewToggleRowDetailsColumn use a GridViewToggleButton. I have prepared some sample demo using the mentioned version, which illustrates how to customize it and set it to the column using the ToggleButtonStyle property. Will you verify how this works for you?   

All the best,
Vanya Pavlova
the Telerik team

[Ganesh Shivshankar]

Thanks Vanya. I had missed out setting the PlusMinusTemplate to the changed control template as well. Setting that did the trick.