Popup within canvas, not moving when rectangle moves

Hi ,

I created a rectangle that is movebale based on this http://65.55.11.235/en-us/library/cc189066(VS.95).aspx . It works perfectly with no problems. On the same page I have a popup that I want to incorporate as part of the rectangle. So when I move the popup it moves around the screen , just like the rectangle. How do I get the popup to be incorporated as part of the rectangle so I can move it around the screen just like the rectangle does currently, or if I remove the rectangle how can I use the code that allows the rectangle to be moved to be incorporated as part of the popup??

Thanks as always,
LVL 1
SeosaimhAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SeosaimhAuthor Commented:
Hi,

Is anybody able to help here?
0
mikebirtCommented:
Hi,

You could make the MS provided code a base class, then inherit that into any other control you want to be able to drag around.

i've done a code sample to illustrate this. there are several files, each very small. MoverBase is the (almost) original code from MS site.  then there's UserControl 1 and 2, which both inherit from MoverBase. Finally there is a window class which instantiates 1 each of the user controls and add's them to it's canvas.

There is no code other than the default in the 2 user controls other than changing the UserControl class name to MoverBase - changing it's base class. In order for it to work you must have the correct namespaces in your user control xaml files to inherit from the MoverBase class. see the line xmlns:local="clr-namespace:WpfApplication1". This is the default namesapce, you may well need to change that to fit the namesapce you're working in.

HTH

Mike
// the Mover base class
 public class MoverBase : UserControl
    {
        private bool isMouseCaptured;
        private double mouseVerticalPosition;
        private double mouseHorizontalPosition;

        public MoverBase()
        {
            this.MouseDown += new System.Windows.Input.MouseButtonEventHandler(Handle_MouseDown);
            this.MouseMove += new System.Windows.Input.MouseEventHandler(Handle_MouseMove);
            this.MouseUp += new System.Windows.Input.MouseButtonEventHandler(Handle_MouseUp);
        }

        public void Handle_MouseDown(object sender, MouseEventArgs args)
        {
            UserControl item = sender as UserControl;
            mouseVerticalPosition = args.GetPosition(null).Y;
            mouseHorizontalPosition = args.GetPosition(null).X;
            isMouseCaptured = true;
            item.CaptureMouse();
        }
        public void Handle_MouseMove(object sender, MouseEventArgs args)
        {
            UserControl item = sender as UserControl;
            if (isMouseCaptured)
            {
                // Calculate the current position of the object.
                double deltaV = args.GetPosition(null).Y - mouseVerticalPosition;
                double deltaH = args.GetPosition(null).X - mouseHorizontalPosition;

                double newTop = deltaV + (double)Canvas.GetTop(item);
                double newLeft = deltaH + (double)Canvas.GetLeft(item);

                Canvas.SetTop(item, newTop);
                Canvas.SetLeft(item, newLeft);

                // Update position global variables.
                mouseVerticalPosition = args.GetPosition(null).Y;
                mouseHorizontalPosition = args.GetPosition(null).X;
            }
        }
        public void Handle_MouseUp(object sender, MouseEventArgs args)
        {
            UserControl item = sender as UserControl;
            isMouseCaptured = false;
            item.ReleaseMouseCapture();
            mouseVerticalPosition = -1;
            mouseHorizontalPosition = -1;
        }
    }


// UserControl Xaml
<local:MoverBase x:Class="WpfApplication1.UserControl1"
    xmlns:local="clr-namespace:WpfApplication1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="40" Width="40">
    <Grid Background="Yellow">
            
    </Grid>
</local:MoverBase>

// User control 2 Xaml
<local:MoverBase x:Class="WpfApplication1.UserControl2"
    xmlns:local="clr-namespace:WpfApplication1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="25" Width="25">
    <Grid Background="Blue">
            
    </Grid>
</local:MoverBase>


// window xaml
<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Canvas x:Name="MyCanvas" Height="300" Width="300">
        
    </Canvas>
</Window>

// window c#
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();

            UserControl1 uc1 = new UserControl1();
            UserControl2 uc2 = new UserControl2();

            this.MyCanvas.Children.Add(uc1);
            this.MyCanvas.Children.Add(uc2);

            Canvas.SetTop(uc1, 10);
            Canvas.SetLeft(uc1, 10);

            Canvas.SetTop(uc2, 10);
            Canvas.SetLeft(uc2, 10);
        }
    }

Open in new window

0
SeosaimhAuthor Commented:
Hi,

Thanks for your mail, and I was wondering could you advise further as I don't quite follow certain aspects of what you have mentioned.

On the below XAMLs are you suggesting I create these three, as seperate files or within one file? These go at the top of the XAML file as usual?? If you could advise I could probably have this resolved , thanks..

// UserControl Xaml
<local:MoverBase x:Class="WpfApplication1.UserControl1"
    xmlns:local="clr-namespace:WpfApplication1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="40" Width="40">
    <Grid Background="Yellow">
             
    </Grid>
</local:MoverBase>
 
// User control 2 Xaml
<local:MoverBase x:Class="WpfApplication1.UserControl2"
    xmlns:local="clr-namespace:WpfApplication1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="25" Width="25">
    <Grid Background="Blue">
             
    </Grid>
</local:MoverBase>
 
 
// window xaml
<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Canvas x:Name="MyCanvas" Height="300" Width="300">
         
    </Canvas>
</Window>
0
10 Tips to Protect Your Business from Ransomware

Did you know that ransomware is the most widespread, destructive malware in the world today? It accounts for 39% of all security breaches, with ransomware gangsters projected to make $11.5B in profits from online extortion by 2019.

mikebirtCommented:
Hi,

To get my sample working; create a user control, called UserControl1. Then create a second, called UserControl2. in each of their c# files, change the base class from UserControl to MoverBase. Then, in their xaml files, overwrite with the xaml i've provided. In the Window xaml (you would have one already if you've created a WPF application), use the xaml i've provided.

HTH

Mike
0
SeosaimhAuthor Commented:
Mike,

I am developing a Silverlight application, not a WPF one. I already have one popup screen created, that is all that is required to move around. Why do I need a second xaml file to ge this working, is it for the popup I have created to sit on to be moved around? sorry first time I am doing this so trying to understand further..

Thanks,

Seosaimh
0
mikebirtCommented:
Hi,

the code i provided was to illustrate how you can reuse the code (provided by MS to allow elements to be moved), and incorporate it into anything else. If you have a pop up control, try inheriting from the MoverBase class instead of UserControl and you should be able to move that aswell.

Your question was how to incorporate the 'moving code' into your pop, if you remove the rectangle. the answer is by inheriting from the moverBase class i created from the example you supplied from MS.

HTH

Mike
0
SeosaimhAuthor Commented:
Mike ,

Great - that helps a lot, let me try it out now and come back in a bit..

Seosaimh
0
SeosaimhAuthor Commented:
Ok,

I am looking to change things around here, should I remove the  below ( this is the popup xaml page)

<UserControl x:Class="BlendForSilverlight.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Width="640" Height="480" xmlns:BlendForSilverlight="clr-namespace:BlendForSilverlight"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

and replace with

<local:MoverBase x:Class="WpfApplication1.UserControl1"
    xmlns:local="clr-namespace:WpfApplication1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="40" Width="40">
    <Grid Background="Yellow">
             
    </Grid>
</local:MoverBase>

Sorry I am getting myself more confused here exactly where to put the code..

0
mikebirtCommented:
Hi,

Is Page your pop up class which you want to be able to move around? if so;

Firstly, you need to get the namespace where you're put the MoverBase class. to do that, put a new line where the 'xmlns' lines are, type xmlns:local= and you should get a drop down to select from . scroll through and select the corerct namespace where you've put the MoverBase class.

once you've done that, you can change the base class in the Xaml from UserControl to local:MoverBase.

You add namespaces in this way by declaring an XMLNS for them, and Xml NameSpace, the right part, after ':' is how you'll refer to that namespace, hence you've delcared xmlns:local and you can then references classes in there using local:

HTH

Mike
0
SeosaimhAuthor Commented:
I have put this in now

<UserControl x:Class="BlendForSilverlight.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Width="640" Height="480" xmlns:BlendForSilverlight="clr-namespace:BlendForSilverlight"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
      xmlns:local="clr-namespace:BlendForSilverlight">

When you mention the base class, is it the xxx.xaml.VB I should be changing??


0
mikebirtCommented:
Hi,

to change base class you need to change the xaml and it's associated code too. in the Xaml, change UserControl (the first and last tag in the xaml), to local:MoverBase. in the Code, your class called Page will currently inherit from UserControl, change that to MoverBase too. then you should be good to go.

HTH

Mike
0
SeosaimhAuthor Commented:
Ok,

Did  the first bit as suggested above and it is ok except for <UserControl.Resources>


<local:Page x:Class="BlendForSilverlight.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Width="640" Height="480" xmlns:BlendForSilverlight="clr-namespace:BlendForSilverlight"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
      xmlns:local="clr-namespace:BlendForSilverlight">
      
    Look at the three lines below, on the second line I get the error " an item with the same key has already been added", Looking through the code I cannot see anything obvious, any ideas?

      <UserControl.Resources>
        <BlendForSilverlight:ChatSession x:Key="ChatSessionDS" d:IsDataSource="True" />  
    </UserControl.Resources>
0
mikebirtCommented:
Hi,

firstly, the first line you've shown here;

<local:Page x:Class="BlendForSilverlight.Page"

says your class Page is inheriting from Page. i don't think this will be right. Have you named the MoverBase as i illustrated? if so, you need to change local:Page to local:MoverBase.

Ok, so your question, UserControl.Resources is now not available as you're not in UserControl anymore. try changing it to (and here i'm assuming you've changed local:Page to local:MoverBase)

<local:MoverBase.Resources>        
<BlendForSilverlight:ChatSession x:Key="ChatSessionDS" d:IsDataSource="True" />  
</local:MoverBase.Resources>
0
mikebirtCommented:
i accidently subtmitted whilst responding, i didn't get to type:

HTH

Mike
0
SeosaimhAuthor Commented:
Thanks for your help as always:

Ok in the class I have this declared

Partial Public Class MoverBase
    Inherits Moverbase
    Private cs As ChatSession
    Dim isMouseCaptured As Boolean
    Dim mouseVerticalPosition As Double
    Dim mouseHorizontalPosition As Double

Getting the error message " the name MoverBase does not exist in the name space "clr-namespace:BlendForSilverlight" in the xaml file, which is as below:

<local:MoverBase x:Class="BlendForSilverlight.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Width="640" Height="480" xmlns:BlendForSilverlight="clr-namespace:BlendForSilverlight"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
      xmlns:local="clr-namespace:BlendForSilverlight">
      
   
      <local:MoverBase.Resources>
        <BlendForSilverlight:ChatSession x:Key="ChatSessionDS" d:IsDataSource="True" />
   </local:MoverBase.Resources>
0
mikebirtCommented:
Hi,

ok, so what namespace have you declared the class MoverBase in? change it's namespace to BlendForSilverlight and it'll be happy.

HTH

Mike
0
SeosaimhAuthor Commented:
Is it not already done here?
0
SeosaimhAuthor Commented:
at this point xmlns:local="clr-namespace:BlendForSilverlight"> ???
0
mikebirtCommented:
hi,

i'm refering to the code declaration fo the MoverBase class, not in the xaml. the xaml in your last post looked correct to me. However, the MoverBase class (the code), isn't declared in the Namespace BlendForSilverlight.

HTH

Mike
0
SeosaimhAuthor Commented:
Am I doing something daft here, where exactly in the below code for the class am I doing it wrong, as this is just baffling me now:

Public Class MoverBase
    Inherits UserControl
    Private cs As ChatSession
    Dim isMouseCaptured As Boolean
    Dim mouseVerticalPosition As Double
    Dim mouseHorizontalPosition As Double



    Public Sub New()
        ' Required to initialize variables
        InitializeComponent()
        cs = TryCast(Resources("ChatSessionDS"), ChatSession)
        cs.ConnectWithRemoteUser("ProductFul Support")


        AddHandler SendButton.Click, AddressOf SendButton_Click
        AddHandler Input.KeyDown, AddressOf Onreturnhit_click
        AddHandler Me.MouseLeftButtonDown, AddressOf Handle_MouseDown
        AddHandler Me.MouseMove, AddressOf Handle_MouseMove
        AddHandler Me.MouseLeftButtonUp, AddressOf Handle_MouseUp

    End Sub

    Private Property DialogResult As Boolean

    Private Property Window As Object

    Private Shared Property isopen As Boolean

    Private Property WindowState As Object
0
mikebirtCommented:
Hi,

yes, you seem to be merging your Page and the MoverBase into one class. You should create a class, called MoverBase, which inherits from UserControl. that should have the code i provided to handle the mouse events - from MS. Then you should have your original Page class, but instead of Page inheriting from UserControl, it should inherit from MoverBase.

the code you've posted looks like a bit of a mash up, i've assumed it's attempting to be one class?

HTH

Mike
0
SeosaimhAuthor Commented:
Hi,

Yes sorry if it is getting confusing. I have basically a popup, and as you know it is to be moved around. So it already has a class setup for it. I was trying to add your code to it as the events that happen based on the moving of the popup should also be in this class, should I still proceed based on what you stated above?

Seosaimh
0
SeosaimhAuthor Commented:
Here is the moverbase class as it stands , there is some additional stuff in and that relates to the popup, but this should not impact what we are trying to acheive?

Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Browser


Partial Public Class MoverBase
    Inherits UserControl
    Private cs As ChatSession
    Dim isMouseCaptured As Boolean
    Dim mouseVerticalPosition As Double
    Dim mouseHorizontalPosition As Double
   

    Public Sub New()
        ' Required to initialize variables
        InitializeComponent()
        cs = TryCast(Resources("ChatSessionDS"), ChatSession)
        cs.ConnectWithRemoteUser("ProductFul Support")


        AddHandler SendButton.Click, AddressOf SendButton_Click
        AddHandler Input.KeyDown, AddressOf Onreturnhit_click
        AddHandler Me.MouseLeftButtonDown, AddressOf Handle_MouseDown
        AddHandler Me.MouseMove, AddressOf Handle_MouseMove
        AddHandler Me.MouseLeftButtonUp, AddressOf Handle_MouseUp

    End Sub

    Private Property DialogResult As Boolean

    Private Property Window As Object

    Private Shared Property isopen As Boolean

    Private Property WindowState As Object



    Private Sub SendButton_Click(ByVal sender As Object, _
                                 ByVal e As RoutedEventArgs)
        cs.SendMessage(Input.Text)
        Input.Text = String.Empty
    End Sub
    Private Sub Onreturnhit_click(ByVal sender As Object, _
                                ByVal e As RoutedEventArgs)

        cs.SendMessage(Input.Text)
        Input.Text = String.Empty

    End Sub

    Private Sub Button_Click(ByVal sender As System.Object, ByVal e As RoutedEventArgs)


        Me.Visibility = Windows.Visibility.Collapsed


    End Sub

    Public Sub Handle_MouseDown(ByVal sender As Object, ByVal args As MouseEventArgs)
        Dim item As UserControl = TryCast(sender, UserControl)
        mouseVerticalPosition = args.GetPosition(Nothing).Y
        mouseHorizontalPosition = args.GetPosition(Nothing).X
        isMouseCaptured = True
        item.CaptureMouse()
    End Sub


    Public Sub Handle_MouseMove(ByVal sender As Object, ByVal args As MouseEventArgs)
        Dim item As UserControl = TryCast(sender, UserControl)
        If isMouseCaptured Then
            ' Calculate the current position of the object.
            Dim deltaV As Double = args.GetPosition(Nothing).Y - mouseVerticalPosition
            Dim deltaH As Double = args.GetPosition(Nothing).X - mouseHorizontalPosition

            Dim newTop As Double = deltaV + CDbl(Canvas.GetTop(item))
            Dim newLeft As Double = deltaH + CDbl(Canvas.GetLeft(item))

            Canvas.SetTop(item, newTop)
            Canvas.SetLeft(item, newLeft)

            ' Update position global variables.
            mouseVerticalPosition = args.GetPosition(Nothing).Y
            mouseHorizontalPosition = args.GetPosition(Nothing).X
        End If
    End Sub

    Public Sub Handle_MouseUp(ByVal sender As Object, ByVal args As MouseEventArgs)
        Dim item As UserControl = TryCast(sender, UserControl)
        isMouseCaptured = False
        item.ReleaseMouseCapture()
        mouseVerticalPosition = -1
        mouseHorizontalPosition = -1
    End Sub


End Class
0
mikebirtCommented:
Hi,

no, the point of making the MoverBase class is that you can then inherit that class into all your other classes that need the moving functionality. If you return to your original popup class all you need to do is change it's base class from UserControl to MoverBase.

HTH

Mike
0
SeosaimhAuthor Commented:
sorry the above is my popup.

this is what is confusing me

"change it's base class from UserControl to MoverBase" , where exactly and on what line do I do this as this is probably what is throwing me.

Just so we are clear

(A) Should I put the code in the class that manages the popup when it is opened

or

(B) Put the code in the class that opens the popup?
0
mikebirtCommented:
Hi,

So you've now called your pop up class 'MoverBase'? is that correct? this would be why we're having crossed wires i'd guess. I think you should rename that popup class to PopUp, so that's clearly named. THen create a new class (not a user contorl or anything, just a class) and call that MoverBase. Make it inherit from UserControl.

the pop up class above (called MoverBase) should then inherit from MoverBase, not UserControl. Then you can remove all the mouse handling code from the Pop up, and it'll all be in a re=useable place.

HTH

Mike
0
SeosaimhAuthor Commented:
Can you look at the below:

 Public Sub New()
        InitializeComponent()
        AddHandler Me.MouseLeftButtonDown, AddressOf Handle_MouseDown
        AddHandler Me.MouseMove, AddressOf Handle_MouseMove
        AddHandler Me.MouseLeftButtonUp, AddressOf Handle_MouseUp
    End Sub

I keep getting the error message "MouseLeftButtonDown" is not an event of "BlendforSilverlight.moverbase"

same for Me.MouseMove & Me.MouseLeftButtonUp

nearly there but until I iron out these code problems cannot test it..
0
SeosaimhAuthor Commented:
Ok down to one error namely

Error      1      Base class 'PopUp' specified for class 'MoverBase' cannot be different from the base class 'System.Windows.Controls.UserControl' of one of its other partial types.      and it is showing up in chatsupport.g.vb      

This is in Chatsupport.g.vb file

Can't explain how the others disappeared..
0
mikebirtCommented:
Hi,

you have MoverBase and PopUp the wrong way around. PopUp inherits from MoverBase, MoverBase inherits from UserControl. Remember, in PopUp, the base class is in the code (inherits MoverBase) and in the Xaml (<local:MoverBase ...).

i think we're nearly there!

HTH

Mike
0
SeosaimhAuthor Commented:
onto Xaml, think code behind ok, but won't count the chickens..

See below

<local:MoverBase  x:Class="BlendForSilverlight.Popup"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Width="640" Height="480" xmlns:BlendForSilverlight="clr-namespace:BlendForSilverlight"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
      xmlns:local="clr-namespace:BlendForSilverlight">

this bit is throwing up an error "Cannot create an instance of "Moverbase". Why is this suddenly happening?
0
mikebirtCommented:
Hi,

there are a number of reasons why it might be failing to create an instance of MoverBase; it could be declared as static or abstract or it may not have a parameterless public constructor defined. But this is a good error, it's trying to create an instance of the base class for your pop up, finishing line in sight!

HTH

Mike
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SeosaimhAuthor Commented:
Hi this got resolved in the end. I had a friend who also looked at it. He said I had a popup, but when moving the screen, I was coding for a window, hence there was a mismatch in the code. I will award the points though as the person who responded was helpful and patient.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Microsoft Development

From novice to tech pro — start learning today.