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

Drag expander on page

3 Answers 51 Views
Expander
This is a migrated thread and some comments may be shown as answers.
Artem
Top achievements
Rank 1
Artem asked on 17 Jan 2012, 11:21 AM
I have expander. when Page load it placed on top page. But when they expanded I want drag it to right page side.
How can I do this without using RadDocing?

3 Answers, 1 is accepted

Sort by
0
Kiril Stanoev
Telerik team
answered on 17 Jan 2012, 01:17 PM
Hi Sharp,

Currently this functionality is not supported out of the box. What you can try and do is after the expander has expanded, set HorizontalAlignment to Right and ExpandDirection to Left. Let me know how it goes.

All the best,
Kiril Stanoev
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Artem
Top achievements
Rank 1
answered on 18 Jan 2012, 07:33 AM
I'm tryng using
MouseDragElementBehavior
from this post
http://kiwigis.blogspot.com/2011/08/how-to-add-mouse-drag-behavior-in.html
but not working
I know, I can do like you sad(set HorizontalAlignment to Right and ExpandDirection to Left) but user must drag this control.
If I can't do this with this control can I do this with other control? I try use RadDocing bbut when tab unpined they place panel, My client dont want see this panel. they want see page and only one shortcut without panel for this element.
0
Petar Mladenov
Telerik team
answered on 20 Jan 2012, 03:29 PM
Hi Sharp,

 I prepared a project for you that meets your requirement and it uses the Telerik's DragDropManager.
In order to allow the drag and drop operation you have to set:
1) AllowDrag on the Expander

<telerik:RadExpander x:Name="expander"
                           Width="200"
                           Height="500"
                        2)   Background="LightBlue"
                           HorizontalAlignment="Left"
                           VerticalAlignment="Top"
                           telerik:DragDropManager.AllowDrag="True"
2) AllowDrag on the Expander's Header by editing the default Template:
<Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="col0" Width="Auto"/>
                            <ColumnDefinition x:Name="col1" Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition x:Name="row0" Height="Auto"/>
                            <RowDefinition x:Name="row1" Height="Auto"/>
                        </Grid.RowDefinitions>
                        <telerik:RadToggleButton x:Name="HeaderButton" telerik:DragDropManager.AllowDrag="True" Background="Transparent" ClickMode="{TemplateBinding ClickMode}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalHeaderAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalHeaderAlignment}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" TabIndex="{TemplateBinding TabIndex}" Template="{StaticResource ToggleTemplate}" VerticalAlignment="{TemplateBinding VerticalHeaderAlignment}" VerticalContentAlignment="{TemplateBinding VerticalHeaderAlignment}">
                            <Grid x:Name="HeaderPanel" Background="Transparent">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
3)AllowDrop on the Container that hold the Expander:
<Grid x:Name="LayoutRoot" Background="White" AllowDrop="True">
 
       <telerik:RadExpander x:Name="expander"
                            Width="200"
                            Height="500"
4)And you also need to set up the DragInitialize and Drop events, for example like so:
public MainPage()
       {
           InitializeComponent();
           DragDropManager.AddDragInitializeHandler(this.expander, new DragInitializeEventHandler(OnDragInitialized),true); 
           DragDropManager.AddDropHandler(this.LayoutRoot, OnElementDrop, true);
       }
 
       private void OnDragInitialized(object sender, DragInitializeEventArgs e)
       {
           e.DragVisual = new RadExpander() { Header = this.expander.Header.ToString() };
           e.AllowedEffects = DragDropEffects.All;
       }
 
       private void OnElementDrop(object sender, Telerik.Windows.DragDrop.DragEventArgs e)
       {
           Point dropPoint = e.GetPosition(this.LayoutRoot);
           if (dropPoint.X > this.LayoutRoot.ActualWidth / 2)
           {
               this.expander.HorizontalAlignment = HorizontalAlignment.Right;
           }
           else
           {
               this.expander.HorizontalAlignment = HorizontalAlignment.Left;
           }
       }
The described approach is realized in the attached solution. Please check it out and let us know how it goes.

Kind regards,
Petar Mladenov
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
Expander
Asked by
Artem
Top achievements
Rank 1
Answers by
Kiril Stanoev
Telerik team
Artem
Top achievements
Rank 1
Petar Mladenov
Telerik team
Share this question
or