Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Expander > Drag expander on page

• sharp

  Posted on Jan 17, 2012 (permalink)

  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?

  Reply

• Kiril Stanoev Kiril Stanoev

  Posted on Jan 17, 2012 (permalink)

  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 >>

  Reply

• sharp

  Posted on Jan 18, 2012 (permalink)

  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.
  

  Reply

• Petar Mladenov Petar Mladenov

  Posted on Jan 20, 2012 (permalink)

  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 >>

  Attached files

  • ExpandelSample.zip

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Expander > Drag expander on page