Hi, how can i implement one Draggable window, one that  i can put inside it all the controls i want like a normal page, and then have multiple windows on my application.

 For example, i m trying to make this, by makin a user control, with only a white rectangle, so i add the user control to my parent page, but i can't implement the drag and drop. Do i have to implemant it on my user control xaml, or in the applications when i call my user control? 

 is it possible to have a datagrid in this user control and drag it around the browser?

 Thanks in advance

Rui Marinho

Here is a DragDropPanel I use. You can put any control into this Panel so it will become Draggable. Remember to put the DragDropPanel in a Canvas.

 public class DragDropPanel : Canvas
    {
        Point beginP;
        Point currentP;
        bool dragOn = false;
        public DragDropPanel() : base()
        {
            this.MouseLeftButtonDown += new MouseButtonEventHandler(DragDropPanel_MouseLeftButtonDown);
            this.MouseLeftButtonUp += new MouseButtonEventHandler(DragDropPanel_MouseLeftButtonUp);
            this.MouseMove += new MouseEventHandler(DragDropPanel_MouseMove);
            this.Cursor = Cursors.Hand;
        }

        void DragDropPanel_MouseMove(object sender, MouseEventArgs e)
        {
            if (dragOn)
            {
                currentP = e.GetPosition(null);
                double x0 = System.Convert.ToDouble(this.GetValue(Canvas.LeftProperty));
                double y0 = System.Convert.ToDouble(this.GetValue(Canvas.TopProperty));
                this.SetValue(Canvas.LeftProperty, x0 + currentP.X - beginP.X);
                this.SetValue(Canvas.TopProperty, y0 + currentP.Y - beginP.Y);
                beginP = currentP;
            }
        }

        void DragDropPanel_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (dragOn)
            {
                this.Opacity *= 2;
                this.ReleaseMouseCapture();
                dragOn = false;
            }
        }

        void DragDropPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            System.Windows.FrameworkElement c = sender as System.Windows.FrameworkElement;
            dragOn = true;
            beginP = e.GetPosition(null);
            c.Opacity *= 0.5;
            c.CaptureMouse();
        }        
    }

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Sorry , i understand the class, but i don't understand how i will use it in a user control. Because the class is

public class DragDropPanel : User control

Put the code I posted above into a DragDropPanel.cs into your project. No XAML is needed for that file. Then create a Silverlight UserControl called DraggableTest in your project. Put the following XAML into it. Change the name space for "controls" to the name space of your DraggablePanel object. Run it you can see it work. You can switch different content control in the DragDropPanel so they become draggable..
 

<UserControl x:Class="DraggbleTest"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:MySilverlight.Controls;assembly=MySilverlight.Controls"
    >

    <Grid x:Name="LayoutRoot" >
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Text="Fixed Text"></TextBlock>
        
        <Canvas Grid.RowSpan="2" Grid.Row="1">
            <controls:DragDropPanel>                                   
                <TextBlock Text="Draggable Text"></TextBlock>                                         
            </controls:DragDropPanel>
        </Canvas>
    </Grid>
</UserControl>

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

thanks, it works fine :)

Greetings

Rui

Hi sladapter,

Nice to share, works fine thanks :)

As you say the control must be in a Canvas, so to prevent missing that I think creating a style can be helpful. Canvas doesn't have a template property so I put the draggableControl in a ContenControl.

<Style TargetType="ContentControl" x:Key="DraggableContent">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ContentControl">
            <Canvas>
              <custom:DraggableCanvas>
                <ContentPresenter Content="{TemplateBinding Content}" />
              </custom:DraggableCanvas>
            </Canvas>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

You can put your ContentControl where you want, not necessary a canvas

<ContentControl Style="{StaticResource DraggableContent}">
     ...controls...
</ContentControl>:

desopedr
 

Ola Rui,

Can you tell me what you have done and what is the error ? Maybe could I help you.

Do you copy/paste my style and use it whitout changes ? Don't forget to change the following lines if you use the sladapter's original code and my style :

replace : 

<custom:DraggableCanvas>
      <ContentPresenter Content="{TemplateBinding Content}" />
</custom:DraggableCanvas>

by :

<controls:DragDropPanel>
      <ContentPresenter Content="{TemplateBinding Content}" />
</controls:DragDropPanel>

 

Hope this helps.

desopedr 

i changed the code so it fit my controls, but when i run it crash the browser, no error output :(

 I have put static resource in app.xaml.

 Then i trade the canvas that i add in my user control, for the contentcontrol with the style of app.xaml

 when runnig the ie dose't respond!

 Rui

 hmm you can download the source here, hope you could find the mistake comparing the code

I download the cod and it seems that the only difrence is that i m  using it in a user control, and adding it on the page.xaml from cs code. this is my user control that works

<UserControl x:Class="iffiretv.datagrid"

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:controls="clr-namespace:iffiretv"

>

<Grid x:Name="LayoutRoot" >

<Canvas>

<controls:DragDropPanel>

Height="400"

AutoGenerateColumns="True"

HeadersVisibility="Column"

RowBackground="Cornsilk"

AlternatingRowBackground="LemonChiffon"

RowHeight="30"

CanUserResizeColumns="True"

x:Name="dataGrid" />

</controls:DragDropPanel>

</Canvas>

</UserControl>

if i try with content panel like this

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:controls="clr-namespace:iffiretv"

>

<Grid x:Name="LayoutRoot" >

<ContentControl Style="{StaticResource DraggableContent}">

Height="400"

AutoGenerateColumns="True"

HeadersVisibility="Column"

RowBackground="Cornsilk"

AlternatingRowBackground="LemonChiffon"

RowHeight="30"

CanUserResizeColumns="True"

x:Name="dataGrid" />

</ContentControl>

</UserControl>

 it dosent work... it dosen't add the grid to the page.xaml

 i will look further to try solving it :)

but thanks for the help.

 Rui

it's working.. i just added assembly=iffiretv in the reference

 thanks :)

thais is great to put controls and windows.. i will now try to resize the controls when browser resize.. because if you drag on control and the resize the window it will be sometimes of the browser :/

 thanks for all the help..

Another question.

 I m trying to simulate some windows in my silverlight, so we can drag and drop.. inside the window i want to put one datagrid, but when i click the left button on the grid i don't want to move it, i just want to move when i click the control outside de grid.

 Well i m trying to get the framework element of the dragdroppanel class when we click the mouse left down, so i will test if it is a grid or not,  like this

 Rui,

Add a new line of code in the DragDropPanel_MouseLeftButtonDown function

void DragDropPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

    if (e.Handled == true)
                return;

  ...

}

In your DataGrid_MouseLeftButtonDown handle add another line:

 void DataGrid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

    // your code

    e.Handled = true;

} 

This way the mousedown event won't get bubbled up. 

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

 OK,  here I put up a Draggble Window Test page. You only can drag the window when mouse is on the TitleBar area. You can certainly warp this code to make a  DraggableWindow control.

 <UserControl x:Class="DraggbleTest"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:MySilverlight.Controls;assembly=MySilverlight.Controls"
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    >
    <Grid x:Name="LayoutRoot" Background="White">  

           
        <ContentControl x:Name="Popup" Style="{StaticResource DraggableConent}" >                
                <Grid Width="400" Height="400">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="25"/>                           
                        <RowDefinition/>
                    </Grid.RowDefinitions>                  
                    <Border Grid.Row="0" Grid.ColumnSpan="2" BorderThickness="1" BorderBrush="#ccc" Background="BlueViolet">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="25"/>
                            </Grid.ColumnDefinitions>                      
                            <TextBlock Margin="5 0 5 0" Foreground="White">Popup Window</TextBlock>
                            <Button x:Name="CloseButton" Grid.Column="1" Style="{StaticResource CloseButton}" Click="CloseButton_Click"/>                          
                        </Grid>
                    </Border>
                    <Border Grid.Row="1" BorderThickness="1" BorderBrush="#ccc" MouseLeftButtonDown="Border_MouseLeftButtonDown">
                        <data:DataGrid Grid.Row="1" x:Name="MyDataGrid" AutoGenerateColumns="True" HeadersVisibility="Column">                                                          
                        </data:DataGrid>
                    </Border>
                </Grid>       
        </ContentControl>
    </Grid>
</UserControl>

 Code Behind:

public partial class DraggbleTest: UserControl
    {
        public DraggbleTest()
        {
            InitializeComponent();           
        }
   
        private void Border_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            e.Handled = true;
        }

        private void CloseButton_Click(object sender, RoutedEventArgs e)
        {
            this.Popup.Visibility = Visibility.Collapsed;
        }
    }

CloseButton Style: Put it in App.xaml

<!-- CloseButton Style -->
        <Style x:Key="CloseButton" TargetType="Button">
            <Setter Property="Width" Value="25" />
            <Setter Property="Height" Value="25" />
            <Setter Property="HorizontalAlignment" Value="Right" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Width="22" Height="22" CornerRadius="15">
                            <TextBlock
                                Foreground="#222"
                                Text="r"
                                FontSize="11"
                                FontFamily="Webdings"
                                TextAlignment="Center"
                                VerticalAlignment="Center"
                            >                               
                            </TextBlock>
                            <Border.Background>
                                <RadialGradientBrush GradientOrigin="0.3, 0.3">
                                    <GradientStop Color="#fff" Offset="0.15"></GradientStop>
                                    <GradientStop Color="#777" Offset="1"></GradientStop>
                                </RadialGradientBrush>
                            </Border.Background>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

very nice slapadapter... just what i needed...

Can you give me an ideia how to make it resizble now?

Thanks

Rui

 You want to make it like a real window so user can resize it as they want? I do not have code for it. But I'll try.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

 OK, I got the resize working. Here is the code for Draggable window with Resize capability:

1)  Put the following code in DraggablePanel.cs to create a Draggable Panel. You can put any silverlight UIElement as content of this control to make it draggable. (No XAML file needed for this control).

    public class DraggablePanel : Grid
    {
        Point beginP;
        Point currentP;
        bool dragOn = false;
        string resize = "";
        #region CanResize

        /// <summary>
        /// Identifies the CanResize dependency property.
        /// </summary>
        public static readonly DependencyProperty CanResizeProperty = DependencyProperty.Register("CanResize", typeof(bool), typeof(DraggablePanel), null);

        /// <summary>
        /// Gets or sets the CanResize possible Value of the bool object.
        /// </summary>
        public bool CanResize
        {
            get { return (bool)GetValue(CanResizeProperty); }
            set { SetValue(CanResizeProperty, value); }
        }
        #endregion CanResize
               
        public DraggablePanel() : base()
        {       
            this.MouseLeftButtonDown += new MouseButtonEventHandler(DraggablePanel_MouseLeftButtonDown);
            this.MouseLeftButtonUp += new MouseButtonEventHandler(DraggablePanel_MouseLeftButtonUp);
            this.MouseMove += new MouseEventHandler(DraggablePanel_MouseMove);
            this.CanResize = true;
        }

        void DraggablePanel_MouseMove(object sender, MouseEventArgs e)
        {
            currentP = e.GetPosition(null);
            if (dragOn)
            {
                double x0 = System.Convert.ToDouble(this.GetValue(Canvas.LeftProperty));
                double y0 = System.Convert.ToDouble(this.GetValue(Canvas.TopProperty));
                if (resize == "")
                {
                    this.SetValue(Canvas.LeftProperty, x0 + currentP.X - beginP.X);
                    this.SetValue(Canvas.TopProperty, y0 + currentP.Y - beginP.Y);
                }
                else
                {
                    UIElement c = this.Children[0];
                    if (resize.IndexOf("n") > -1) //north
                    {
                        this.SetValue(Canvas.TopProperty, y0 + currentP.Y - beginP.Y);
                        this.Height = this.ActualHeight - (currentP.Y - beginP.Y);
                    }
                    if (resize.IndexOf("s") > -1) //south
                    {
                        this.Height = this.ActualHeight + (currentP.Y - beginP.Y);
                    }
                    if (resize.IndexOf("w") > -1) //w
                    {
                        this.SetValue(Canvas.LeftProperty, x0 + currentP.X - beginP.X);
                        this.Width = this.ActualWidth - (currentP.X - beginP.X);
                    }
                    if (resize.IndexOf("e") > -1) //south
                    {
                        this.Width = this.ActualWidth + (currentP.X - beginP.X);
                    }
                }
                beginP = currentP;
            }
            if (this.CanResize)
            {
                double x0 = currentP.X;
                double y0 = currentP.Y;
                Point P = GetElementPosition(this);
                double x1 = P.X;
                double y1 = P.Y;           
                double x2 = x1 + this.ActualWidth;
                double y2 = y1 + this.ActualHeight;

                if (Math.Abs(x0 - x1) < 6 && Math.Abs(y0 - y1) < 6)
                    resize = "nw";
                else if (Math.Abs(x0 - x1) < 6 && Math.Abs(y2 - y0) < 6)
                    resize = "sw";
                else if (Math.Abs(x2 - x0) < 6 && Math.Abs(y2 - y0) < 6)
                    resize = "se";
                else if (Math.Abs(x2 - x0) < 6 && Math.Abs(y0 - y1) < 6)
                    resize = "ne";
                if (Math.Abs(y0 - y1) < 4)
                    resize = "n";
                else if (Math.Abs(x2 - x0) < 4)
                    resize = "e";
                else if (Math.Abs(y2 - y0) < 4)
                    resize = "s";
                else if (Math.Abs(x0 - x1) < 4)
                    resize = "w";
                else
                {
                    resize = "";
                    Cursor = Cursors.Arrow;
                }
                if (resize.IndexOf("n") > -1 || resize.IndexOf("s")>-1)
                    Cursor = Cursors.SizeNS;
                else if (resize.IndexOf("w") > -1 || resize.IndexOf("e") > -1)
                    Cursor = Cursors.SizeWE;                   
            }           
        }

        private Point GetElementPosition(UIElement e)
        {
            GeneralTransform gt = e.TransformToVisual(Application.Current.RootVisual as UIElement);           
            return gt.Transform(new Point(0, 0));
        }

        void DraggablePanel_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (dragOn)
            {
                this.Opacity = 1;
                this.ReleaseMouseCapture();
                dragOn = false;
            }
        }

        void DraggablePanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (e.Handled)
                return;
            dragOn = true;
            beginP = e.GetPosition(null);
            this.Opacity *= 0.8;
            this.CaptureMouse();
        }       
    }

2) Add the following Style to App.xaml file. Thank desopedr for this suggestion!

<Style TargetType="ContentControl" x:Key="DragAndResize">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ContentControl">
                        <Canvas>
                            <controls:DraggablePanel CanResize="True" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                                <ContentPresenter Content="{TemplateBinding Content}" />
                            </controls:DraggablePanel>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
 </Style>

3) Put the following code into PupupWindow.cs to Make a PopupWindow custom control (no PopupWindow.XAML needed).

public class PopupWindow : ContentControl
    {       
        protected Button _CloseButton;
        protected Border _ContentContainer;

        #region Title

        /// <summary>
        /// Identifies the Title dependency property.
        /// </summary>
        public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title", typeof(string), typeof(PopupWindow), null);

        /// <summary>
        /// Gets or sets the Title possible Value of the string object.
        /// </summary>
        public string Title
        {
            get { return (string)GetValue(TitleProperty); }
            set { SetValue(TitleProperty, value); }
        }
       
        #endregion Title

        #region TitleBackground

        /// <summary>
        /// Identifies the TitleBackground dependency property.
        /// </summary>
        public static readonly DependencyProperty TitleBackgroundProperty = DependencyProperty.Register("TitleBackground", typeof(Brush), typeof(PopupWindow), null);

        /// <summary>
        /// Gets or sets the TitleBackground possible Value of the Brush object.
        /// </summary>
        public Brush TitleBackground
        {
            get { return (Brush)GetValue(TitleBackgroundProperty); }
            set { SetValue(TitleBackgroundProperty, value); }
        }               
        #endregion TitleBackground
               
        public void Close()
        {
            this.Visibility = Visibility.Collapsed;
        }
   
        protected override void OnApplyTemplate()
        {
            base.OnApplyTemplate();                   
            this._CloseButton = this.GetTemplateChild("CloseButton") as Button;
            if(this._CloseButton != null)
                this._CloseButton.Click += new RoutedEventHandler(_CloseButton_Click);
            _ContentContainer = this.GetTemplateChild("ContentContainer") as Border;
            if (_ContentContainer != null)
            {
                _ContentContainer.MouseLeftButtonDown += new MouseButtonEventHandler(_ContentContainer_MouseLeftButtonDown);
            }
        }

        void _ContentContainer_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            e.Handled = true;
        }

        void _CloseButton_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }
    }

4) Define Default Style for PopupWindow in the generic.xaml file (Put the following style in the generic .xml file)

<Style TargetType="controls:PopupWindow">      
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:PopupWindow">
                    <ContentControl Style="{StaticResource DragAndResize}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                        <Border BorderThickness="1" BorderBrush="#999">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="26"/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <Border Grid.Row="0" Grid.ColumnSpan="2" VerticalAlignment="Stretch" Background="{TemplateBinding TitleBackground}">                                   
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition/>
                                            <ColumnDefinition Width="25"/>
                                        </Grid.ColumnDefinitions>
                                        <TextBlock x:Name="Title" Text="{TemplateBinding Title}" Margin="5 0 5 0" Foreground="White"></TextBlock>
                                        <Button x:Name="CloseButton" Grid.Column="1" Style="{StaticResource CloseButton}"/>
                                    </Grid>
                                </Border>
                                <Border Grid.Row="1" Margin="1 0 1 1" x:Name="ContentContainer" Background="{TemplateBinding Background}">
                                    <ContentPresenter Content="{TemplateBinding Content}" />
                                </Border>
                            </Grid>
                         </Border>
                    </ContentControl>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

5)  Now you can test PopupWindow control you just created. Create a PopupTest user control with the following XAML, remember to change the namespace of controls to your namespace. Run the test. If it works, you can replace the TextBlock with any content control you want.

<UserControl x:Class="PopupTest"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:MySilverlight.Controls;assembly=MySilverlight.Controls"
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    >
    <Grid x:Name="LayoutRoot" Background="White">

        <controls:PopupWindow Title="Popup Window Test" Background="Beige" Width="300" Height="300"> 
            <controls:PopupWindow.TitleBackground>             
                    <LinearGradientBrush EndPoint="0.5,1"
                                                      StartPoint="0.5,0">
                        <GradientStop Color="#FF880000"
                                                  Offset="0" />
                        <GradientStop Color="#FFD64300"
                                                  Offset="1" />
                    </LinearGradientBrush>              
            </controls:PopupWindow.TitleBackground>

            <!--Put window content here -->
             <TextBlock Text="Window Content here"></TextBlock>         
        </controls:PopupWindow>
    </Grid>
</UserControl>

Hope this helps. 

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

 Hi,

you forgot to give :

WordTest.Silverlight.Util.Utility.GetElementPosition(this);

thanks
 

I get a error on wordtest... how can i solve it?

 Rui

Sorry I forgot to post this GetElementPosition function. This function returns Absolute position of any silverlight UIElement. I put this function as one of my Utiltity function. You can put is as a private function in DraggablePanel and take off the "WordTest.Silverlight.Util.Utility."

public class Utility
    {
        public static Point GetElementPosition(UIElement e)
        {
            GeneralTransform gt = e.TransformToVisual(Application.Current.RootVisual as UIElement);           
            return gt.Transform(new Point(0, 0));
        }
    }

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

i m gettin a error in InitializeComponent(); of my usercontrol ...

A first chance exception of type 'System.Windows.Markup.XamlParseException' occurred in System.Windows.dll

Additional information: AG_E_UNKNOWN_ERROR [Line: 56 Position: 35]

user control

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:controls="clr-namespace:iffiretv;assembly=iffiretv"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"

>

<Grid x:Name="LayoutRoot" Background="White" Grid.Row="0" HorizontalAlignment="Center" >

<controls:PopupWindow Title="Popup Window Test" Background="Beige" Width="300" Height="300">

<controls:PopupWindow.TitleBackground>

<LinearGradientBrush EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#FF880000"

Offset="0" />

<GradientStop Color="#FFD64300"

Offset="1" />

</LinearGradientBrush>

</controls:PopupWindow.TitleBackground>

Width="Auto"

HeadersVisibility="Column"

AlternatingRowBackground="LemonChiffon"

RowHeight="30"

CanUserResizeColumns="True"

x:Name="dataGrid" >

<my:DataGrid.Columns>

DisplayMemberBinding="{Binding nome}" >

<my:DataGridTextBoxColumn.Header>

<StackPanel Orientation="Horizontal" Cursor="Hand" MouseLeftButtonDown="StackPanel_MouseLeftButtonDown">

<TextBlock Text="Nome (ASC)" />

</StackPanel>

</my:DataGridTextBoxColumn.Header>

</my:DataGridTextBoxColumn>

DisplayMemberBinding="{Binding quadro}" >

<my:DataGridTextBoxColumn.Header>

<StackPanel Orientation="Horizontal" Cursor="Hand" MouseLeftButtonDown="StackPanel_MouseLeftButtonDown1">

<TextBlock Text="Nome (ASC)" />

</StackPanel>

</my:DataGridTextBoxColumn.Header>

</my:DataGrid.Columns>

</my:DataGrid>

</controls:PopupWindow>

</UserControl>

Did you get the error with the original XAML (without replace your dataGrid with the TextBlock)?

It looks like some invalid XAML or Event handler code missing in the code behind. Do you have code for StackPanel_MouseLeftButtonDown, StackPanel_MouseLeftButtonDown1 ?

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Good to hear it's working. We have not formally started with Silverlight project because it's still on beta. I'm just trying to explore all the possibility with silverlight and build as many controls as I can.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

sladapter I need download code source to Draggable windows please....

I have contruction demo application for microsoft community of Panama.

Thanks.

 Rene.

rbonillajr@hotmail.com:

sladapter I need download code source to Draggable windows please....

I have contruction demo application for microsoft community of Panama.

 

Thanks.

 Rene.

Rene,

All the code for the Draggable window already posted in this thread. Start with my post with 5 steps instruction plus one more function I missed initially so I posted in a later thread. That's all you need. I do not know where to upload files so you can download. But just copy and paste the code I posted here and follow the instruction you should be able to get it. 

Let me know if you have any problems.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

I dont´s understand steps

3) I wrapped the DragWindowTest to a PopupWindow custom control

4) Define Default Style for PopupWindow in the generic.xaml file

I have create generic.xaml? or copy code in the PopuWindow.xaml

rbonillajr@hotmail.com:

I dont´s understand steps

3) I wrapped the DragWindowTest to a PopupWindow custom control

4) Define Default Style for PopupWindow in the generic.xaml file

I have create generic.xaml? or copy code in the PopuWindow.xaml

Sorry, If you did not follow from the beginning of the thread it certainly did not make sense to you. Now I edited my 5 steps post. It should be more clear to you.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

since some people asking for a sample.. i made one.. with all the credit of code to sladapter.

 download it @

http://www.exileskimboards.pt/Silverlight/DraggableWindow.zip

 enjoy.

 Rui

Rui-Marinho:

since some people asking for a sample.. i made one.. with all the credit of code to sladapter.

 download it @

http://www.exileskimboards.pt/Silverlight/DraggableWindow.zip

 enjoy.

 Rui

Thx Rui,

I have modified the code a little, fixed the resizing so that the panel doesn't move when sized.  Also changed the style a little (still learning styles).

Now with multiple panels there is the issue of ZIndex of the panels, anyone got an idea how to fix this?  Maybe an event on the PopupWindow that the main page can subscribe to and update ZIndex on click??

Modified code available @

http://laksabar.com/Silverlight/DraggableWindow.zip 

 I fixed the ZIndex issue and I believe the resize hit-test is down to the narrow width of the border.  there must be some way to fix this, it definitely isn't hitting on the 4-6 pixels it's coded to do. 

I will update the zip download tomorrow morning. 

Need to also include a couple more cursors for diagonal resizing. 

The download has been updated @ http://laksabar.com/Silverlight/DraggableWindow.zip

Trying to stop the panel being dragged off screen, but some issues getting it working.  Maybe someone can fix.

Would also be good to add a status bar strip with grip area (drawn in xaml) to aid with the resizing.  Such as the window displayed by clicking the 'Select Tags...' button on this posting page.

well i have found some issue when working with this window..

 if i add multiple windows to the layout, add i want to take it all off. .and then putting it again i do something like this:

public List<PopupWindow> janelas = new List<PopupWindow>();

PopupWindow pw = new PopupWindow();

)LayoutRoot.Children;

//aqui ‚ melhor fazer um loop pela lista de janelas

no one can help me on this?

why when i put back the windows the content dosen't resize???

Rui-Marinho:

no one can help me on this?

 

why when i put back the windows the content dosen't resize???

provide a link to a sample project as I don't quite understand what you are doing.

I modified DraggablePanel. It will set the zIndex to the top automatically when it get focus. The resize works better now.

Rui-Marinbo, you can download the latest code and see if it works in your case.

Here is the download link

http://www.2shared.com/file/3117740/10c83497/DraggableWindow.html

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Got the zip, what's the problem you're having?

Loaded, default windows added.

Pressed Clear

Pressed Reload and default controls re-added - all can be moved & resized.

 jordanhammond,

I'm not having any problem. But Rui-Marinho said he had problem with resizing when re-adding windows to the layout. So I put up a page to test this feature. I do not see any problem either. But I'm using my latest code which is different than the code I posted before. Not sure if the earlier code had the problem.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

I try your example and i still have the same problem... with the new powwindow and dragdropcontrol...

 does anyone know where i can upload my silverlight app? so i can show you guys

 i think the problem is if the content is a datagrid!

 As i was saying, if i create a new window with a grid as content it resizes well, but if i take the windows of layoutroot and put them again, the same way slapadapter as in his example.. the grid gets fixe size.. and it looks like the picture below...

 Other thing that in this popwindow should be fixed is that it should have a minimum resize size.. because if you try to resize it all from left to right for example,if u drag it all the way and more, you make the window disapeer, and then u can't acess it again..

 Thanks for the help..

Rui

Rui-Marinho,

I saw your problem now. I can reproduce it. I don't know why DataGrid behaves like this. Maybe there is a bug with DataGrid (mainly the data area inside scrollviewer). But I found if you set Visibiliy = Visibility.Collapsed to hide the window you could avoid this problem. This way you do not need to use another list to remember all opened windows.

private void btnClear_Click(object sender, RoutedEventArgs e)
        {
            foreach (UIElement u in LayoutRoot.Children)
            {
                if (u is DragDropControl)
                    u.Visibility = Visibility.Collapsed;                 
            }         
        }

        private void btnRestore_Click(object sender, RoutedEventArgs e)
        {
            btnClear_Click(null, null);
            foreach (UIElement u in LayoutRoot.Children)
            {
                u.Visibility = Visibility.Visible;          
            }
        }
    }

 
By the way if you get the latest http://www.2shared.com/file/3124133/97185a66/DraggableWindow.html  the resize should have a minimum size now. 

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

hi sladapter thanks for all the help..  the problem is that i don't want to hide the windows.... i will want to save them in the database, so when the user gets out and enters again in the application.. the last windows that he were open when he cole the app should be open when he enters again.. i m not coding that for now.. because i m havin trouble getting the webservice and grid to work on iis 7.. but i will try to save the each window and it's content in the database.. i hope if i create a new window with the information from the database,like we are doing when clicking the buttonm this bug of the grid don't resize wiil not happen...  Do you think we should send a email to microsoft about the bug?

 Greetings and thanks for the help

Rui

Rui,

I think you can report the bug in the "Report a Silverlight Bug" forum.

In your case, when user login to the application, you will created a new window with the data and window info(size, position) saved in the database, I don't think you would have this resizing problem.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Rui-Marinho are you  trying to save Window position and Content to database? if yes I'm working on something like that, may be we can share some ideas.

thosebug:

Rui-Marinho are you  trying to save Window position and Content to database? if yes I'm working on something like that, may be we can share some ideas.

 

I have also done exactly this, it's pretty simple, just XML serializing the layout information and saving the XML to SQL Server.  The only issue I have right now is the X & Y co-ordinates from the PopupWindow are not being picked up correctly.

Is it possible to show the dialog as modal? how can I use the IsModal property ?

thanks.

hello thosebug and jordanhammond, yes i am starting  the work this out with database storing the windows.

 jordanhammond, you put the xaml? or the  xml?

 can you get the exact xaml, or do you get the user control that is inside the window?

thanks 

greetings

Rui

I couln't grab the XAML from a User Control, what I'm doing is iterate trough the controls and creating a XML and sending to the Service, is there a way to do different?

 Hi Rui,

In my default Page, I have a simple window manager that add + removes windows to the main canvas.

When I save a layout I XML serialize a list of small data contract that is provided by my web service.  As Rect is not in WCF I have used doubles to store the size + position details.

The data contract looks as such:

public class LayoutPanelDC
{
    public Double X { get; set; }
    public Double Y { get; set; }
    public Double Width { get; set; }
    public Double Height { get; set; }
    public String Title { get; set; }
    public Int32 ZIndex { get; set; }
    public ContentTypeDC ContentType { get; set; }
}

where ContentTypeDC is just an enum of different window content types I have created.

I save the XML as data type XML in the DB, passed to & from the web service as string.

When restoring the SL Page simply recreates windows based on the loaded xml data:

        PopupWindow NewPanel(string title, Rect bounds, ContentTypeDC contentType, bool canResize, object content)
        {
            PopupWindow pw = new PopupWindow();
            pw.Title = title;
            pw.Width = bounds.Width;
            pw.Height = bounds.Height;
            pw.X = bounds.X;
            pw.Y = bounds.Y;
            if (content == null)
                pw.Content = CreatePanelContent(contentType);
            else
                pw.Content = content;
            pw.CanResize = canResize;
            pw.MouseLeftButtonDown += new MouseButtonEventHandler(onPanelGotFocus);
            pw.Closed += new EventHandler(onPanelClosed);

            return pw;
        }
 

thosebug:

Is it possible to show the dialog as modal? how can I use the IsModal property ?

 

thanks.

I have added code for IsModal= true. Also modified code so you can get the Size and Position property of the Window by get the value of  Window.Height, Window.Width, Window.GetValue(Canvas.LeftProperty), Window.GetValue(Canvas.TopProperty).

Check out the latest : http://www.2shared.com/file/3144116/5a0439cb/DraggableWindow.html

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

the modal dosen't fit the screen . is it because the layoutroot is a grid?

thanks

Rui 

Well i got it working..

but i find some issues.. when you put the modal window, the resize and drop feature, work outside the window.. you can solve that by putting canresize = false, but it dosen't have one candragdrop, so the drag and drop feature works if you mouse dow in the rectangle..

 other issue, is that the reactangule is only show when i mouse down 1st time.. when thw window appears the modal rectanglue is no vissible, only when i click on the win.

does anyone has this issue in modal window?

 resize and drag and drop work out of the window context?

i m trying to put a dispach timer in the window so it can be use for slideshow, where is the best way to put this? as a template ?

 is it possible to integrate this class bellow with the content presenter? i m trying to see a way, but i think contentpresenter dosent let it...

 http://www.flawlesscode.com/post/2008/03/Silverlight-2-Navigating-Between-Xaml-Pages.aspx

can anyone help me?

 Hi,

I don't quite get what you want do here. Are you talking about doing all the logic in the draggable window? if you are, the best way is to create a usercontrol or a custom control and doing all the code logic in that control. Then put the control as content to the draggable window.

This way you separate your code from the container. The code in your user control can be used anywhere (either in the draggable window or main page)

If you want to do the content switching like in that demo, you certainly can do, but you need to modify  the NevigationHelper a little bit:

public static class NavigationHelper
    {
        public static Grid root = Application.Current.RootVisual as Grid;     // Make this root a public member so you can set different container to it

    }

If you want to put Navigation code in your content control to switch to a different content control:

Grid g = this.Parent as Grid;  //contencontol's parent should be the "Container" Grid

NavigationHelper.root = g;

NavigationHelper.Navigate(newPage);

or

NavigationHelper.Navigate(transition, newPage); 

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Well my first thought was, to have a proprety in the Draggble window like ContentTimer, so it's time it ticks the content changes.

We are saying that the cod for this, should be done as another control like Content.cs, and then embeber content.cs enside the draggble window correct?

Yes, that is correct. You certainly can put the timer or all the code in the draggable window. But I would not do it there. Since we want to keep the code in the Draggable window as generic as possible so you can put any kind of content there.

You can create an User Control with a empty Grid. Put the Timer in that control,  as timer ticks you switch the the content in the Grid. Once you tested this User Control, you can put it as a content of the Draggable window. This way, you can re-use this UserControl anywhere you want, not necessarily in the Draggable window.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

well i got it changing the content, but it dosen't work yet with the transitions, because it dosen't get the old page, (the actual page) to do the transition.

 here goes some code:

 1st create new user contro GridShow to host the slideshow of controls

 here is gridshow.xaml.cs

public partial class GridShow : UserControl

bool flag = false;

_dt.Interval = new TimeSpan(0, 0, 20);

//timer

Grid g = this.Parent as Grid; //contencontol's parent should be the "Container" Grid

NavigationHelper.Navigate(new grid("bomb"));

else

NavigationHelper.Navigate(transition, new grid("ocorr")); //grid("string") is a user control that creates a datagrid

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

>

<Grid x:Name="root" Background="White">

</UserControl>

 then create window and its content:

In your case, you do not want to switch the new content with the GridShow UserControl. Instead you want to switch control in the Root grid in the GridShow, right?  So the code should be like this:

{

NavigationHelper.root = this.root;  // I assume "root" is your Grid name in this UserControl? 

 FrameworkElement oldPage = root.Children[0] as FrameworkElement;

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Hi everyone

Is there any plan to get this running in SL2 Beta2?

I love it but I can not seem to get it running in SL2 B2 yet.

Any ideas welcome.

Thanks

Martintr

I have been doing conversions for my projects, doing all kinds of fixes, struggling with the new bugs found in beta 2 etc. in the last two days. I have not had a chance to take a look at this Window control yet.  I was kind of hoping in beta 2 they provide some kind of build-in window control like this, so I don't have to write one.

I'll try to take a look at this control once I got everything else (some more important ones for me) back to work.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

 OK, here we go:

to get the latest code for beta 2:

http://www.2shared.com/file/3418282/5c1659b9/DraggableWindow.html

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Thank you so much

It works well and the update was so quick.

I hope it wasn't a major piece of work.

Thanks again

martintr

Hi there, i have some issues i wanted to fix in this control, but istill don't know how...

well first of all, i have a probelem when using modal window, if i call a modal window on a button click, it works well, but if i put it on page load, in only shows the modal screen around the window after i click on the window or try the move it, only at that time the modal appears and works well.. this only happens if the modal window is create on page load event.

other thing is that when i close the window i want to dispose the usercontrol, and not only hide it, how can i achive this?

 other good point its how to store a list of windows in a database, assuming you want the user to leavle the application, but you want to save all is windows configurations, and ehen he logs in again we can put them just like the last time he had it.. is is possible to store a UIelement in database? or i will save the title, height, wight, canvas too and elfpt, and the content of each window?

 if anybody can give a clues on this i will be very gratefull

 thanks

Rui

1) I'll try the modal window thing during the weekend and see what I can find out.

2) If you want to to dispose the usercontrol when you close the window. You need to remove it from it's parent collection. If you added that window to a Grid by doing theGrid.Children.Add(thePopupWindow); You remove it from the same collection by doing theGrid.Children.Remove(thePopupWindow);

Once your code no longer reference this window,  the object will be garbage collected so you do not need to worry about it.

3) What kind of information you want to save by "store a list of windows in a database"  and in what format you want to store them? If you mean the data in the window plus the information about the window like the window size and position then it should be easy. The data should be saved independently, it should not matter the data was in a popup window or in a normal window. Then you can save the popup window position and size and some information about the data that current been displayed. That is all you need. So next time when user come in, You open list of new popups and fill the data based on the information you saved. I think that should be enough.

I don't know why you need to save the whole UIelement in database. You mean you want to serialize the whole window object including all the children UIElements and data in it and save the whole thing to database?  Unless I do not understand your need, I do not see need of doing this.  It will involve too much data been saved and too much overhead trying to serialize everything then de-serialize them when you need to read them back.

I have never done anything like this. Do you do anything similar in Window's programming or traditional Web(HTML) programming?  Currently there is no XamlWriter in Silverlight. Someone posted a XamlWriter and I have tried it. I found just to serialize one object it takes processing time (it basically use Reflection to do this) and space. It will write out every property of the object even most of them just has default value. So the XAML string come out of it contains a lot of data which you not necessarily want to save. It will eat your database space quickly.

For example, you can use this simaple Xaml <data:DataGrid x:Name="theGrid/> to create a functional DataGrid:

But when you try to serialize the same DataGrid you just created using XamlWriter, the Xmal come out of it will be much much longer than this.

For real data, I don't know what kind of data your users want to work with. In our application, the users always want see real time data, not some old data they saw when last time they logged in. In the current web application, they hit the refresh key all the time, just make sure they are seeing the real-time data.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

 do you have a source for this who work on silverlight 2?

 yes, the link is in the 3 posts above yours.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Well done mate, it's a great control.

Too bad it doesn't work well if the parent control where it's inserted is a Grid. :)
 

nmpgaspar:

Well done mate, it's a great control.

Too bad it doesn't work well if the parent control where it's inserted is a Grid. :)

A Grid has totally different functionality to that of a Canvas with it's auto placement and sizing of child controls.  Inserting one into a Grid really wouldn't make sense.

It makes sense, since for some reason, you can actually be obliged to have a Grid as parent control.

 
Ah, and i had it on a Grid on Beta1.
 

Here is the latest code for the Draggable Control and Window working in Grid and Canvas.

 http://www.2shared.com/file/3897035/3dd35a53/DraggableWindow.html

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

 Hi friend,

         I went through your work....

         You have done a great work..

@sladapter

Do you have a version of your project updated for the RTW version available?

I have, but I won't be able to upload anything for the next two weeks because I'm away from my working machine.

You can try to compile it under RTW. I don't remember there is any breaking changes in this project. If you see any compiling errors, just hand fix them.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Hi, there is a huge problem with the system. I ran it on VS 2008 without SP1 and your solution seems to work fine. But when i installed SP1 and Silverlight 2.0 released version the Drag Drop Panel class throws error, container not found. If i disable the container part on ovveride templates then it seem to work fine. Can this be fix, if it is could you guide me.

 Now i have question i made a usercontrol having button with mousemovement in it. The button seems to move around the page as i wish. Now i have  a canvas called DesignPane where i add the button dynamically to the design pane with different position. When i load the canvas the all the button seems to move without any problem. I also want the canvas designPane to move too. So i used your DragDropPanel control. I put the DesignPane on the DragDropPanel and a textblock with text="DragThisCanvas". Great news is the the whole canvas move when i press on the textblock and drag it.

 Great job. i love the idea that u implemented...

But my button when i try to move it, the whole design pane is  also moving which i donot want. The button should be able to move freely in designpane canvas.

Could you give a solution to this problem. It would be helpful if you convert the whole project in SP1, silverlight 2 released version. and give a link to download.

Please do reply.

Sharker Khaleed Mahmud(MCPD)

 Make sure you move the generic.xaml file to the Themes folder. That's one breaking change since RC0.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Sharker, you can download a copy of the app that works with the final SL release here.

Hey, i fixed it, i added a property DragOff in dragdropPanel class where if i set it to true the dragpanel stop moving and the button inside the dragpanel start moving, When i release the button movement i set the DraggOff to false and the dragpanel again moves with the new position of the vutton in the canvas.

Pretty neat huh!

Sharker Khaleed Mahmud(MCPD)

Hi -

First thanks for all the efforts here - this is a nifty bit of code and puts the Microsoft Popup to shame. 

Second, help! I'd be grateful, very grateful, if someone could explain where I'm going wrong. I've got the core code of the DraggableWindow plus its generic.xaml in an SL2 assembly. This builds correctly.

Next I've got some test code that does this (with references etc to the DraggableWindow assembly)

        PopupWindow dlg = null;
        private void Modal_Click(object sender, RoutedEventArgs e)
        {
            dlg = new PopupWindow();
            dlg.Title = "Modal";
            dlg.Width = 300;
            dlg.Height = 300;
            dlg.OffsetX = 100;
            dlg.OffsetY = 100;
            dlg.IsModal = true;
            // Set the content property of PopupWindow to an instance of MyControl.
            dlg.Content = new TestEdit.Dialog1();
            // Make sure add ModalDialog to the Page Root
            LayoutRoot.Children.Add(dlg);
        }

 This too builds OK but at runtime I get this error in the browser: 2272 Parser error 'cannot find a resource with the name/key CloseButton'.

If I debug the assembly OnApplyTemplate() in PopupWindow is never called which must mean I am missing something bloody obvious.

Any clues welcomed. Thanks again.

Jerry.

 Here is the latest code for SL 2: http://www.2shared.com/file/4216774/c7078808/DraggableWindow.html

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Thanks sl - i'll give it a shot. again, nice work!

 Works a treat - thanks!

Hi sladapter,

Thanks for your project.

 I can't set Popupwindow content property is a Sl User Control.

And how to set MaxWidth, MinWidth, MaxHeigh, MinHeight, and don't allow drag to out SL App

hoangtuit:

I can't set Popupwindow content property is a Sl User Control.

Take a look at the Page.xaml and Page.xaml.cs on how to set the Content property of Popupwindow in a SL UserControl.

I don't know what problem you are having. Do you get an error (compiling or run-time?) when you set the content property?

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

 Hi sladapter,

I have two files xaml. Page.xaml and NewForm.xaml.

In page.xaml, I have a button. When I click on button, I want show a popup window containing NewForm.xaml.

 Please help me.

You mean the following code does not work?

 void button_Click(object sender, RoutedEventArgs e)
        {
           
            PopupWindow pw = new PopupWindow();          
            pw.Title = "Test Window";
            pw.Width = 300;
            pw.Height = 300;
            pw.OffsetX = 100;
            pw.OffsetY = 100;                              
            pw.Content = new NewForm();                    
            LayoutRoot.Children.Add(pw); // Make sure add ModalDialog to the Page Root.                            
        }

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

 Yes, it's not work.

Test you NewForm first. I don't think the problem is with NewForm been put into a popup window. Check the XAML in your NewForm.xaml line 26. Check if you have event handler code in the code behind if you assign them in the xaml.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Thanks you very much.

Can I set MaxWidth, MinWidth, MaxHeigh, MinHeight, and don't allow drag to out SL App?

 Not with current code. Current code does not check MaxWidth/MaxHeight setting or if the cursor is out of the SL range. But it can be added easily. I can do that later when I got more time.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

 this is nice work, i like lot more then the SL Popup.

i have implemented my own way of working: a PopupManager. i will post it soon.

one question: unless i give the pop up explicit width + height it  is not working right (cant drag etc..)
is there a way for the popup to calculate its own dimensions to fit its content?
without me giving it width/height.

 i tried several approaches without success.

can someone help? 

hoangtuit:

Thanks you very much.

Can I set MaxWidth, MinWidth, MaxHeigh, MinHeight, and don't allow drag to out SL App?

You can download the latest code from here: http://cid-9cffd385fd75195b.skydrive.live.com/self.aspx/Silverlight/DraggableWindow.zip

Now you should be able to set  MaxWidth, MinWidth, MaxHeigh, MinHeight. The popup window should always stay within the SL app area.

shemesh:

one question: unless i give the pop up explicit width + height it  is not working right (cant drag etc..)
is there a way for the popup to calculate its own dimensions to fit its content?
without me giving it width/height.

My DropDragControl and PopupWindow should not require you to set the Width/Height. If you do not set Width/Height, it should have the size that fit all the content. Check the demo page if you get the latest code. The Draggable panel does not have fixed size set. You can see them have the correct size that fit all the text.  If you click the New Window button, a new window should popup. I did not set the size on that window either. But is fit the internal DataGrid well.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

sladapter:

You can download the latest code from here: http://cid-9cffd385fd75195b.skydrive.live.com/self.aspx/Silverlight/DraggableWindow.zip

 

Now you should be able to set  MaxWidth, MinWidth, MaxHeigh, MinHeight. The popup window should always stay within the SL app area.

Thanks you so much. It's great.

Hello,

 I have downloaded the latest project and am very impressed with the work!  I am fairly new to Silverlight but manage to get around ok (or maybe not).  I have unsuccessfully tried to encapsulate the DraggableWindow code into a class library that can be referenced without having to add loose files to each project. Do you have such a project or can you enumerate the essentials for turning this into a class library?  Thanks in advance!

Here are the steps to split the control from the Silverlight main project and put the control into a separate class library:

1) Open my demo solution. Add a Silverlight class library project.  Move the DragDropControl.cs/PopupWindow.cs/Position.cs file into the class library project. Move the themes folder and generic.xaml in that folder to the class library too. Build the project make it compiles.

2) Add this class library project to the references of your main Silverlight project.  You can still use the Page.xaml of my demo project to do this test. You just need to change the name space information and assembly information in the Page.Xaml to point to your class library:

<UserControl x:Class="DraggableWindow.Page"
             xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
             xmlns="http://schemas.microsoft.com/client/2007"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:controls="clr-namespace:YourDraggableWindowClassLibraryNameSpace;assembly=YourDraggableWindowClassLibraryAssembly">

...

 <controls:DragDropControl CanResize="True" OffsetX="100" OffsetY="50">

...

</UserControl>

Once it's working. You can use that class libary in any project. 

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

sladapter, firstly thanks a lot for the draggable window, I need draggable, resizable modal dialogs for a Silverlight application I'm working on and this is brilliant, so really appreciate that!

However I've noticed a problem with it, most UIs I think will use a Grid, and will set up columns and rows within it, but if you do this then any draggable windows will not appear correctly - they will be the size of the first column and row. You can see this in your example project by adding some columns and rows to the grid. You can work around this by setting the ColumnSpan and RowSpan properties on the draggable window when creating it, but it's taken me a while to figure out what the problem was and it would be nice if you didn't have to do this, I don't know if you have any thoughts on that? Can the draggable window code find out the number of columns and rows in the grid and set itself to span them all automatically?

Thanks,

Mark

I added Grid.ColumnDefinitions and Grid.RowDefinitions on the parent grid, but I did not set Grid.Column and Grid.Row on the PopupWindow, I do not see any problem.  If you set the Grid.Row and Grid.Column on the PopupWindow that means you want limit the Draggable area to that cell. Then you can not drag it out of that cell. When you add the Popup window to a Grid, just don't set the Grid.Column and Grid.Row peropery. If you want to set the initial position, use OffsetX/OffsetY to do it. 

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Thanks for replying. To reproduce the problem with your sample, if you add column and row definitions to the grid, with the first column width 100, second column width *, first row height 100, second row height *, then run it, if you click one of the buttons to open a new dialog then the dialog appears, but it is clipped to 100x100. To fix it you can add the code pw.SetValue(Grid.ColumnSpanProperty, 2); pw.SetValue(Grid.RowSpanProperty, 2); to where the dialog is created.

Thanks,

Mark

It would be nice if the cursor changed to a diagonal arrow when over the corners of the window, but I know the Silverlight Cursors class doesn't contain these unfortunately.

One minor problem I noticed, which you can see with your sample, is if you resize the window and make it narrower then it cuts the title off halfway along the title bar. This can be fixed by editing the generic.xaml file, in the TitleBar border it defines two columns with default 50% widths, if you give the second column a fixed width of 26 then it fixes this.

sladapter - first of all, thanks for providing the control. 

An important improvement would be to hook into an event so that the hosted control can know when the user closed the popup and send information back to the parent control.  The way it is coded right now, the Visibility property is used to display or "close" the control, but no event is fired when that property is changed.  One suggestion would be to also change the Enabled property of the hosted control since that does trigger an event on the hosted control.

mwieder,

Thank you for the suggestion. I have added CloseButtonClicked public event to the Popup window. Now user can handle Close event themselves in the parent control if they want to. If they do not hook up the event,  window will be closed using the old Close function. 

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Great control! 

Is it better to use this implementation then using the Popup control contained in SilverLight?

Also, my browser says "Error on Page" when the Popup is launched, but it doesn't seem to affect the functionality and the VS debugger isn't breaking on it.  Anyone else showing that error when launching a Modal Popup with the code above?

sladapter:

Here are the steps to split the control from the Silverlight main project and put the control into a separate class library:

1) Open my demo solution. Add a Silverlight class library project.  Move the DragDropControl.cs/PopupWindow.cs/Position.cs file into the class library project. Move the themes folder and generic.xaml in that folder to the class library too. Build the project make it compiles.

2) Add this class library project to the references of your main Silverlight project.  You can still use the Page.xaml of my demo project to do this test. You just need to change the name space information and assembly information in the Page.Xaml to point to your class library:

<UserControl x:Class="DraggableWindow.Page"
             xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
             xmlns="http://schemas.microsoft.com/client/2007"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:controls="clr-namespace:YourDraggableWindowClassLibraryNameSpace;assembly=YourDraggableWindowClassLibraryAssembly">

...

 <controls:DragDropControl CanResize="True" OffsetX="100" OffsetY="50">

...

</UserControl>

Once it's working. You can use that class libary in any project. 

Tried this, compiles ok but when it runs I get just the white screen and "Done" in the status bar. Tells me that something ain't right. I copied the img directory and its contents, figured that would be useful to have.

I downloaded your solution and it works fine.

Any one else had the same problem and found the solution or maybe Sladapter if you have time and inclination could help.

Great posts on here BTW all useful stuff for us "C" dinosaurs trying to grasp these new technologies.

I downloaded code from

http://cid-9cffd385fd75195b.skydrive.live.com/self.aspx/Silverlight/DraggableWindow.zip

and ran it using latest RTW components. It complains about missing DataGrid. I fixed this by re-adding System.Windows.Data assembly

Windows cannot dragged and cannot resized. 

How to make it work ? 

Andrus.

The code has been added to the codeplex ( thanks to coryking ). You can download the latest code from here:

http://dialogs.codeplex.com/

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

I tried creating a sample xaml page in the project and it worked. But when i added the 3 files

1. DragDropControl.cs 2. PopupWindow.cs 3. Position.cs and the IMg and Themes folder to my project and run it, i get "Container is Missing in the template" error.

Any guesses why?

I have modified the namespace names. I cannot figure the reason.

Hi sladapter,

I have a problem.

I builded a dynamic popup form via a xml file. It's ok. When I click to "Open" button, form is showed. I can close form..., everything is ok.

But, when I reopen form, It's error: Value does not fall within the expected range.

How can I fix it?

Sorry about my EN.

 The " Value does not fall within the expected range" error usually happens when you try to add a control to the visual tree more than once. When you first open the window, you created a popup and added it to the container. When you close the popup did you remove it from the container or just hide it. If you did not remove it from it's parent but just hide it then it's still in the visual tree. When you click the open button again you create another popup control might also give it the same Name. So you have another control with the same name you are trying to add to the container. That would cause that error.

You can either remove the first popup from it's parent when you close it or you can reuse that popup by making it visible but change the content to the new content if you don't want to have more than one popup open at any given time.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Thanks sladapter,

I opened PopupWindow.cs file, and I saw close method:

        public void Close()
        {
            if (this.ModalMask != null)
            {
                this.ModalMask.Visibility = Visibility.Collapsed;
            }
            this.Visibility = Visibility.Collapsed;
        }

I'm beginer. Now, I can reopen form, but, I want edit PopupWindow.cs to close form.

ex: method CloseMode (hide or close form) .

How to do it. Please show me. 

Sorry about my EN.