Click here to Skip to main content
Click here to Skip to main content

FloatingWindow - Multi-windows Interface for Silverlight 4

, 16 May 2011
Rate this:
Please Sign up or sign in to vote.
Resizable windows simulating multi-windows desktop interface for Silverlight 4

Before you start reading - click on the FloatingWindow demo link to see whether it can be interesting for you. If yes - take it here:

If your browser understands Silverlight 4, you will see something like this:

FloatingWindow demo

Windows in 21 Days

Indeed it required a bit more time to write this library. Though floating windows are common in graphics applications, there are not too many such controls in Silverlight. One of the best is Tim Heuer's FloatableWindow control.

Starting this project, I just wanted to add a few functions to the existing control. But it turned out it was easier to rewrite it completely. Finally, only a few original methods had left after my rework. I added the following functionality:

  • Window can be resized by dragging any edge or a corner
  • Added possibility to snap in moving or resizing window to the nearest window's boundary
  • Window can be minimized, maximized and restore its position and size
  • Window can be opened in modal mode
  • Window can save and restore its size and position
  • Added an icon bar, displaying minimized or all windows
  • The icon bar can display a snapshot of a minimized window or an icon - a FrameworkElement attached to the window.

What's Inside

It would take too much time to explain how it works in details. I am sure, you (like me) don't like reading long boring documents. After all, you have my source code. I'd better describe how it can be used. But before we start, I'll introduce some terms and properties used in the library. The picture below will help me to illustrate them.

FloatingWindow Properties

Where the most important elements are:

  • FloatingWindow - Base class of the resizable windows
  • FloatingWindowHost - Canvas element containing floating windows
  • Iconbar - Panel containing icons of the minimized windows
  • Bootstrap Button - Button opening the Iconbar

Classes and their Members

This section contains a list of the most useful class members.

FloatingWindow Class

  • DialogResult - A value that indicates whether the FloatingWindow was accepted or canceled
  • FlowDirection - The direction that title text flows within window's icon
  • Icon - Content displayed as an icon of the window on the iconbar. If not specified - a snapshot of the window will be displayed as an icon
  • IconText - Text displayed on the icon of the minimized window
  • Position - Current window position
  • ResizeEnabled - A value indicating whether resizing is enabled
  • ResizingAreaThickness - The width of the resizing area
  • ShowInIconbar - A value indicating whether to show minimized window in the iconbar
  • ShowCloseButton - A value indicating whether to show Close button
  • ShowMaximizeButton - A value indicating whether to show Maximize button
  • ShowMinimizeButton - A value indicating whether to show Minimize button
  • Title - Content displayed on the top of the window. Can contain any UI elements
  • TitleBackground - The title background
  • Close - Closes a window
  • RestoreSizeAndPosition - Restores window size and position stored in the IsolatedStorage at the close of the window
  • RestoreWindow - Restores window state, size and its position if it was minimized or maximized
  • Show - Shows a window
  • ShowModal - Shows a window in modal mode
  • Activated - Window is activated and got focus
  • Closed - Window is closed
  • Closing - Window is closing
  • Deactivated - Window is deactivated
  • Maximized - Window is maximized
  • Minimized - Window is minimized
  • Restored - Window is restored

FloatingWindowHost Class

  • IconWidth - The width of the window's icon
  • IconHeight - The height of the window's icon
  • OverlayBrush - The overlay color
  • SnapinEnabled - A value indicating whether snap in is enabled
  • SnapinDistance - Distance between two windows' boundaries when moving window is "attracting" to another one
  • SnapinMargin - A gap between two adjacent windows
  • ShowMinimizedOnlyInIconbar - A value indicating whether to show only minimized windows in the iconbar
  • WindowIconWidth - The width of the iconbar item
  • WindowIconHeight - The height of the iconbar item
  • CloseAllWindows - Closes all floating windows
  • HideIconbar - Hides the iconbar
  • ShowIconbar - Shows the iconbar

Other properties can be found in the code.

Getting Started

The windows are "floating" in the FloatingWindowHost - a Canvas control, which shall be created first, for example, in the markup:

<my:FloatingWindowHost x:Name="host" 
    SnapinEnabled="True" ShowMinimizedOnlyInIconbar="False">
</my:FloatingWindowHost>

The next step - we shall add our windows to the host:

FloatingWindow window = new FloatingWindow();
window.Title = "New window";
host.Add(window);
window.Show();

Created window is hidden. The FloatingWindow class has three overloaded methods Show(). The first overload takes no parameters and displays the window in the center of the hosting container. The second and third overloads show the window in the specified coordinates.

There is another option: to restore window size and position saved when the window was closed. Don't worry about saving these parameters. They will be automatically stored in the IsolatedStorage at the close of the window if you specify a unique window's Tag. You can set it during runtime or in the XAML:

<my:FloatingWindow x:Class="FloatingWindowControl.DetailsForm"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:my="clr-namespace:SilverFlow.Controls;assembly=SilverFlow.Controls"
    Height="Auto" MinWidth="100" MinHeight="100"
    Title="Details" IconText="Details Form" Tag="Details">

Now you can call the RestoreSizeAndPosition() method to show the window in the previously saved coordinates:

detailsForm.RestoreSizeAndPosition();
detailsForm.Show(); 

In version 1.2, new ShowModal() method was added to display a floating window in modal mode. It blocks access to underlying windows displaying an overlay above them. The color of the overlay is defined by the OverlayBrush property.

Modal window

Like the ChildWindow it has a DialogResult property, which can be retrieved on windows closing:

FloatingWindow window = new FloatingWindow(); 
window.Title = "Confirmation"; 
host.Add(window); 
window.ShowModal(); 
window.Closed += (s, a) =>
    {
        bool? result = window.DialogResult;
    };  

The major distinction between the modal window and the ChildWindow is that the last one blocks access to the whole area occupied by the Silverlight application, while the floating window in modal mode - only parent FloatingWindowHost.

If you need to know which window becomes active (gets focus), you can subscribe to the Activated or Deactivated events added in the version 1.2.1 (see the MainPage.xaml.cs):

FloatingWindow window = new FloatingWindow();
host.Add(window);
window.Activated += (s, a) =>
    {
        Debug.WriteLine("Activated: {0}", window.IconText);
    };

Now windows are displayed and we can switch between them, move and resize. Selected window becomes topmost and gets focus. If we want a window to be displayed always above others, we can set its TopMost property to true.

Appearance of the window is defined in the generic.xaml file.

Honey, I Shrunk the Windows

When we move or resize a window, it sticks to the nearest boundaries. Maximal distance at which the window attracts to other windows is 5 pixels and is defined in the SnapinDistance property. If you don't like the windows sticking close to each other, you can specify non-zero SnapinMargin - a gap between adjacent windows. "Mind The Gap" as they say in London.

We can enable or disable resizing setting ResizeEnabled property. Besides, it is possible to disable resizing by one of the coordinates. For example, if we set window's MinWidth equals to its MaxWidth, the window can't be resized by the X coordinate.

Writing code for resizing, I created two interesting (at least for me) by-products: ResizeController and SnapinController. They are more or less independent from other parts of the code and I am going to use them in my other controls.

Dude, Where is my Window?

If we provide a possibility to minimize windows, we shall give quick access to them. And not only to minimized ones because some windows can be moved out of the visible area of the windows container. That's why I recommend to set ShowMinimizedOnlyInIconbar property to false.

The icon bar emerges each time when we press the bootstrap button at the bottom of the windows container and hides when we click on an icon. It contains windows' thumbnails ordered by the IconText. If you don't want to display a window's icon on the icon bar, set its property ShowInIconbar to false.

Window's thumbnail is displayed as a snapshot of the window if the Icon property is not set. Otherwise, the FrameworkElement set by the property will be displayed. For example, look at the markup of the WindowWithChart.xaml:

<my:FloatingWindow.Icon>
    <my1:MyIcon />
</my:FloatingWindow.Icon>

It defines the MyIcon UserControl as an icon of the window. Nice looking, isn't it? If you want to use an image as an icon, you shall specify its dimensions:

<my:FloatingWindow.Icon>
    <Image Source="Images/computer.png" Width="48" Height="48"></Image>
</my:FloatingWindow.Icon>

How to Add It to your Project

Here you have a short step-by-step instruction:

  1. Find the FloatingWindowTemplate.zip in the downloaded archive and copy the ZIP file to the ItemTemplates folder of your Visual Studio. On my machine, it is the "C:\Users\Eugene\Documents\Visual Studio 2010\Templates\ItemTemplates\Visual C#" folder.
  2. Add the SilverFlow.Controls.dll as a reference to your Silverlight project.
  3. Copy the resource dictionary generic.xaml from the SilverFlow.Controls project to your Silverlight project and add it to your application resources.
  4. Right-click on your Silverlight project, select "Add > New Item...", and select the FloatingWindow Control item template.
  5. Build the project.
  6. Add the FloatingWindowHost control to your page, hosting the "floating" windows. See the MainPage.xaml how to do that.
  7. Add a code, creating and displaying the "floating" windows.

Afterword

First, I would like to thank you all for your contribution, ideas, notes and critique. I do not promise to answer all your letters or implement all your proposals. After all, you are free to use and modify this code.

From time to time, I publish new versions of the FloatingWindow control on my site jevgenijpankov.heliocode.com.

If you create something interesting using this library, please write to me, and I'll publish links to your most impressive examples.

References

History

  • 24th October, 2010 - Initial version
  • 12th February, 2011 - Version 1.2
    • Fixed a few bugs
    • Reworked the Iconbar
    • Added modal mode
  • 12th May, 2011 - Version 1.2.1
    • Fixed some bugs
    • Added Activated and Deactivated events
    • Added RestoreSizeAndPosition method

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Jevgenij lives in Riga, Latvia. He started his programmer's career in 1983 developing software for radio equipment CAD systems. Created computer graphics for TV. Developed Internet credit card processing systems for banks.
Now he is System Analyst in Accenture.
Follow on   Twitter

Comments and Discussions

 
BugHowTo remove need to merge the generic.xaml with the app's ResourceDictionary PinmemberClipFlair admin27-Feb-14 23:35 
Suggestionissue at Close when isolated storage is disable at Silverlight settings dialog PinmemberGeorge I. Birbilis15-Oct-13 5:13 
QuestionDoes SilverFlow work on SL5? PinmemberMember 1030570329-Sep-13 19:14 
AnswerRe: Does SilverFlow work on SL5? PinmemberGeorge I. Birbilis15-Oct-13 5:02 
GeneralRe: Does SilverFlow work on SL5? PinmemberClipFlair admin19-Nov-13 23:34 
AnswerRe: Does SilverFlow work on SL5? PinmemberClipFlair admin16-Dec-13 10:15 
BugBe scrollpane friendly PinmemberGeorge I. Birbilis5-Aug-13 5:05 
BugApplication_Exit event at FloatingWindow shouldn't call Close PinmemberGeorge I. Birbilis5-Aug-13 4:55 
SuggestionFloatingWindow.Show change suggestion [modified] PinmemberGeorge I. Birbilis5-Aug-13 4:24 
BugOnMinimizeButtonStylePropertyChanged bug [modified] PinmemberGeorge I. Birbilis5-Aug-13 4:16 
BugRe: OnMinimizeButtonStylePropertyChanged bug [modified] PinmemberGeorge I. Birbilis5-Aug-13 4:17 
BugRe: OnMinimizeButtonStylePropertyChanged bug [modified] PinmemberGeorge I. Birbilis5-Aug-13 4:19 
QuestionNice! Pinmembervk00028-Mar-13 11:05 
QuestionHow to open a new floatingwindow in the host from a floatingwindow PinmemberJaggernaut29-Jan-13 0:16 
AnswerRe: How to open a new floatingwindow in the host from a floatingwindow PinmemberGeorge I. Birbilis5-Aug-13 2:05 
QuestionFonts problem PinmemberdtcDev17-Jan-13 20:24 
AnswerRe: Fonts problem PinmemberGeorge I. Birbilis5-Aug-13 4:36 
QuestionOne Smaill Question? Pinmembernhbcyz16-Jan-13 21:52 
AnswerRe: One Smaill Question? PinmemberClipFlair admin27-Feb-14 22:53 
QuestionRe: Scroll Bar PinmemberYazid2-Jan-13 11:44 
AnswerRe: Scroll Bar PinmemberGeorge I. Birbilis5-Aug-13 2:07 
Questionfloatingwindow and vs 2012 wpf designer bug Pinmembermolana79-Oct-12 9:35 
AnswerRe: floatingwindow and vs 2012 wpf designer bug PinmemberGeorge I. Birbilis5-Aug-13 4:39 
QuestionRe: floatingwindow and vs 2012 wpf designer bug Pinmemberandreyrf359-Sep-13 2:57 
AnswerRe: floatingwindow and vs 2012 wpf designer bug PinmemberGeorge I. Birbilis15-Oct-13 4:58 
QuestionRe: floatingwindow and vs 2012 wpf designer bug PinmemberMember 1035014021-Oct-13 11:26 
AnswerRe: floatingwindow and vs 2012 wpf designer bug PinmemberClipFlair admin19-Nov-13 23:30 
GeneralRe: floatingwindow and vs 2012 wpf designer bug PinmemberGeorge I. Birbilis20-Nov-13 1:54 
GeneralRe: floatingwindow and vs 2012 wpf designer bug PinmemberGeorge I. Birbilis13-Mar-14 21:32 
GeneralMy vote of 5 PinmemberThad Tilton9-Oct-12 8:12 
QuestionBootstrp Button not working PinmemberSantoshf223-Aug-12 2:56 
AnswerRe: Bootstrp Button not working PinmemberJevgenij Pankov23-Aug-12 18:52 
GeneralRe: Bootstrp Button not working PinmemberSantoshf223-Aug-12 19:11 
GeneralRe: Bootstrp Button not working PinmemberLuke Waldron19-Mar-13 3:50 
GeneralRe: Bootstrp Button not working PinmemberGeorge I. Birbilis5-Aug-13 4:42 
QuestionIs your site down? [modified] PinmemberJaggernaut25-Jun-12 1:18 
AnswerRe: Is your site down? PinmemberJevgenij Pankov25-Jun-12 4:19 
GeneralRe: Is your site down? PinmemberJaggernaut25-Jun-12 6:54 
QuestionHow to know if the current window is maximized? Pinmemberdharmbhav9-Jun-12 14:11 
AnswerRe: How to know if the current window is maximized? PinmemberGeorge I. Birbilis5-Aug-13 4:45 
GeneralRe: How to know if the current window is maximized? Pinmemberdharmbhav8-Aug-13 18:41 
QuestionOpen modal or floating window from a floating window PinmemberskwerlzU16-Apr-12 11:56 
AnswerRe: Open modal or floating window from a floating window PinmemberClipFlair admin27-Feb-14 22:55 
BugProblem in Microsoft Expression Blend [modified] Pinmembermehdi550u7-Apr-12 19:45 
GeneralRe: Problem in Microsoft Expression Blend PinmemberGeorge I. Birbilis13-Mar-14 21:33 
QuestionPositionChanged? Pinmembermiketgates7-Apr-12 10:39 
Is there an event to hook into when the position of a window changes?
QuestionMap Component Pinmemberonurbasal5-Apr-12 12:42 
SuggestionRe: Map Component PinmemberSamuli Neuvonen7-Jun-12 20:50 
GeneralRe: Map Component Pinmembermiri.eshel7-Jul-12 23:17 
GeneralRe: Map Component PinmemberSamuli Neuvonen27-Sep-12 23:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140902.1 | Last Updated 16 May 2011
Article Copyright 2010 by Jevgenij Pankov
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid