×

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

I got enough feedback and suggestions that I figured it would be better just to put the code up on CodePlex rather than package zips on my blog :-).  Here it is: FloatableWindow project.  The latest build I have is up there which incorporates some feedback that I’ve received.

UPDATE: If you like this idea VOTE FOR IT in the Silverlight Toolkit!

Basically the ShowDialog() API operates the same way that ChildWindow.Show() does today.  No changes there, popup is used.  But when you just want some simple MDI type windows, use Show() which will not use Popup but rather add the elements as children to your root visual.  Now the key here is defining that root.  Before you show the window you’d want to do something like this:

   1: FloatableWindow fw = new FloatableWindow();
   2: fw.Width = 200;
   3: fw.Height = 200;
   4: fw.Title = "Foobar";
   5: fw.ParentLayoutRoot = this.LayoutRoot;
   6: fw.VerticalOffset = 200;
   7: fw.HorizontalOffset = 100;
   8: fw.Show();

Notice line #5 where I specify a Panel element to add it to?  That would be required.  An ArgumentNullException is thrown if it is not provided.

Thanks for the great feedback and encouragement on this refactoring.  I hope that putting it on CodePlex provides a better home for evolution and tracking issues (I know there is an animation issue now with non-modal).


This work is licensed under a Creative Commons Attribution By license.


7/21/2009 3:14 PM | # re: FloatableWindow source on CodePlex
Thanks Tim, We all really appreciate this :)
7/21/2009 3:57 PM | # re: FloatableWindow source on CodePlex
Nice one Tim. Might use that today.
7/21/2009 11:20 PM | # re: FloatableWindow source on CodePlex
Hey Tim, been messing with your download files, thanks a lot for the source code!

1 quick question... about the line number 5 fw.ParentLayoutRoot = this.LayoutRoot;

The ParentLayoutRoot property doesn't appear to exist... any idea what I am doing wrong?
7/21/2009 11:23 PM | # re: FloatableWindow source on CodePlex
Allow me to clarify that, the fw FloatingWindow Object does have a property listed as Parent, but it appears to behave different (or be a different type)
7/21/2009 11:47 PM | # re: FloatableWindow source on CodePlex
hmmm well I still get get the Window that I initialize in the main page to show up (prolly cuz as I mentioned earlier, that ParentLayoutRoot property seemed to evade me for whatever reason...

But, I did manage to use a button to generate windows like in your example!!! I am pumped man, thanks a million, you rock!

I will continue to play with this and check back frquently
7/22/2009 4:44 AM | # re: FloatableWindow source on CodePlex
Hi Tim, What benefits do CodePlex have? I want to find a good way to store and organize my works as well.
7/22/2009 8:43 AM | # re: FloatableWindow source on CodePlex
Hi Terence - CodePlex is a place for hosting open source projects. It has full project integration and uses Team Foundation Server on the backend. It really isn't a place for managing samples, but one for more full-fledged projects/frameworks/components with an open source license and the goal of collaborating.

There is the MSDN Code Gallery which is similar in nature where you can put code samples. http://code.msdn.microsoft.com
7/22/2009 9:11 AM | # re: FloatableWindow source on CodePlex
Cain -- you bring up a good point on ParentLayoutRoot -- are you creating the window in XAML? I didn't make it a dependency property so it wouldn't show up there...but you are right that it should be. It should be visible in code though.
7/22/2009 9:21 AM | # re: FloatableWindow source on CodePlex
Hi Tim,
Thanks for sharing this code on CodePlex.

Best regards,
Chris
7/23/2009 1:04 AM | # re: FloatableWindow source on CodePlex
Is is just me or the HorizontalOffset and VerticalOffset do not work anymore? I used the previous version and that worked just fine.
P.S. Great job with the ParentLayoutRoot, really needed it.
7/23/2009 1:27 AM | # re: FloatableWindow source on CodePlex
I used the 30044 version, forgot to mention. And by previous version I was referring to the one from the previous post.
7/23/2009 7:22 AM | # re: FloatableWindow source on CodePlex
alex_b -- can you post your code? It should be working...will be offset based on ParentLayoutRoot though, not the screen.
7/24/2009 1:15 AM | # re: FloatableWindow source on CodePlex
In my project, the ParentLayoutRoot is be the first grid inside a TabItem and even if I hardcode the offsets, it is still displayed in the same position (somewhere close to the top-left on the TabItem).
I added a new Silverlight Application project to the project downloaded from codeplex, chose not to host it in a new website, and in the generated MainPage.xaml.cs constructor I put the exact code from your post (those 8 lines). When I run it, the FloatableWindow is always centered, no mather what offset I specify. I tried this on another machine with the same result.
7/25/2009 7:21 AM | # re: FloatableWindow source on CodePlex
Hi Tim,
FloatableWindow is awesome.I got a question but not related with FloatableWindow :)
I have a datagrid and dataform in main form;dataform in childwindow.When i click add new button ,i popup a childwindow to add record;the question is how can i check childwindow's dataform has errors and if it has errors,cancel adding records
7/25/2009 9:00 PM | # re: FloatableWindow source on CodePlex
Tim:
This control is fantastic! It is changing the way i develop LOB apps.
In some way, this is the kind of "dataform" I needed.
Now i have to acomplish how to put datafields and async validation inside it, then i will be happy!! lol.
Keep on going and thank you again!
Horacio
7/28/2009 7:03 PM | # re: FloatableWindow source on CodePlex
Just noticed something while I was trying to use this in conjunction with the navigator... when I tried to modify the ParentLayoutRoot programatically, it lets me set the ParentLayoutRoot do a new location, but then at compile time, it throws an error.

I got around this with the following code:

oldWin.ParentLayoutRoot.Children.Remove(oldWin);
oldWin.ParentLayoutRoot = this.Playground;
oldWin.Show();

Just thought this maybe useful to someone else so I figured I would share it
7/30/2009 6:35 PM | # re: FloatableWindow source on CodePlex
Awesome! Definitely going to be using this. BTW, maybe I'm using it wrong, but it doesn't seem to be playing the opening animation when using Show() instead of ShowDialog(). I'm guessing this is by design so that the overlay doesn't show up... I'll play with it later when I have time and see if I can change the template a bit if there's an issue.

Thanks for posting this! I missed it the first time around.
7/30/2009 6:58 PM | # re: FloatableWindow source on CodePlex
Steve -- nope you aren't mistaken...I haven't had a chance to work that out yet. See floatablewindow.codeplex.com/.../View.aspx
7/31/2009 4:40 AM | # re: FloatableWindow source on CodePlex
Hi Tim,

It is very nice. I have one more questions.

can we restrict the draging the FlatableWindow in a Grid instead of dragging the whole silverlight control area.

Thx
Siva
7/31/2009 8:51 AM | # re: FloatableWindow source on CodePlex
Sivarajan - I believe someone is working on submitting a patch to do just that.
8/12/2009 10:26 PM | # re: FloatableWindow source on CodePlex
Hey Tim, wondering if there are any ready made styling templates for the Floatable Window? Just some sort of skin I can load on to change the appearance easily, something like that
8/12/2009 10:35 PM | # re: FloatableWindow source on CodePlex
Cain -- no templates that I'm aware of...but it should be stylable -- most of the elements are template parts.
9/16/2009 2:43 PM | # re: FloatableWindow source on CodePlex
It seems that the floating window is restricted to the first row in the layout root grid in my project. Am I doing something wrong, or is there a way to allow it to move/resize across multiple rows?
9/16/2009 2:44 PM | # re: FloatableWindow source on CodePlex
David you need to set the ParentLayoutRoot element correctly
1/8/2010 11:07 AM | # re: FloatableWindow source on CodePlex
Hi Tim,

Is there a way to close the floating window from the "parent" application??

The "Parent" is the "this.LayoutRoot"

In this code segment...

public MainPage()
{
InitializeComponent();

floatableWindow = new FloatableWindow();

floatableWindow.ParentLayoutRoot = this.LayoutRoot;
floatableWindow.Title = "Loading the data...";
floatableWindow.ResizeMode = ResizeMode.NoResize;
Canvas.SetLeft(floatableWindow, (double)25);
Canvas.SetTop(floatableWindow, (double)25);
floatableWindow.Height = 200;
floatableWindow.Width = 200;
floatableWindow.VerticalOffset = 200;
floatableWindow.HorizontalOffset = 100;

floatableWindow.Show();


floatableWindow.Close();

}



I receive an error....

System.NullReferenceException was unhandled by user code Message="Object reference not set to an instance of an object." StackTrace: at System.Windows.Controls.FloatableWindow.Close() at KnowledgeBase.MainPage..ctor() at KnowledgeBase.App.Application_Startup(Object sender, StartupEventArgs e) at System.Windows.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate handlerDelegate, Object sender, Object args) at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, String eventName) InnerException:


But the object is there, and I can see the title in the floatover debugger


thanks for your work on this!!


take care
tony
3/24/2010 3:06 AM | # re: FloatableWindow source on CodePlex
Hi Tim,
Great article. I'm trying to use your code in my application but getting some problem.

How would I add Ok cancel buttons in that window?

Please help, thanks.
12/10/2010 2:13 PM | # re: FloatableWindow source on CodePlex
The floatable window not coming out of the parent page space/browser window area.

When I want the floatable window to have more width and hight it looks like a div/control sticked in the parent page/window.

Can this floatable window be moved out of the parent window/page just like a typical html/aspx pop-up page ?

Here is my requirement, I have a search page and once I get the search results I clicks on one of the item record and it sould open up a pop-up page where we show the item details , this detail page has more data and should be able to move this window around.

If we can not move the floatablewindow /childwindow from the parent page space Are there any other/btter options in silver light to show a detail page pop-up ?


Thank you.


2/21/2011 3:36 AM | # re: FloatableWindow source on CodePlex
I'm not abiding why you can't add the project, I don't face any issues. pass4sure 1z0-533 I add the absolute activity to my band-aid and add a advertence to it to any activity which will use the amphibian window. pass4sure 70-290 The activity has some files, but not an access point. pass4sure 70-554 So, my catechism is Am I able to use the arrangement only!
3/16/2011 2:02 AM | # re: FloatableWindow source on CodePlex
Hi Tim.

Man this control rocks. Okay so I have one issue and I hope you can help me. I am using the FloatableWindow via Template. Everything works great, till I close the instance.

I get a NullReferenceException error every time.

Can you help me out here?

Thanks!

Marlon

3/16/2011 2:08 AM | # re: FloatableWindow source on CodePlex
Never mind :)

This fixed it:

_actWin = new ChildWindows.FWIncidentChildWindow(this, code.Id);
_actWin.ParentLayoutRoot = this.LayoutRoot; <================== (Fixed it)
_actWin.ShowDialog();
4/19/2011 11:31 PM | # re: FloatableWindow source on CodePlex
No changes there, popup is used. But when you just want some simple MDI type windows, use Show() which will not use Popup but rather add the elements as children to your root visual. k visit ad visit am visit u visit
4/24/2011 12:44 AM | # re: FloatableWindow source on CodePlex
Notice line #5 where I specify a Panel element to add it to? That would be required. An ArgumentNullException is thrown if it is not provided. w visit
7/26/2011 9:56 AM | # re: FloatableWindow source on CodePlex
we all know flash is a battery eater so to prevent this is install click to flash then it will indicate every pages that runs flash has this word "flash" on webpage which is good thing.
Abilene Roofing Contractor
8/5/2011 10:39 PM | # re: FloatableWindow source on CodePlex
Hi,

I am using the FloatableWindow in my silverlight application

I want opacity of 0.5 when the window is clicked and dragged, please guide
I tried to invoke the drag event but no luck please do guide..
10/29/2012 4:21 AM | # re: FloatableWindow source on CodePlex
"Basically the ShowDialog() API operates the same way that ChildWindow.Show() does today"

It doesn't for me! When I close the floatableWindow silverlight crashes with no chance to debug. However, I can use the standard childWindow fine. Any clues?

Calling code used:
private void OpenFloatableWindowButton_Click(object sender, RoutedEventArgs e)
{
FloatableChildWindow1 fw = new FloatableChildWindow1();
fw.Closed += new EventHandler(fw_Closed); //crashes whether or not I have this line in
fw.ShowDialog();
}

void fw_Closed(object sender, EventArgs e)
{
FloatableChildWindow1 fw = sender as FloatableChildWindow1;
if (fw.DialogResult == true) { MessageBox.Show("OK clicked"); }
else if (fw.DialogResult == false) { MessageBox.Show("Dialog result is false"); }
else { MessageBox.Show("Dialog result is null"); }
}


Dialog code:
<windows:FloatableWindow x:Class="TS4570_K3.Experiments.FloatableChildWindow1"
xmlns:windows="clr-namespace:System.Windows.Controls;assembly=FloatableWindow"
xmlns="schemas.microsoft.com/.../presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
Width="400" Height="300"
Title="FloatableChildWindow1">

<Grid x:Name="LayoutRoot" Margin="2">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1" />
<Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />
</Grid>
</windows:FloatableWindow>


Code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace TS4570_K3.Experiments
{
public partial class FloatableChildWindow1 : FloatableWindow
{
public FloatableChildWindow1()
{
InitializeComponent();
}

private void OKButton_Click(object sender, RoutedEventArgs e)
{
this.DialogResult = true;
}

private void CancelButton_Click(object sender, RoutedEventArgs e)
{
this.DialogResult = false;
}
}
}

10/29/2012 4:31 AM | # re: FloatableWindow source on CodePlex
An important detail to add:
The dialog window shows fine, and resizes and floats. The crash happens when I click on OK to close the window.

By "crash" I mean it shows the "just in time debugger" window, from which I can't do anything but stop the program.
8/7/2013 4:26 AM | # re: FloatableWindow source on CodePlex
i use floatablewindow in my silverlight project .
but i can not reset it width and heigh (be fullscreen) after show window.
i find must be reset ContentRoot.Width, can i have any other way ?

 
Please add 8 and 2 and type the answer here:

DISCLAIMER:

The opinions/content expressed on this blog are provided "ASIS" with no warranties and are my own personal opinions/content (unless otherwise noted) and do not represent my employer's view in any way.