Martin Grayson: Adventures of a 'Devigner' : Controls

Animated Layout Panel (from the Blacklight Controls)

Martin Grayson — Fri, 20 Feb 2009 12:04:00 GMT

A video from Mike Parker, introducing the Animated Layout Panel control, found in Blacklight!

Blacklight v2.0 (Dec08) is here!

Martin Grayson — Fri, 05 Dec 2008 19:51:00 GMT

It has been a really busy November for me, however, the December release of Blacklight has arrived. This release contains tonnes of bug fixes, as well as some really cool new features.

Check out the the new showcase here.

Get the latest release code from here.

Some of the new fully customisable controls and features include...

GLASS BORDER

The glass border give a glossy effect either over the top of content or behind.

PERSPECTIVE SHADOW BORDER

The perspective shadow draws a shadow behind the border giving a feeling of perspective, as if the border is standing upright...

RADIAL SHADOW BORDER

The radial shadow border give the effect that the border and its contents are hovering off of the ground. The shadow width and vertical offset are all customisable enabling you to create a greater sense of depth.

ANIMATED LAYOUT PANEL

Mike Parker has provided his first control to the project - the AnimatedLayoutPanel. This panel allows incredible deep levels of configuration to achieve the exact effect you are looking for. This must be seen... (Thanks Mike!)

LOADING ANIMATION

The cute little control gives you something to display when buffering a video, downloading an image / deep zoom content, waiting on a web service etc. You can also set the content to be what ever you please!

Go check it out at www.codeplex.com/blacklight.

Thanks,

Martin

Silverlight 2 RTW, the Patient Journey Demonstrator and Blacklight

Martin Grayson — Fri, 17 Oct 2008 13:20:00 GMT

What a week! Silverlight 2 is here - horray! This release really feels like it has come out of nowhere.

First up - where to get the stuff...

Uninstall the old Silverlight runtimes, Silverlight tools for VS, Silverlight SDK and Blend 2 (any CTP).
Get VS2008 SP1 installed, if you havent already, from here... http://msdn.microsoft.com/en-gb/vstudio/cc533448.aspx
Install the Silverlight 2 tools chainer from here... http://www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&displaylang=en. This will install the RTW runtime, tools for VS and the Silverlight 2 SDK. It actually says RC1 on the page, but this is definately the RTW runtime.
Install Blend 2 from here... http://www.microsoft.com/expression/products/Overview.aspx?key=blend
Install the Blend 2 SP1 update from here... http://www.microsoft.com/downloads/details.aspx?FamilyId=EB9B5C48-BA2B-4C39-A1C3-135C60BBBE66&displaylang=en... and you are good to go!

I have been pretty busy over the last couple of weeks getting my 2 current project up to speed with RTW, and they are now available.

The Patient Journey Demonstrator has now been upgraded to Silverlight 2 RTW...

The current release of Blacklight (v0.1) has also been updated along with the showcase. There is also now a pre-release showcase, giving you a taste for what is coming at the end of October! Check-it out now...

Finally, my UX buddy, Dave Crawford, has updated his Glossy Control styles for the RTW of Silverlight 2. The are real nice, and now, everyone, demand more from Dave!!! See them running live here...

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

Martin Grayson — Fri, 29 Aug 2008 19:36:00 GMT

UPDATE: Get the latest Dragging, docking, expanding panel code from Blacklight, our new CodePlex project!

In Part 1, we looked at how we construct a Dragging, docking, expanding panel, and added the ‘dragging’ functionality by placing the panel in a Canvas. In Part 2 we looked at the host panel that controls the grid layout and the docking functionality. In this part, we are going to look at how we add the maximising functionality.

We will start with some additional code we need to add the DragDockPanel. The toggle button for toggling a panel’s maximised state is already in the template (see Part 1). We now need to get the toggle button out, and hook up the checked and unchecked events...

ToggleButton maximizeToggle =

this.GetTemplateChild("PART_MaximizeToggle") as ToggleButton;

if (maximizeToggle != null)

{

maximizeToggle.Checked +=

new RoutedEventHandler(maximizeToggle_Checked);

maximizeToggle.Unchecked +=

new RoutedEventHandler(maximizeToggle_Unchecked);

}

Next, we add a private variable that will be used as a flag to store whether a control was minimised by the toggle button, or minimised programmatically...

private bool ignoreUnCheckedEvent = false;

We now add a public member to get / set whether the panel is maximised or not.

private bool isMaximized = false;

public bool IsMaximized

{

get { return this.isMaximized; }

set

{

this.isMaximized = value;

ToggleButton maximizeToggle =

this.GetTemplateChild("PART_MaximizeToggle")

as ToggleButton;

if (maximizeToggle != null)

{

this.ignoreUnCheckedEvent = true;

maximizeToggle.IsChecked = this.isMaximized;

}

In the setter for IsMaximized, we store the value locally, and also update the toggle’s button checked state. This is where we use ignoreUnCheckedEvent. When we programmatically set the checked state of a toggle button, the Checked / UnChecked event is also raised from the button, so here we set a flag to say that we have programmatically set the property so we can ignore the next event that is raised.

Let’s take a look at the event handler for the toggle button’s checked event...

void maximizeToggle_Checked(object sender, RoutedEventArgs e)

{

// Bring the panel to the front

Canvas.SetZIndex(this, currentZIndex++);

this.ignoreUnCheckedEvent = false;

// Fire the panel maximized event

if (this.Maximized != null)

this.Maximized(this, e);

}

The handler firstly brings the panel to the front, sets the flag to false again, and finally fires the panel’s own Maximized event for the host to pick up and respond too.

The unchecked handler is similar...

void maximizeToggle_Unchecked(object sender, RoutedEventArgs e)

{

if (!this.ignoreUnCheckedEvent)

{

this.IsMaximized = false;

// Fire the panel minimized event

if (this.Minimized != null)

this.Minimized(this, e);

}

else

{

this.ignoreUnCheckedEvent = false;

}

Here, we check the flag, and if we don’t ignore the event, we set IsMaximized to false, and raise the panel’s own Minimized event. Otherwise we just reset the flag to false.

That’s it for DragDockPanel. Let’s take a look at DragDockPanelHost where we handle the layout rearranging...

Firstly, we add a private member to store the maximised panel...

private DragDockPanel maximizedPanel = null;

When a panel is maximised, the other panels move to a stack on the right hand side. We have a public property that allows you to set how wide you wish to make that stack...

private double minimizedColumnWidth = 250.0;

public double MinimizedColumnWidth

{

get { return this.minimizedColumnWidth; }

set { this.minimizedColumnWidth = value; }

}

In Part 2, in the DragDockPanelHost Loaded event handler, we hooked up the events necessary to handle the panel dragging. In the same place, we can add handlers to the panels’ minimised and maximised events...

panel.Maximized +=

new EventHandler(dragDockPanel_Maximized);

panel.Minimized +=

new EventHandler(dragDockPanel_Minimized);

The 2 handlers are quite simple - that bulk of the work takes place in our layout methods. The maximised handler looks like this...

void dragDockPanel_Maximized(object sender, EventArgs e)

{

DragDockPanel maximizedPanel =

sender as DragDockPanel;

// Store max'ed panel

this.maximizedPanel = maximizedPanel;

// Loop through children to disable dragging

foreach (UIElement child in this.Children)

{

DragDockPanel panel =

child as DragDockPanel;

panel.DraggingEnabled = false;

if (panel != this.maximizedPanel)

panel.IsMaximized = false;

}

// Update sizes and layout

this.AnimatePanelSizes();

this.AnimatePanelLayout();

}

When a panel is maximised, we keep a reference to the maximised panel, loop through all of the children disabling dragging, and setting all of the other panels IsMaximized property to false, and finally, updating the layout with the animating methods.

The minimised handler is very similar...

void dragDockPanel_Minimized(object sender, EventArgs e)

{

// Set max'ed panel to null

this.maximizedPanel = null;

// Loop through children to disable dragging

foreach (UIElement child in this.Children)

{

DragDockPanel panel =

child as DragDockPanel;

panel.DraggingEnabled = true;

}

// Update sizes and layout

this.AnimatePanelSizes();

this.AnimatePanelLayout();

}

We clear the reference to the maximised panel, and then loop through all of the children, re-enabling dragging. Finally, we update the layout using the animated methods.

Let’s take a look at the animated size and layout methods, firstly, AnimatePanelLayout.

private void AnimatePanelLayout()

{

// If we are not in max'ed panel mode...

if (this.maximizedPanel == null)

{

// Place panels in a grid...

}

else // If a panel is maximized...

{

// Layout the children with one panel maxmisised.

}

Firstly, we check to see if there is a maximised panel - if not, we use the code we already have to put them into a grid, if so, then we lay them out, with one maximised.

Something we need to consider here is that the panels may have been shuffled around, so they are no longer displayed in the same order that the host has them in the visual tree. So firstly, we need to get the current order of the panels, going left to right across rows, and down each row.

Dictionary<int, DragDockPanel> orderedPanels =

new Dictionary<int, DragDockPanel>();

// Loop through children to order them according to their

// current row and column...

foreach (UIElement child in this.Children)

{

DragDockPanel panel = (DragDockPanel)child;

orderedPanels.Add(

(Grid.GetRow(panel) * this.columns) +

Grid.GetColumn(panel),

panel);

}

Here we create a dictionary that stores an index of a panel, and the panel itself. The index is calculated using the panel’s row and column properties. This gives us the real position of the panel (in terms of a stacking order). Now we have the panels in order, we can loop through and position them.

// Set initial top of minimized panels to 0

double currentTop = 0.0;

// For each of the panels (as ordered in the grid)

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

{

// If the current panel is not the maximized panel

if (orderedPanels[i] != this.maximizedPanel)

{

// Animate the size

orderedPanels[i].AnimatePosition(

this.ActualWidth -

this.minimizedColumnWidth,

currentTop

);

// Increment current top

currentTop +=

this.ActualHeight /

(double)(this.Children.Count - 1);

}

else // If the current panel is the maxmized panel

{

// Animate it to 0,0

orderedPanels[i].AnimatePosition(0, 0);

}

The simple loop goes through each panel. If it’s not the maximised panel, it stacks it on the right hand side, and keeps track of the position in a variable currentTop. If the panel is the maximised panel, then we move it to 0,0.

That’s all that’s required to position the panels when one is maximised. Let’s take a quick look at the panel sizing.

private void AnimatePanelSizes()

{

// If there is not a maxmized panel...

if (this.maximizedPanel == null)

{

// Size to grid cells

...

}

else // If there is a maximized panel

{

// Size for a maximised panel.

}

You will see that first we check if there is a maximised panel - if not, we use the code we had before to size the elements for a grid. Otherwise we loop through children, giving the appropriate sizes.

foreach (UIElement child in this.Children)

{

DragDockPanel panel =

(DragDockPanel)child;

// Set the size of the non

// maximized children

if (panel != this.maximizedPanel)

{

panel.AnimateSize(

minimizedColumnWidth -

panel.Margin.Left -

panel.Margin.Right,

(this.ActualHeight /

(double)(this.Children.Count - 1)) -

panel.Margin.Top - panel.Margin.Bottom

);

}

else // Set the size of the maximized child

{

panel.AnimateSize(

this.ActualWidth -

this.minimizedColumnWidth -

panel.Margin.Left - panel.Margin.Right,

this.ActualHeight -

panel.Margin.Top - panel.Margin.Bottom

);

}

As we loop through the children, we check to see if the current panel is the maximised one - if it isn’t then we size the panel to fit on the stack on the right hand side, if it is, then we size the panel to fill the rest of the space. Cool.

The same logic is added to the UpdatePanelLayout method, but we won’t go through that here.

I have decided to do templating of the panels in a video, showing off Blend 2.5. That will be the final part of the Drag-Dock-Expanding panel sample. We will move onto something new after that!

Source code is available from www.codeplex.com/blacklight.

Check out a running sample here!

Martin

New Silverlight 2 Media Player for my blog!

Martin Grayson — Wed, 20 Aug 2008 15:36:00 GMT

UPDATE: Get the latest blog media player code from Blacklight, our new CodePlex project!

I have been meaning to start video blogging (vlogging) for some time. I think you can get stuff across far more simply that way. However, I hadn't gotten around to building a simple video player for hosting on my blog - well, problem solved. I finally got off my backside and made one.

I decided to make my first video blog on the media player itself, so sit back and enjoy.

Introducing the new Video Blog Media Player

You can download the video too.

The source code for the media player is available from www.codeplex.com/blacklight if you want to change / host it yourself. Thanks to Tim Sneath for giving the example on how to host Silverlight on your blog.

You could also point to where I have hosted the page (if you don't have hosting yourself) - however, I cannot guarantee the connection or that the MediaPlayer will be bug free.

The player is hosted on this page... http://mightymeaty.members.winisp.net/MediaPlayer/MediaPlayer.html

You need to pass in a source to activate the player - i.e. http://mightymeaty.members.winisp.net/MediaPlayer/MediaPlayer.html?mediaSource=http://silverlight.services.live.com/11264/vlog_200808/video.wmv.

Happy vlogging!

Martin

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

Martin Grayson — Mon, 18 Aug 2008 18:09:00 GMT

UPDATE: Get the latest Dragging, docking, expanding panel code from Blacklight, our new CodePlex project!

In Part 1, we looked at how we construct a Dragging, docking, expanding panel, and added the ‘dragging’ functionality by placing the panel in a Canvas. In this part, we are going to look at how we do the docking element.

Take a peek at the finished sample running, here.

The positioning and docking logic takes place in a host control, called DragDockPanelHost. This is a panel control, that derives Canvas, that positions the panels in a grid and then moves them around when the user is dragging DragDockPanel.

[But first, a small digression...]

Why derive Canvas and not Panel I hear you cry??? Dave Relyea posted a while back on why he doesn’t like Canvas. Whilst he makes some good points, I feel he missed a trick when it comes to considering Canvas for the type of layout we do here.

Deriving Panel gives you 2 methods - Measure and Arrange - tell the layout system how big you want to be, then layout your children. Simple for when you want your children to go to a specific place every time the layout updates. However, with our layout system, we are more complicated. We have panels that can be dragged, shuffled around, maximised etc. etc.

To do all of this by deriving Panel seemed difficult and cumbersome, however, when starting with Canvas, you have a superbly basic layout system, using absolute positioning and giving you animatable positioning properties. I didn’t need to worry about layout updated events at all, but just consume the custom events my panels raised.

Simple. I like Canvas for this kind of purpose. Please challenge me if you feel differently!

[Digression ends.]

OK. So first off, we create out class and derive from Canvas...

public class DragDockPanelHost : Canvas

{

#region Private members

// A local store of the number of rows

private int rows = 1;

// A local store of the number of columns

private int columns = 1;

// The panel currently being dragged

private DragDockPanel draggingPanel = null;

#endregion

#region Constructors

/// <summary>

/// Constructor

/// </summary>

public DragDockPanelHost()

{

this.Loaded +=

new RoutedEventHandler(DragDockPanelHost_Loaded);

this.SizeChanged +=

new SizeChangedEventHandler(DragDockPanelHost_SizeChanged);

}

#endregion

}

We also have some private variables that store the number of rows and columns (so we don’t have to recalculate every time) as well as the currently dragging panel. In the constructor, we hook up the Loaded events and SizeChanged events.

When we get the Loaded event, we do the work to calculate how may rows and columns we require (based on how many children the panel has), place each panel in a grid and row, and hook up some events from the panel.

(NOTE - we only do this in the Loaded event, meaning panels added later won’t be ‘hooked up’. Please check out the limitations section at the end of the post for more details on this.)

Firstly, we work out the number of rows. When placing the panels in a grid like layout, we try and lay them out in a square, giving preference to width over height (as most resolutions are 4:3 or wider). Let me give you an example...

If we had 6 panels, we would have 2 rows with 3 panel in each row, rather than 3 rows with 2 panels in each. If we had 8 panels, we would have 2 rows with 4 panels in each. If we had 9 panels, we would have 3 rows, with 3 panels in each.

To work out the rows, we take the square root of the number of children, and round it down.

Once we know how many rows we have, we can work out how many columns are required...

// Calculate the number of rows and columns required

this.rows =

(int)Math.Floor(Math.Sqrt((double)this.Children.Count));

this.columns =

(int)Math.Ceiling((double)this.Children.Count / (double)rows);

We then loop through the rows and columns, assigning each panel a row and column, and hooking up the panels events...

int child = 0;

// Loop through the rows and columns and assign to children

for (int r = 0; r < this.rows; r++)

{

for (int c = 0; c < this.columns; c++)

{

DragDockPanel panel = this.Children[child] as DragDockPanel;

// Set starting row and column

Grid.SetRow(panel, r);

Grid.SetColumn(panel, c);

// Hook up panel events

panel.DragStarted +=

new DragEventHander(dragDockPanel_DragStarted);

panel.DragFinished +=

new DragEventHander(dragDockPanel_DragFinished);

panel.DragMoved +=

new DragEventHander(dragDockPanel_DragMoved);

child++;

// if we are on the last child, break out of the loop

if (child == this.Children.Count)

break;

}

// if we are on the last child, break out of the loop

if (child == this.Children.Count)

break;

}

You will see that we actually use the Grid.Row and Grid.Column attached properties to record the row and column, even though the panels aren’t actually in a Grid control. We couldn’t think of a reason why this would be bad!

There are 3 layout methods in DragDockPanelHost - UpdatePanelLayout, AnimatePanelSizes, AnimatePanelLayout. The first sets the child panels size and positions without animation, the other two animate the sizes and positions respectively, using AnimateSize and AnimatePosition (from the AnimatedContentControl base class).

Let’s look at UpdatePanelLayout...

private void UpdatePanelLayout()

{

// Layout children as per rows and columns

foreach (UIElement child in this.Children)

{

DragDockPanel panel = (DragDockPanel)child;

Canvas.SetLeft(

panel,

(Grid.GetColumn(panel) *

(this.ActualWidth / (double)this.columns))

);

Canvas.SetTop(

panel,

(Grid.GetRow(panel) *

(this.ActualHeight / (double)this.rows))

);

panel.Width =

(this.ActualWidth / (double)this.columns) -

panel.Margin.Left - panel.Margin.Right;

panel.Height =

(this.ActualHeight / (double)this.rows) -

panel.Margin.Top - panel.Margin.Bottom;

}

In this method, we loop through the children in the host, setting the position and size of each panel. To set the position, we get the column and row the panel sits in, and multiply by the size of the host over the number of columns and rows.

For the size, we set the width and height to be the size of the host over the number of columns or rows and subtracting any margin the panel has.

The UpdatePanelLayout method is called every time the host changes size...

void DragDockPanelHost_SizeChanged(

object sender, SizeChangedEventArgs e)

{

this.UpdatePanelLayout();

}

So, we now have our grid layout, and as the host resizes, the panels will stay in position.

Next, let’s deal with the dragging / docking.

In the loaded event, we hooked up 3 events for each of the panels - DragStarted, DragFinished and DragMoved. These are the 3 events that tell the host when a panel is being dragged about and when it has been dropped.

The handlers for DragStarted and DragFinished are very simple...

void dragDockPanel_DragStarted(object sender, DragEventArgs args)

{

DragDockPanel panel = sender as DragDockPanel;

// Keep reference to dragging panel

this.draggingPanel = panel;

}

In DragStarted we just keep a reference to the panel that is being dragged.

void dragDockPanel_DragFinished(object sender, DragEventArgs args)

{

// Set dragging panel back to null

this.draggingPanel = null;

// Update the layout (to reset all panel positions)

this.UpdatePanelLayout();

}

In DragFinished, we clear the reference the dragging panel and call UpdatePanelLayout to reset all of the panels to their current position and size.

The smart stuff happens in the DragMoved event. This handler is called every time the mouse moves when a panel is being dragged. It works out the position of the mouse (which row and column it’s in), whether there is a panel in that row and column (that is not the panel being dragged), and if so, slides that panel into the available space. Lets look at the handler...

void dragDockPanel_DragMoved(object sender, DragEventArgs args)

{

...

}

First thing worth noting is the argument type - DragEventArgs. These event arguments contain the source mouse event arguments for getting the position. We use these arguments to work out which row and column we are in (using the same logic we used to position the panels in UpdatePanelLayout)...

Point mousePosInHost =

args.MouseEventArgs.GetPosition(this);

int currentRow =

(int)Math.Floor(mousePosInHost.Y /

(this.ActualHeight / (double)this.rows));

int currentColumn =

(int)Math.Floor(mousePosInHost.X /

(this.ActualWidth / (double)this.columns));

Once we know what column and row the mouse is in, we can loop through the children and work out which panel is in that row and column. If it’s not the panel being dragged, we store it.

// Stores the panel we will swap with

DragDockPanel swapPanel = null;

// Loop through children to see if there is a panel to swap with

foreach (UIElement child in this.Children)

{

DragDockPanel panel = child as DragDockPanel;

// If the panel is not the dragging panel and is in the current row

// or current column... mark it as the panel to swap with

if (panel != this.draggingPanel &&

Grid.GetColumn(panel) == currentColumn &&

Grid.GetRow(panel) == currentRow)

{

swapPanel = panel;

break;

}

Finally, if we found a panel to swap with, we swap the row and column for it with the dragging panel’s row and column and animate the all the panels to their new positions...

// If there is a panel to swap with

if (swapPanel != null)

{

// Store the new row and column

int draggingPanelNewColumn = Grid.GetColumn(swapPanel);

int draggingPanelNewRow = Grid.GetRow(swapPanel);

// Update the swapping panel row and column

Grid.SetColumn(swapPanel, Grid.GetColumn(this.draggingPanel));

Grid.SetRow(swapPanel, Grid.GetRow(this.draggingPanel));

// Update the dragging panel row and column

Grid.SetColumn(this.draggingPanel, draggingPanelNewColumn);

Grid.SetRow(this.draggingPanel, draggingPanelNewRow);

// Animate the layout to the new positions

this.AnimatePanelLayout();

}

The AnimatePanelLayout method is almost the same as UpdatePanelLayout, only, it just updates the panels positions, and uses AnimatePosition rather than setting directly...

private void AnimatePanelLayout()

{

// Loop through children and size to row and columns

foreach (UIElement child in this.Children)

{

DragDockPanel panel = (DragDockPanel)child;

if (panel != this.draggingPanel)

{

panel.AnimatePosition(

(Grid.GetColumn(panel) *

(this.ActualWidth / (double)this.columns)),

(Grid.GetRow(panel)

* (this.ActualHeight / (double)this.rows))

);

}

And there we have it - dragging, docking panels. We are now ready to use this on our page. In part one, where we previously had 6 panels in a canvas, we can replace the canvas with our DragDockPanelHost...

<local:DragDockPanelHost Margin="50">

<local:DragDockPanel Margin="10">

</local:DragDockPanel>

<local:DragDockPanel Margin="10">

</local:DragDockPanel>

<local:DragDockPanel Margin="10">

</local:DragDockPanel>

<local:DragDockPanel Margin="10" >

</local:DragDockPanel>

<local:DragDockPanel Margin="10">

</local:DragDockPanel>

<local:DragDockPanel Margin="10" >

</local:DragDockPanel>

</local:DragDockPanelHost>

The result should look like this...

Experiment with resizing your browser, dragging the panels around, and, adding more panels to the UI!

I mentioned earlier on that there is a limitation with this implementation of DragDockPanelHost... we can’t add new panels dynamically at run-time. This could be worked around by creating an Add method that will place the child in the visual tree, add an addition row / column is required, hook up the events and update the layout, however, if a consumer of the control attempted to add a child using the panels Children.Add(...) then this would go ignored. I had thought about designing this control as an ItemsControl, but wanted to keep this example simple, and focus on the layout, however, and ItemsControl would be a good solution, allowing you to be notified when a child is added the collection.

I would be more than interested to hear people’s ideas about how this could be done cleanly!

I hope you have enjoyed this post - watch out for Part 3 which will deal with Maximising panels and creating new templates J

As always, source code is at www.codeplex.com/blacklight.

Martin

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

Martin Grayson — Fri, 01 Aug 2008 20:28:00 GMT

UPDATE: Get the latest Dragging, docking, expanding panel code from Blacklight, our new CodePlex project!

NOTE: Part 2 and Part 3 now posted, with a demo of the final sample here.

A control that we used in a number of places in the MSCUI Patient Journey Demonstrator was the dragging, docking, expanding panel control. When designing the dashboards in the application, we wanted to create an experience that was customisable, fun to use and allowed the user to focus in on the important information when they needed it.

The shots below show panels in action...

The controls provide the following...

· Automatic grid layout of panels

· Picking up and moving panels around and changing their position in the grid (dragging and docking)

· ‘Maximising’ a panel causing the panel to take up much more space, whilst the others stack up on the right hand side of the application

As we used the panels in a number of places, building them for re-use was a big priority too. In this article, I will show how to build a similar customisable layout system.

There are 2 parts to the DragDockPanel system. The DragDockPanel itself (the thing you pick up and drag around) and the container for multiple DragDockPanel’s - I call it DragDockPanelHost. We will look at DragDockPanel today, and have it working just in a regular Canvas, and the host container in Part 2.

As a panel needs to contain something, it made sense for DragDockPanel to extend ContentControl. However, I also want DragDockPanel to have to easy methods to animate size and position, so I actually inherit AnimatedContentControl (a custom control that generates size and position animations and methods - see Silverlight 2 Samples: Animating controls).

As we are extending AnimatedContentControl, we also need to create a template in XAML for the control. The great thing about templates is that they allow a designer / developer to define the building blocks and visuals for a control. The only thing we need to ask of them is that they include a couple of specifically named elements, so that we can implement the functionality. For DragDockPanel, there are 3 things a designer / developer need to include in the template to get the full functionality of the panel...

· A ContentPresenter control - as we are extending ContentControl (via AnimatedContentControl) we need a ContentPresenter in the template to be the site of the panel’s content

· An element named “PART_GripBar” - this is the portion of the panel that allows the user to pick up the panel and drag it around

· A ToggleButton control (which could also be a CheckBox or RadioButton) named “PART_MaximizeToggle” - this is the button that when clicked, the panel will either maximize or collapse

When writing the code behind for the control, the developer has the choice to implement none, some or all of the above. There would obviously be missing functionally, however, if they don’t include, say, the grip bar - they would not be able to drag the panel around.

Below shows a style with an outline template (included in the attached sample) with the above parts included...

<Setter.Value>

<Grid>

<Border CornerRadius="3,3,3,3"

Background="#ffffffff"

BorderBrush="#ff999999"

BorderThickness="1"

Padding="2">

<Grid>

<!--

Element named PART_GripBar for

handling the dragging of the panel

-->

<Border x:Name="PART_GripBar"

Background="#7fffffff"

VerticalAlignment="Top"

Height="30" Cursor="Hand">

...

</Border>

<ToggleButton x:Name="PART_MaximizeToggle"

VerticalAlignment="Top"

HorizontalAlignment="Right"

Margin="0,5,5,0" Width="20" Height="20"

Cursor="Hand"

</Grid>

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

You will find the above style in generic.xaml in the attached project. Placing the style in generic.xaml means that this will be the default style for DragDockPanel. Using the XAML shown below, we can now put a panel on the page, with a media element inside...

<local:DragDockPanel>

</local:DragDockPanel>

The result...

You can see that the panel contains a video, with a grip bar and maximize button across the top of the panel. Great. Lets get it moving around the screen...

First things first, we need to get hold of the elements in the template so we can hook up the mouse events. When creating a custom control, you can override a method - public override void OnApplyTemplate() - which is called as soon as the template is applied to your control. You can then use this.GetTemplateChild("PART_ElementName") to get your elements out, and hook up events. I have mentioned before that we needed to have specially named elements in the default template in generic.xaml - this is why. Our override in DragDockPanel looks like this...

public override void OnApplyTemplate()

{

base.OnApplyTemplate();

FrameworkElement gripBar =

this.GetTemplateChild("PART_GripBar") as FrameworkElement;

if (gripBar != null)

{

gripBar.MouseLeftButtonDown +=

new MouseButtonEventHandler(gripBar_MouseLeftButtonDown);

gripBar.MouseMove +=

new MouseEventHandler(gripBar_MouseMove);

gripBar.MouseLeftButtonUp +=

new MouseButtonEventHandler(gripBar_MouseLeftButtonUp);

}

Here, we are pulling out the grip bar into a private member, and hooking up some events.

For the grip bar, I hook up the MouseLeftButtonDown, MouseMove, MouseLeftButtonUp. I need these to move the panel about when the grip bar is dragged.

The MouseLeftButtonDown simply checks to see if dragging is enable on this panel (another private member), we then bring the panel to the front (setting the ZIndex), capture the mouse, store the current position, flag that we are dragging, and then raise an event to say the panel has started to be dragged.

void gripBar_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

if (this.draggingEnabled)

{

// Bring the panel to the front

Canvas.SetZIndex(this, currentZIndex++);

// Capture the mouse

((FrameworkElement)sender).CaptureMouse();

// Store the start position

this.lastDragPosition = e.GetPosition(sender as UIElement);

// Set dragging to true

this.isDragging = true;

// Fire the drag started event

if (this.DragStarted != null)

this.DragStarted(this, new DragEventArgs(0, 0, e));

}

Our MouseMove firstly checks to see if we are dragging (i.e. if the mouse is down), we then use the last position variable to calculate the panels new position. We then set Canvas.Left and Canvas.Top which moves the panel within a Canvas.

Finally, we fire an event to say the panel has moved, and store the last position again.

void gripBar_MouseMove(object sender, MouseEventArgs e)

{

if (this.isDragging)

{

Point position = e.GetPosition(sender as UIElement);

// Move the panel

Canvas.SetLeft(

this,

Canvas.GetLeft(this) + position.X - this.lastDragPosition.X

);

Canvas.SetTop(

this,

Canvas.GetTop(this) + position.Y - this.lastDragPosition.Y

);

// Fire the drag moved event

if (this.DragMoved != null)

this.DragMoved(

this,

new DragEventArgs(

position.X - this.lastDragPosition.X,

position.Y - this.lastDragPosition.Y, e));

// Update the last mouse position

this.lastDragPosition = e.GetPosition(sender as UIElement);

}

In MouseLeftButtonUp we simple release mouse capture, set the dragging flag to false, and raise an event to say the dragging has finished.

void gripBar_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

{

if (this.draggingEnabled)

{

// Capture the mouse

((FrameworkElement)sender).ReleaseMouseCapture();

// Set dragging to true

this.isDragging = false;

Point position = e.GetPosition(sender as UIElement);

// Fire the drag finished event

if (this.DragFinished != null)

this.DragFinished(

this,

new DragEventArgs(

position.X - this.lastDragPosition.X,

position.Y - this.lastDragPosition.Y, e));

}

And that’s it! We can now drag our panel around a canvas, bringing it to the front with each mouse down action. On the project page, you can use the panels in a canvas like so...

<local:DragDockPanel Width="400" Height="300">

</local:DragDockPanel>

<local:DragDockPanel Width="400" Height="300">

</local:DragDockPanel>

<local:DragDockPanel Width="400" Height="300">

</local:DragDockPanel>

<local:DragDockPanel Width="400" Height="300" >

</local:DragDockPanel>

<local:DragDockPanel Width="400" Height="300">

</local:DragDockPanel>

<local:DragDockPanel Width="400" Height="300" >

</local:DragDockPanel>

</Canvas>

The result should look like this (after you drag the panels about a bit!)

Take a look at the sample running here.

In part 2 we will look at how to arrange the panels automatically into a grid, move and shuffle the panels around, maximise / minimise panels and also how to deal with any amount of panels on the screen.

Source code is available from www.codeplex.com/blacklight.

Enjoy J

Silverlight 2 Samples: Animating Controls

Martin Grayson — Mon, 23 Jun 2008 17:16:00 GMT

UPDATE: Get the latest animating control code from Blacklight, our new CodePlex project!

Whilst developing the MSCUI Patient Journey Demonstrator, we made use of animation in a number of places to show how the user interface is moving and adapting to the user tasks. Animation is a great tool for showing users how the application changes, allowing them to watch how the content changes size and position, without it ‘clunking’ into place and the user losing sight of everything.

I wanted to create an animation system that allowed us to consistently change a controls size and position, with animation, that was very easy and natural to work with in code. Something I wanted to prevent was the need to duplicate storyboard XAML for each and every control that we wanted to animate.

The approach I decided to take was to create a new class that extended Control- called AnimatedControl. The new class would ultimately add 2 public methods to Control:

· public void AnimateSize(double width, double height)

· public void AnimatePosition(double x, double y)

...as well as some additional properties that would allow me to change the duration of the animations.

AnimatedControl works by creating a Canvas in the AnimatedControl constructor which contains a Rectangle and 2 storyboards. The Canvas is created using a XAML string and XamlReader.Load(...). The XAML string used is shown below...

<!--

Canvas containing rectangle for control animation

-->

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

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

<Canvas.Resources>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="animatedElement"

Storyboard.TargetProperty="(FrameworkElement.Width)">

<SplineDoubleKeyFrame Value="0"

KeyTime="00:00:0.5"

KeySpline="0.528,0,0.142,0.847" />

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="animatedElement"

Storyboard.TargetProperty="(FrameworkElement.Height)">

<SplineDoubleKeyFrame Value="0"

KeyTime="00:00:0.5"

KeySpline="0.528,0,0.142,0.847" />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="animatedElement"

Storyboard.TargetProperty="(Canvas.Left)">

<SplineDoubleKeyFrame Value="0"

KeyTime="00:00:0.5"

KeySpline="0.528,0,0.142,0.847" />

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="animatedElement"

Storyboard.TargetProperty="(Canvas.Top)">

<SplineDoubleKeyFrame Value="0"

KeyTime="00:00:0.5"

KeySpline="0.528,0,0.142,0.847" />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

<Rectangle x:Name="animatedElement"

Height="0" Width="0"

Canvas.Top="0" Canvas.Left="0" />

</Canvas>

Once the Canvas has been created, the important elements are fished out and stored in private members. The code below shows creating the canvas from the XAML string below, storing a reference to the storyboards and finally hooking up their completed events...

// Create a canvas from the XAML

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

// Pull out the rectangle into a memeber

this.animatedElement = animatedElement.Children[0] as Rectangle;

// Pull out the storyboards into a member and hook up completed events

this.sizeAnimation = animatedElement.Resources["sizeStoryboard"]

as Storyboard;

this.sizeAnimation.Completed += new EventHandler(sizeAnimation_Completed);

this.positionAnimation = animatedElement.Resources["positionStoryboard"]

as Storyboard;

this.positionAnimation.Completed += new EventHandler(positionAnimation_Completed);

When AnimateSize or AnimatePosition is called on the control, the corresponding storyboard is kicked off in the Canvas, changing the properties of the rectangle. At the same time, a DispatcherTimer is started that ticks ‘as quickly as possible’ to update the controls size and position to match that of the rectangles, as shown below...

void timer_Tick(object sender, EventArgs e)

{

// If the size is animating, update the controls size

if (this.sizeAnimating)

{

this.Width = this.animatedElement.Width;

this.Height = this.animatedElement.Height;

}

// If the position is animating, update the control position

if (this.positionAnimating)

{

Canvas.SetLeft(this, Canvas.GetLeft(this.animatedElement));

Canvas.SetTop(this, Canvas.GetTop(this.animatedElement));

}

Now with each tick of the timer, the controls size and position will animate. When the size and position animations have both completed, the timer will stop ticking.

There are some requirements and limitations with my AnimatedControl that I have listed here, but I have suggested some additions too...

· The Position animation only changes the Canvas.Left and Canvas.Top properties. So, if you control is not in a Canvas (or a panel that derives Canvas), it won’t move. AnimatedControl could indeed be extended however, to animate the controls render transform to move it if it is not in a Canvas...

· AnimatedControl currently extends Control, so if you wanted an AnimatedControl that extends ContentControl, or UserControl, you would need to copy the code over to a new class - updating then becomes a pain.

· AnimatedControl only supports one KeyFrame at the moment. Again, this could be updated by adding and removing key frames in the AnimateSize / AnimatePosition methods.

· You can of course extend AnimatedControl to animate more properties such as Opacity, ScaleTransform, Background color etc.

I have attached a project here that very simply, shows AnimatedControl working on some basic controls (just rectangles really!). You can also see the example project running here.

Please enjoy and feedback any additions, bugs etc.

Thanks,

Martin

Brand New Silverlight 2 Application: Healthcare Demonstrator

Martin Grayson — Wed, 07 May 2008 20:49:00 GMT

I have been fairly quiet for the last few months, and one of the reasons is that I have been working on a Silverlight 2 application, showcasing some future thinking for rich UI in the healthcare space.

The Microsoft Health Common User Interface: Patient Journey Demonstrator is the result of work from a very small team based here in the UK, and we think, is a great example of a Rich Internet Application demonstrating an LOB scenario, but using the power of Silverlight to provide beautiful, meaningful ways of representing incredibly complex data.

The blurb from the site...

‘The Microsoft Health Common User Interface (MSCUI) Patient Journey Demonstrator is a vehicle for Microsoft thought leadership in state-of-the-art User Experience for Healthcare applications. It provides exemplar implementations of Microsoft Common User Interface guidance on a Microsoft platform.

It is our showcase for new ideas, experimentation and an artefact for learning and thinking about future developments of the MSCUI program.’

The demonstrator is actually broken up into 3 separate applications, describing the ‘day-in-the-life’ of a patient from the perspective of a primary care administrator, a GP, and a registrar in a hospital. The UI is completely interactive and you are able to explore, manipulate, layer and scale the patient’s data to create rich visualisations.

Over the next couple of months, I want to blog about some of the things we have built here, how we did it, share snippets of code, and talk more about how we are developing it further.

Some of the cool things in Silverlight 2 that we are already using include (but are not limited to J)...

· Deep zoom to view complex ECG (electrocardiogram) data

· Intelligent, scaling layout

· Data-binding everywhere

· Animation and media

· Vector graphics enabling real time manipulation of chart data

A video covering some of this is in the pipeline, so watch this space!

Big thanks to the team invloved in building this...

Kirsten Disse - lead UX designer
Sergei Golubev - Silverlight UI developer
Joe Wardell - Silverlight UI developer
Neil Ashley & Tinisha Rocca - visual designers
Alam Rahman - lead test

In the mean time, head over to the site and please share any feedback / ideas either here or on our CodePlex discussion board here.

Martin

NOTE FOR USERS OUTSIDE OF THE UK:-

A few users outside of the UK are experience a bug with the Primary Care and Secondary Care demonstrators. The symptom is when they try to launch the either of these demonstrators, they see our default error dialogue stating: "This application has encountered a problem and needs to close. Please, try restarting it. Sorry for any inconvenience."

We have identified that the problem is due to current 'Regional and Language' settings. The reason is because we do various things with the formatting of dates, but have only extensively tested with the UK date format. We have now logged the issue and are aiming to release the demonstrator with the fix when Silverlight 2 Beta 2 ships.

There is a workaround though in the meantime. You can access the second parts of the demonstrator by changing you current language format to 'English (United Kingdom)'. You can access this in Windows Vista via...

Control Panel -> Regional and Langauge Options -> Formats (tab) and selecting 'English (United Kingdom)' from the drop-down.

Many thanks again, and please keep the feedback coming.

Fish Eye for the Blend Guy

Martin Grayson — Mon, 26 Feb 2007 15:32:00 GMT

Thought I would share a panel that I and one of my dev friends, Paul Tallett created a while back. I also wanted o show you how you can use it in Blend.

A while back, we wanted to create a panel that would scale up its contents depending how close the mouse pointer was - however - we didn't want the panel to take up anymore width - tricky. This neat effect is similar to the Fish Eye effect, similar to the list of words on 10x10.org. The only difference was, we actually scale down the items furthest away from the mouse, ensuring the panel doesn't require any extra width.

Paul took this spec and created the code for the custom panel (you can read the full development article here) and then handed me a file called FishEyePanel.cs. From here, it was really easy to use in my Blend project. I have attached a .zip file to this post containing an example project and the FishEyePanel.cs file - and so, here are the steps to use a custom panel in your Blend project...

With your Blend project open, go to the Project menu at the top, and click 'Add existing item...'
Now, browse to FishEyePanel.cs, and click 'Open' (you will see in your Project tab that the panel has been added
Go back to the Project menu, and select 'Rebuild Project'
The panel is now ready to use - simply open up the Asset Library from the bottom of the tool box, click on the CustomControls tab and hey presto - you will see the FishEyePanel in there, and ready to use.
Select it and then pop one onto your UI, then put stuff in.

Thing to remember, is that the FishEyePanel is very size aware, and will always scale its contents to fit its space. There are also a couple of properties you can play with found in the Miscellenous properties panel...

AnimationMilliseconds will change the responsiveness of the panel, and magnification will change how large the items scale up by.

Please have a play with the panel, feedback, and let me know if you have created any wack custom panels - would be great to start sharing these with everyone!

Martin

Creating a Glass Button: The Complete Tutorial

Martin Grayson — Fri, 16 Feb 2007 18:33:00 GMT

Well, it was a while back that I posted the first Creating a Glass button tutorial. Of course, that was based on the old look of Sparkle, and I have had some feedback recently that the project doesn't run anymore. Also, the completed tutorial never 'made it to press' leaving people with a rather lifeless button.

Well folks - GREAT NEWS - I have finished working on a all new glass button. And what better design to follow than some of the glass buttons in our shiny new OS.

The Windows Vista taskbar has some real nice buttons - they are see through and have an internal glow. So, I though I would base my all new complete glass button tutorial on these babies. I also hope there is enough content in the tutorial to help you explore other designs and other controls.

So, attached to this post are the full instructions for creating the buttons above. I have also attached the finished project if you want to explore what I have done.

This has been a while coming, so please enjoy!

Creating a Glass Button - PART ONE

Martin Grayson — Mon, 22 May 2006 20:23:00 GMT

PLEASE SEE THE UPDATED TUTORIAL HERE

Alot of people ask, when it comes to WPF, how do I make my app look cool?

WPF allows to fully customise the look and behaviour of all the common controls - this means a button no longer needs to be represented by a grey rectangle, or a radio button no longer needs to be represented by a round bullet.

All controls in WPF are lookless.

The image below shows the final output of what we will produce...

So, I have attached the tutorial and source code to this post... go fourth and build. Drop any comments if you have any problems and i will get back you with answers.

Martin

Martin Grayson: Adventures of a 'Devigner' : Controls

Animated Layout Panel (from the Blacklight Controls)

Blacklight v2.0 (Dec08) is here!

Silverlight 2 RTW, the Patient Journey Demonstrator and Blacklight

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

New Silverlight 2 Media Player for my blog!

Introducing the new Video Blog Media Player

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

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

Silverlight 2 Samples: Animating Controls

Brand New Silverlight 2 Application: Healthcare Demonstrator

More Video Tutorials

Fish Eye for the Blend Guy

Creating a Glass Button: The Complete Tutorial

Creating a Glass Button - PART ONE