GridView ControlPanelItem Content Positioning

6 posts, 1 answers
  1. Robert Peter
    Robert Peter avatar
    6 posts
    Member since:
    Jun 2014

    Posted 06 Aug 2014 Link to this post

    Hello everyone! How can I position the layout of controlpanelitem.content?
  2. Answer
    Boris
    Admin
    Boris avatar
    276 posts

    Posted 07 Aug 2014 Link to this post

    Hello Robert,

    A possible way to fulfill your goal is to modify the ControlPanelItem_DropDownButtonStyle of the ControlPanelItem and add the PopupPlacement states with the respective layout in a way similar to the default RadDropDownButton. This is needed because the drop down button within ControlPaneItem is a custom styled button with limited set of features with removed drop down position and drop down placement settings. In order to add them you can check the default template of RadDropDownButton and see the different VisualStateManager(VSM) states in common VSM groups that specify the pop up placement, as shown below:

    <VisualStateGroup x:Name="DropDownButtonPosition">
        <VisualState x:Name="DropDownButtonAtLeft">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Duration="0"           
                                                Storyboard.TargetName="DropDownIndicator"
                                                Storyboard.TargetProperty="(Grid.Column)">
                    <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                            <sys:Int32>0</sys:Int32>
                                </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Duration="0"
                                               Storyboard.TargetName="DropDownIndicator"
                                               Storyboard.TargetProperty="(Grid.Row)">
                    <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                            <sys:Int32>1</sys:Int32>
                                </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="DropDownButtonAtTop">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Duration="0"
                                               Storyboard.TargetName="DropDownIndicator"
                                               Storyboard.TargetProperty="(Grid.Column)">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                                <sys:Int32>1</sys:Int32>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Duration="0"
                                               Storyboard.TargetName="DropDownIndicator"
                                               Storyboard.TargetProperty="(Grid.Row)">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                                <sys:Int32>0</sys:Int32>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="DropDownButtonAtRight">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Duration="0"
                                               Storyboard.TargetName="DropDownIndicator"
                                               Storyboard.TargetProperty="(Grid.Column)">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <sys:Int32>2</sys:Int32>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Duration="0"
                                               Storyboard.TargetName="DropDownIndicator"
                                               Storyboard.TargetProperty="(Grid.Row)">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                                <sys:Int32>1</sys:Int32>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="DropDownButtonAtBottom">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Duration="0"
                                               Storyboard.TargetName="DropDownIndicator"
                                               Storyboard.TargetProperty="(Grid.Column)">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                                <sys:Int32>1</sys:Int32>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Duration="0"
                                               Storyboard.TargetName="DropDownIndicator"
                                               Storyboard.TargetProperty="(Grid.Row)">
                    <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                    <sys:Int32>2</sys:Int32>
                            </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
    <VisualStateGroup x:Name="PopupPlacementState">
        <VisualState x:Name="PlacementBottom" />
        <VisualState x:Name="PlacementTop">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Duration="0"
                                               Storyboard.TargetName="DropDownIndicator"
                                               Storyboard.TargetProperty="RenderTransform">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <TransformGroup>
                                <RotateTransform Angle="180" />
                            </TransformGroup>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="PlacementLeft">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Duration="0"
                                               Storyboard.TargetName="DropDownIndicator"
                                               Storyboard.TargetProperty="RenderTransform">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <TransformGroup>
                                <RotateTransform Angle="90" />
                            </TransformGroup>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="PlacementRight">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Duration="0"
                                               Storyboard.TargetName="DropDownIndicator"
                                               Storyboard.TargetProperty="RenderTransform">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <TransformGroup>
                                <RotateTransform Angle="-90" />
                            </TransformGroup>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>

    I hope this helps.

    Regards,
    Boris Penev
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. Robert Peter
    Robert Peter avatar
    6 posts
    Member since:
    Jun 2014

    Posted 19 Aug 2014 in reply to Boris Link to this post

    Thanks! Is there a simplified way to do that?
  4. Boris
    Admin
    Boris avatar
    276 posts

    Posted 20 Aug 2014 Link to this post

    Hello Robert,

    For the time being this is the only way.

    Regards,
    Boris Penev
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  5. Senthil kumar
    Senthil kumar avatar
    21 posts
    Member since:
    Sep 2013

    Posted 08 Sep 2014 in reply to Boris Link to this post

    Hello Boris,
    could you provide detailed code of implementation with example project?
    it would be useful for us.
  6. Boris
    Admin
    Boris avatar
    276 posts

    Posted 11 Sep 2014 Link to this post

    Hello Senthil kumar,

    I attached a sample project that demonstrates the suggested approach from my previous reply. In it I edited the ControlTemplate located in the Template property of the style with x:Key="ControlPanelItem_DropDownButtonStyle" (Themes/Telerik.Windows.Controls.GridView.xaml). I have commented out the some of the lines of code and set the DropDownPlacement property of RadDropDownButton with x:Name="PART_ControlPanelItemControlDropDownButton" to "Left".

    By clicking the button you will notice that the position of the popup of the DropDownButton has changed. In addition you might notice that the DropDownButtonPosition arrow is missing. To add it you can uncomment the Grid element with x:Name="DropDownIndicator"

    Please note that by setting the DropDownPlacement property of RadDropDownButton to "Left" you will affect to where the arrow is pointing.

    For more information about control panel and implicit styles, you can check these articles:
    1. Control Panel.
    2. Setting a Theme (Using Implicit Styles).
    3. Editing Control Templates

    I hope this helps.

    Regards,
    Boris Penev
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
Back to Top