Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

samcov — Fri, 29 Aug 2008 20:46:28 GMT

Sweet! I've become more comfortable about where to use your visionary techniques in my applications going forward. This is very good stuff

I'm also interested in something you said you want to get more into, namely expanding / collapsing lists. While it may not be your final piece, I think it's probably the next progression.

Again, thanks for the code, and at some point, it may be a good idea to get this on CodePlex.

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Martin Grayson — Sat, 30 Aug 2008 10:45:26 GMT

Hey samcov, thanks again for looking at the samples!

Expanding / collapsing lists is VERY high on the list. I think I will deal with reusable drag and drop first, then do the list stuff.

I actually set up a codeplex project last week, so at some point in the very near future, I will put all the code on there so folk can look at it any time, and check out some of my other samples!

I will post here once its up and running.

Thanks for reading!

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Prabhakar — Sun, 31 Aug 2008 16:12:07 GMT

Hi Martin,

This sample is great and thanks for taking this initiative to publish the sample similar to the CUI demonstration.

I quickly tried to convert this sample into WPF and am getting some flickering during the animation for drag and drop. Any idea on this.

regds,

Prabakar

Silverlight Cream for September 02, 2008 -- #360

Community Blogs — Wed, 03 Sep 2008 08:46:38 GMT

Koen Zwikstra with Silverlight Spy, John Papa on UserControl from Popup Control, Shawn Wildermuth on

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Dargos — Wed, 03 Sep 2008 15:22:05 GMT

Hi martin,

thanks for this amazing usefull article !

that's clean stuff and I learned a lot, thanks ;)

regards,

Dargos

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Martin Grayson — Thu, 18 Sep 2008 00:18:04 GMT

Prabhakar,

Not sure why you are seeing flickering - quite possible to do with the way we do animation.

If possible, could you send me your wpf sample to take a look?

martin.grayson@microsoft.com.

Thanks!

Martin

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Gabriel Valencia — Thu, 18 Sep 2008 04:14:05 GMT

Hi.

this is a very useful sample. I try to convert to WPF but I have some problems, the first error is that can't create the DragDockPanel.

debuging It seems that the error is in the AnimatedContentControl.cs

I change the XamlReader.Load line for the next lines:

// Load the XAML

StringReader stringReader = new StringReader(animatedElementXaml);

XmlReader xmlReader = XmlReader.Create(stringReader);

// Create a canvas from the XAML

Canvas animatedElement = XamlReader.Load(xmlReader) as Canvas;

unfortunately is not working. what I missing??

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Martin Grayson — Thu, 18 Sep 2008 14:15:09 GMT

Hey, to fix this, where you construct the animatedElementXAML, the first line, currently this...

animatedElementXaml += "<Canvas xmlns='http://schemas.microsoft.com/client/2007' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>";

Needs to be replaced with this...

animatedElementXaml += "<Canvas xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>";

This is beacuse of the different XAML namespaces with WPF and Silverlight.

HTH,

Martin

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Jim — Thu, 18 Sep 2008 18:04:06 GMT

I was woundering if you could help me with an expression blend problem. When I edit a button' control part's like in your creating a glass button lesson, I would like to be able to have the content presenter's Forecolor change from white to black when the mouse is over, and to white again when the mouse leaves.

Thanks for your help.

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Gabriel Valencia — Thu, 18 Sep 2008 20:13:20 GMT

Hi again.

It seems that work with the change of the xmlns, now I having problem with the animations. first show only one panel, then when I do a resize shows correctly (the 6 panels)

also anyone know how to migrate the animations of the maximize/minimize button that only works on silverlight?

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Martin Grayson — Fri, 19 Sep 2008 13:14:53 GMT

Hi Gabriel,

For the first issue, I think you need to call UpdateLayout from the hosts loaded event (this is down to the order of eventing in WPF).

And yes, the toggle button wont port just yet. You will need to redo the template in blend using triggers.

I am thinking about producing a WPF version as there have been many request, I cant promise a date, but hopefully by the end of october.

Thanks,

Martin

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Martin Grayson — Fri, 19 Sep 2008 13:15:37 GMT

Jim, wrong post, but hey!

You should be able to do this in the triggers panel. Add a mouse over = true trigger that sets the content presenters forground to a color, then back again when the property becomes false.

Thanks,

Martin

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

scromer — Fri, 19 Sep 2008 17:19:56 GMT

Very cool controls. I downloaded the sample but it when I try to open it in Visual Studio 2008 I get an error message saying the DragDockPanelSample.csproj cannot be opened. The project type is not supported by this installation. Anyone else see this?

Thanks,

Sam

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Gabriel Valencia — Fri, 19 Sep 2008 19:44:52 GMT

Hello

I fix the problem with the Toggle button. if anyone is intereseted, I use the next library http://blogs.msdn.com/johngossman/archive/2008/08/08/visualstatemanager-for-desktop-wpf.aspx this library enable the use of VSM in WPF. Note. you need to add the support to the three states of the Togle Button (Checked, Unchecked, Indeterminate) just take a look of the code. you can mail me at mxsmax@msn.com

in other hands, I had the same problem the flick when you try to do the drag & drop effect. is like the panel move but the grid doesn't the move. anyone had have the same problem?

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Martin Grayson — Sun, 21 Sep 2008 01:47:36 GMT

Hey scromer,

To modify, compile and run the source code, you need Visual Studio 2008 + .NET 3.5 with the Siverlight 2 Beta 2 tools and developer runtimes. You can get access to all the bits from here... :http://silverlight.net/GetStarted/

HTH, Martin

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Martin Grayson — Tue, 30 Sep 2008 09:53:34 GMT

Hey gabriel,

Someone sent me a video of the flickring issue. I think this is down to the differences in WPF and Silverlight mouse move events. A workaround for WPF would be to use the WPF thumb control as the grip bar, and then hook up the Thumb controls DragDelta event, and pass the HoriztonalChange and VerticalChange up in the drag event args.

I have tried this, but think that should do the trick.

Martin

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

reyn_L — Wed, 01 Oct 2008 21:37:00 GMT

Hi Martin,

I've tried this sample on the SL2Beta2 and it works perfect. And when I updated to the RCO, on the initial load, it just stacks them together. But when I resize, then it displays properly. I created just XAMLs without controls in them, it displays them properly when the page loads. But as soon as I start adding controls, the page are stack when it loads the first time.

Thanks,

reyn_l

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Martin Grayson — Wed, 01 Oct 2008 22:31:29 GMT

Hey reyn_L,

This is a known bug in the drag dock panel host. It is because in Beta 2 the Loaded event fired before the SizeChanged. In RC0, its the other way around.

To fix in the meantime, you need to just add a...

this.UpdatePanelLayout();

...to the end of the loaded event handler.

This will be fixed in the version of the control that appears in http://www.codeplex.com/blacklight at the end of October release.

Martin

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

reyn_L — Thu, 02 Oct 2008 17:18:28 GMT

Hello Martin,

Thanks very much for the prompt response and help on this issue.

Sincerely,

reyn_L

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Harlequin — Thu, 02 Oct 2008 21:15:10 GMT

Was wondering if there's a way for it to only do columns. Instead of 4 boxes being 2x2. you want them like this:

[BOX EXPANDED]

[BOX]

Then if you maximize the 3rd box, it would squeeze the other ones shut and open itself up.

Could probably be done in the C#, but I'd like to add a property to DragDockPanelHost or something. Better approach.

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Martin Grayson — Fri, 17 Oct 2008 20:03:36 GMT

Hi all,

I have knocked up a quick version of this in WPF. I will make sure it is in Blacklight (http://www.codeplex.com/blacklight) for the release at the end the this month, with tidy code and nice templates etc...

... However, if you wanted it now, you can get the source code from here...

http://mightymeaty.members.winisp.net/samples/TestDragDockPanel.zip

Cheers,

Martin

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Rui Marinho — Tue, 21 Oct 2008 13:31:52 GMT

Hello Martin, and thank you very much for the wpf version, is impressive :)

i would like to suggest a feature, that is the abillity to have all panels minimized, for example, imagine ou want to have all panels with minimize height of 100, and minimize width of 50, and minimize on the left, to act like tabs, but when you minimize the one is opens it should not go to the normal stat, but keep minimized like the others.

and another question i would like to ask, is how is it possible to determinate the rows and columns of the panel host?

Thank very much once again..

Rui Marinho

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Martin Grayson — Thu, 23 Oct 2008 00:10:14 GMT

Hi Rui,

Nice suggestion. I have thought about adding a minimise button to each panel, so you can minimise them one by one. This would probably achieve the scenario you have described above. I will keep the idea open!

If you get round to having a go yourself, let me know!

The host actually does store the number of columns and rows, in private variables. You could add public get's to these no problem!

Thanks,

Martin

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Naidu — Thu, 23 Oct 2008 12:39:56 GMT

Maritin,

That was quite excellent showcasing about WPF capabilities.

i have a query for you

i have gone through the code of your application, but i could not see that the panels can be arranged in vertical position(i mean one above the other)

can we do that or can't we ? if so how....

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Martin Grayson — Tue, 04 Nov 2008 01:40:27 GMT

Hi Naidu, there is now a property on the Drag Dock host that allows you to pick where the panels go... Minimized position i think.

If you get the latest release from Codeplex (came out 2 days ago) then you will see the property in there.

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

john79 — Sat, 22 Nov 2008 14:33:01 GMT

hi guys,

do you know how to show a page.xaml in a panel?

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Martin Grayson — Mon, 24 Nov 2008 23:07:35 GMT

The Page.xaml should be a user control, and so, can be placed inside a drag dock panel.

This is assuming that the Page.xaml isnt the root page that you load in App.xaml.cs...?

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Noam — Tue, 25 Nov 2008 21:52:38 GMT

Hello,

I have been working with the new Blacklight version of this control and found a bug. If you remove the maximized panel, the host gets mixed up. To resolve I added a line in the RemovePanel method that checks if it the correct control, and if so, nulls the maximizedPanel member. Seems to resolve the issue.

Thanks.

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Martin Grayson — Wed, 26 Nov 2008 01:02:00 GMT

Hi Noam,

Thanks for reporting the bug, and giving us a fix. Will get this in for the release on the 5th December!

Thanks,

Martin

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Jurie Smit — Fri, 27 Feb 2009 16:58:52 GMT

Hi Martin,

I am using your blacklight dragdockpanel to develop a dashboard with an extremely high level of customization. Before I put too much effort and time into customizing your control to suite my excact requirements I was wondering whether you have seen any implementations of the "minimize" button, as well as the dynamic run-time addition of panels into you control? Any implementation/code along those lines would obviously be very usefull to me.

Another idea I have is combining your control with gridsplitters. Somehow struggling to get started with this though, not sure how to approach the problem... any possible pointers from you maybe?

Any help would obviously be greatly appreciated. Thank you, smit.jurie@gmail.com

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Jurie Smit — Fri, 27 Feb 2009 17:01:48 GMT

(Afterthought: forget about the minimize button... Seems fairly straightforward to implement.

Those gridsplitter though...)

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Martin Grayson — Fri, 06 Mar 2009 19:13:39 GMT

Hmmmm. grid splitters wouldnt work well in the control as it is today.

You would need to embark upon creating a new control, or inherit the existing host and add a bunch more code.

As for dynamic adding of panels, that has been supported since V2. Look at the showcase sample page code.

Thanks,

Martin

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Jeff — Tue, 10 Mar 2009 06:31:29 GMT

Hi,

We're looking at creating an application modeled after the MS Patient Journey demo app. Also, we're probably going to use Prism as well.

Can you show how your panels can be hooked up to Prism??

Thanks!

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Martin Grayson — Tue, 10 Mar 2009 11:26:17 GMT

Hi Jeff,

I havent done any work with Prism yet, so couldnt provide an example, however, the panels are just content controls, and you can place what ever content you like inside.

So, if you built a UserControl is prism capabilities, you could just drop that inside a panel!

Simple!

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

GuruC — Tue, 17 Mar 2009 18:36:01 GMT

Hi Martin,

Thanks for sharing this excellent work!

I tried to extend the DradDockPanel class to override some minimized/maximized actions. However, there would be a runtime failure when I used my class inside the DragDockPanelHost.

On debugging the problem is caused in

private void DragDockPanelHost_Loaded(object sender, RoutedEventArgs e) {

....

for (int i = 0; i < this.Children.Count; i++)

{

if (this.Children[i].GetType() == typeof(DragDockPanel))

{

...

}

This type checking seems to fail. I replaced it with

if (this.Children[i] is DragDockPanel)

and now I can use the derived class. Please let me know if this is okay or I missed something?

Thanks

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

LynYo — Tue, 24 Mar 2009 15:52:44 GMT

Great work. Awesome example of what can be done with Silverlight. But if, like me, you need a little more handholding in order to grasp the delicasies of custom control building, then you probably want to have a look at Jesse Liberty's 3 part video tutorial on skinnable custom controls (links below) FIRST before you even attempt looking at the sourcecode or try to make sense of the blog posting. Trust me.

http://silverlight.net/learn/learnvideo.aspx?video=116200

http://silverlight.net/learn/learnvideo.aspx?video=141967

http://silverlight.net/learn/learnvideo.aspx?video=149875

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

LynYo — Tue, 24 Mar 2009 21:52:36 GMT

BTW one more video in Jesse Liberty's on skinnable custom controls series:

http://silverlight.net/learn/learnvideo.aspx?video=149876

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Martin Grayson — Tue, 21 Apr 2009 11:35:01 GMT

Hi GuruC,

Your change is valid, and I will put it into the next release.

Thanks,

Martin

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

John D Costa — Fri, 10 Jul 2009 11:28:45 GMT

hey martin..

in a dragdock panel i want that each panel should be minimized initially..by minimize i mean only the header should be visible not the content... pointers to this will be appreciated

and Is it possible with minimum change of code...

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

Michael — Thu, 10 Sep 2009 16:41:16 GMT

Just a suggestion.... you need to make a Silverlight tab in your main page. While SL is a subset of WPF, it is worthy of it's own section. I'm on the learning curve for WPF and I'm looking forward to digging into SL when I'm ready. Great article.

re: Silverlight 2 Samples: Dragging, docking, expanding panels (Part 3)

AKS — Sat, 19 Sep 2009 16:55:58 GMT

Is it possible to use the DragDockPanel & Host as-is to create a more complex layout as found here:

http://www.mscui.net/PatientJourneyDemonstrator/PrimaryCare.htm

Thanks in advance!