Drag expander on page

[Artem]

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?

[Kiril Stanoev]

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

[Artem]

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.

[Petar Mladenov]

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