Template for GridViewToggleRowDetailsColumn

8 posts, 0 answers
  1. GEB
    GEB avatar
    228 posts
    Member since:
    Dec 2008

    Posted 11 Jan 2010 Link to this post

    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?

     

  2. Stefan Dobrev
    Admin
    Stefan Dobrev avatar
    790 posts

    Posted 14 Jan 2010 Link to this post

    Hi GEB,

    This column is using GridViewToggleButton control. You can find its style bellow:
    <ResourceDictionary
        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"
        <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.
  3. Sébastien ISINGRINI
    Sébastien ISINGRINI avatar
    9 posts
    Member since:
    Dec 2009

    Posted 08 Feb 2010 Link to this post

    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
  4. Stefan Dobrev
    Admin
    Stefan Dobrev avatar
    790 posts

    Posted 11 Feb 2010 Link to this post

    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.
  5. saravanakumar subramaniam
    saravanakumar subramaniam avatar
    28 posts
    Member since:
    May 2010

    Posted 25 May 2011 Link to this post

    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?
  6. Ganesh Shivshankar
    Ganesh Shivshankar avatar
    78 posts
    Member since:
    Sep 2009

    Posted 07 Aug 2012 Link to this post

    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
  7. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 07 Aug 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. Ganesh Shivshankar
    Ganesh Shivshankar avatar
    78 posts
    Member since:
    Sep 2009

    Posted 07 Aug 2012 Link to this post

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