Dragging panels?

05 Oct 2013, 14:55

How would you go about moving an entire panel, such as a dock panel that is the root element?

I noticed several examples where there is a canvas element, and you can use SetTop and other methods. But I don't see anything for a DockPanel. I tried using SetTransform, but that didn't appear to change screen position.

Ultimately, I'm trying to drag the panel around. I'm trying to do this via code behind, in C#. I can detect mouse/down and in my Update statement I'd like to translate the panel based on mouse position.

Thanks!

05 Oct 2013, 17:39

Hi,

To move an element respect to the parent container you should use the RenderTransform property. For example:

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <DockPanel x:Name="MovingPanel">
        <DockPanel.RenderTransform>
            <TranslateTransform X="0" Y="0"/>
        </DockPanel.RenderTransform>
        <!-- Panel contents -->
    </DockPanel>

</Grid>

Then you can get a reference to that panel during start up as usual:

NoesisGUIPanel gui = GetComponent<NoesisGUIPanel>();
FrameworkElement root = gui.GetRoot<FrameworkElement>();
this._movingPanel = root.FindName<DockPanel>("MovingPanel");

And get the render transform to update it later on mouse events:

this._movingPanelTransform =
    this._movingPanel.GetRenderTransform().As<TranslateTransform>();

To update transform you just set the X and Y properties of the TranslateTransform:

this._movingPanelTransform.SetX(newPosition.x);
this._movingPanelTransform.SetY(newPosition.y);

And that's all

05 Oct 2013, 22:37

That worked beautifully!

One thing that threw me off was...you HAVE to define the RenderTransform and TranslateTransform in your XAML, otherwise it shows the TranslateTransform as null in your script. I guess I forgot this about XAML. I would have expected it to exist regardless.

07 Oct 2013, 14:10

The default value for UIElement.RenderTransform property is the Identity transform. User can override that value with any transform he needs: TranslateTransform, ScaleTransform, RotateTransform, SkewTransform, or TransformGroup (that could contain a list of transforms).

Dragging panels?

Dragging panels?

Re: Dragging panels?

Re: Dragging panels?

Re: Dragging panels?

Who is online