This is a migrated thread and some comments may be shown as answers.

GridView ControlPanelItem Content Positioning

5 Answers 121 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Robert Peter
Top achievements
Rank 1
Robert Peter asked on 06 Aug 2014, 03:43 PM
Hello everyone! How can I position the layout of controlpanelitem.content?

5 Answers, 1 is accepted

Sort by
0
Accepted
Boris
Telerik team
answered on 07 Aug 2014, 02:10 PM
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.
 
0
Robert Peter
Top achievements
Rank 1
answered on 20 Aug 2014, 02:28 AM
Thanks! Is there a simplified way to do that?
0
Boris
Telerik team
answered on 20 Aug 2014, 03:33 PM
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.
 
0
Senthil kumar
Top achievements
Rank 1
answered on 09 Sep 2014, 04:41 AM
Hello Boris,
could you provide detailed code of implementation with example project?
it would be useful for us.
0
Boris
Telerik team
answered on 11 Sep 2014, 03:29 PM
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.
 
Tags
GridView
Asked by
Robert Peter
Top achievements
Rank 1
Answers by
Boris
Telerik team
Robert Peter
Top achievements
Rank 1
Senthil kumar
Top achievements
Rank 1
Share this question
or