Martin Grayson: Adventures of a 'Devigner'

Blacklight v4.1 Update Released

Martin Grayson — Fri, 24 Jul 2009 11:48:04 GMT

A few bugs have been identified with DragDockPanelHost, as well as one or two expected features missing, so I have created a fixed release that addresses the following…

Between v3.0 and v4.0, the PanelState property on the DragDockPanel became read-only, due to some toggling issues. This has caused issues with setting the default panel state in XAML. This property has been made writable again.
Now that DragDockPanel host is an ItemsControl, users could load any object type as an item. However, in v4.0, it was not possible to define a default panel style. A property called DefaultPanelStyle has been added to DragDockPanelHost.
Since becoming an ItemsControl, the DragDockPanelHost had a number of bugs introduced with adding and removing panels, after they had been moved around. These bugs have now been fixed.

I have also updated the Showcase to contain a release notes section, which will give more details as to what has changed with each release.

See the showcase here.

Get the latest release here.

Enjoy!

Blacklight v4 for Silverlight 3 Released

Martin Grayson — Mon, 20 Jul 2009 12:28:11 GMT

It has been a short while since our last Blacklight release (March ‘09), however, I am pleased to say that we are back up and running, and have a brand new release for you.

Want to get straight to the good stuff?

See the latest showcase here.

Get the latest release binaries and source here.

This release addresses 5 main items:

Upgrade of Blacklight source and binaries to Silverlight 3
Addition of new controls – RangeSlider and WatermarkedTextBox– details below
Upgrade of DragDockPanelHost to be an ItemsControl, allowing full data binding support, and support for hosting elements that are not DragDockPanels.
Numerous bug fixes, especially with the DragDropPanel controls in both Silverlight and WPF. Some of these fixes did involve some very basic API changing.
Update of Blacklight Showcase.

Blacklight, with this release is no longer supporting Silverlight 2 – that was sooooo last month. However, nothing has been implemented in this release that takes advantage of new SL3 features, so, the code will still run fine for SL2.

Range Slider

The range slider control is a ‘double headed’ slider control that allows the user to select a range of values. I have used similar controls in a number of projects, but came up with a nice generic implementation here.

Watermarked Text Box

A text box which allows you to place a watermark inside that will display when there is no text, and the control doesn’t have focus.

And finally…

We have plenty of new controls in the pipeline, and future versions will begin to take advantage of the new SL3 capabilities – so stay tuned! Please keep the feedback coming in!

Martin

Blacklight UPDATE – returning in the new FY (July ‘09)!

Martin Grayson — Fri, 19 Jun 2009 18:35:55 GMT

It has been a little while since I last posted, and a little longer since I was last able to provide an update to the Blacklight project. This short post is just to give an update on where we are, and when the next big release can be expected.

First off, Blacklight has been a pleasure to work on so far, and I love all the great feedback and ideas the community has been generating. It is, however, something that we do in our ‘spare time’, and as such, we have found that a new release every month has been a stretch, and certainly with the new focus that we have applied to our day jobs, what with the economy, etc...

The good news, though, is we are nearing the end of our financial year, and from July, Blacklight updates will resume. I will definitely be making it one of my commitments for the year.

The format will more likely follow a big release every 3 months, with fixes and patches in between when possible. This will enable the team to deliver a far better quality product.

In the mean time, the discussion boards are full of patches, fixes and improvements to the existing controls, so if you are happy to play with the source, there is a lot there.

Thanks again for supporting the project, and watch this space in July!

blacklight v3.0 (Mar09) released!

Martin Grayson — Fri, 06 Mar 2009 18:37:22 GMT

After a ‘short delay’, V3.0 of the Blacklight controls are here! Thank very much for you patience with this release.

The showcase will be updated very shortly for you to see all of the controls in action!

Get the latest release here!

As always, here are the highlights for this release…

BRAND NEW ‘BLACKLIGHT CONNECTED’ CONTROLS

We have focused on providing controls that allow designers to start adding rich data and content to their application, without the need for code. This release sees 3 such controls: LiveSearchListBox, SyndicationFeedListBox and DeepZoomViewer!

Live Search List Box

The Live Search List Box provides Live Search functionality. The XAML below shows how to incorporate this control – no C# required!

The Live Search List Box links to the search text box, and buttons by passing in their names. Simple! Get an application ID from dev.live.com right now to get going!

Syndication Feed List Box

The Syndication Feed List Box makes it very simple to include RSS feeds into your application.

Deep Zoom Viewer

The Deep Zoom Viewer provides a drag and drop control that displays deep zoom images and give you all the interactivity required to navigate around, including mouse wheel support!

OTHER NEW BITS

Animated Expander

The Animated Expander is a control provides the ability to expand and collapse UI elements with an animation.

Updated Showcase Navigation

As more controls became available, we have reshuffled the showcase navigation to make it easier to find the control you are after…

FINALLY…

The project has had a BIG structural overhaul, and some namespace changes. This could result in some breaking changes in you application. Please use the codeplex discussion boards for further assistance.

The overhaul has been necessary to allow WPF and Silverlight to share controls, meaning plenty more controls for WPF too. The list below shows what is available for WPF now..

Thanks again for you patience.

Get the latest stuff from the code plex site here.

See the showcase here.

Martin

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!

Get the controls from here.

See the showcase here.

Patient Journey Demonstrator December 2008 Released

Martin Grayson — Thu, 18 Dec 2008 18:35:45 GMT

Probably the last post before the holidays, however, I am very pleased to announce a new release of the Patient Journey Demonstrator. This is a smoking hot release with some super rich and super cool new features.

You can plenty of details on the new features at the Microsoft Health CUI Team Blog.

To summarise though, the key new features are....

Clinical Noting Using Health Language

We have partnered with Health Language to provide an information rich clinical noting environment. The demonstrator now connects to their web service to allow you to encode clinical notes...

Highlighting and Annotating Deep Zoom

One of my favourite new features - you can now highlight areas and add notes to the patient ECG data in Deep Zoom. The really cool part is that when a note disappears off of the screen, a little marker points to where it is to let you know there is something you can't see!

Brand new Show Guide Feature

Clicking on 'Show Guide' in the top right of the application gives a new experience that we think, re-defines help and guidance! :)

Overlays appears over the live application, letting you know what you can do on any screen, and where we have used Microsoft Health CUI Guidance and Controls.

Check out the demonstrator for yourself, read all about all the latest features in detail, or just watch the video below!

Download the video from here.

Video: Using Blacklight Controls in Blend

Martin Grayson — Fri, 12 Dec 2008 16:39:00 GMT

A short video (02:16) on how to start using Blacklight Controls in Blend!

Get the controls from here.

See the showcase here.

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

Blacklight – Controls for Designers - v1.0 Released!

Martin Grayson — Fri, 31 Oct 2008 19:13:00 GMT

The first release of Blacklight is here! This release has really focussed on creating a set of controls that create visual effects that designers use in everyday work.

I have also worked on some improvements to the Drag Dock Panel controls, including being able to dynamically add panels at runtime, and change which side the panels dock on when one is maximised. Check out all of the details of this release below... and check out the new showcase here.

Silverlight Controls

For Silverlight 2, this release introduces 3 new Border controls – Clipping Border, Drop Shadow Border and Inner Glow Border, 2 new text controls – Drop Shadow Text Block and Stroke Text Block (Alpha), a set of control styles, from Dave Crawford, and some improvements to Drag Dock Panel.

Clipping Border

In WPF, each border, panel and content control has a ClipToBounds property. This meant that if anything was placed inside a control that extends outside of the edge, you could tell the control to clip it. Silverlight doesn’t have this property, and code is always required to draw clipping regions around each control you want to clip. This became especially hard with borders and rounded corners.

The clipping border is a border, just like the Silverlight border, that allows you clip the content. Even with a different corner radius on each corner.

Below, shows a border with a rectangle inside, where the content in not clipped.

The clipping border can clip the content as shown below...

Clipping border is at the base of all of the border controls, so all Blacklight borders have a ClipContent property.

Drop Shadow Border

A fairly obvious control, the Drop Shadow Border draws a drop shadow below your main border. This effect is great if you want your border to look as though it is raise off of the page. You can adjust things like the angle of the drop shadow, the distance from the main border, the softness of the shadow (or spread) and the opacity and colour.

Here are some examples I have made...

Outer Glow Border

This feature in v0.1, however, didn’t get a mention here. The Outer Glow border, is similar to the drop shadow border, however, the ‘shadow’ is drawn around all edges, creating more of a glow effect. You can change the glow size, colour and opacity, as well as all the normal border properties like border thickness, corner radius etc.

Inner Glow Border

Just like the outer glow border, however, the glow appears on the inside of the edges. This is a good effect for making a border look as though it has sunk into the page. You can change the glow size, colour and opacity.

The difference here though, is you can choose the glow size for each edge, allowing you to really customise the effect, for example...

There is also a ContentZIndex property, which allows you to chose whether the borders content sits on top of the shadow, or underneath it. (0 for underneath, 1 for on top).

Drop Shadow Text Block

The drop shadow text block is just like a regular text block, with a drop shadow drawn below.

Just like the drop shadow border, you can change the angle, distance, colour and opacity of the shadow.

Although this effect is quite easy to achieve in Blend, it can be a pain to move around, duplicate and edit. Putting it into a control has hopefully made it very easy to manage.

Stroke Text Block (Alpha)

This text block has a stroke effect around the edges...

You can adjust all of the normal text properties, as well as the stroke thickness, colour and opacity.

This is an Alpha version of this control, so it should be used VERY sparingly, with as smaller stroke thickness as possible. Why? The control works by replicating many text blocks in the background, and drawing them around the edge of a main text block. This can have performance implications, as the thicker the stroke, the more new text blocks are put on the screen. I hope to work on improvements to this control in the future.

Drag Dock Panel

The main changes here from v0.1 are...

1. Improved default template for the Drag Dock Panel

2. Can chose where the other panels go when one is maximised – either the top, right, bottom or left sides

3. Can add and remove panels dynamically at runtime to the host.

Head over to the showcase to see the sample running.

Silverlight Styles

In this release, Dave Crawford has kindly shared his glossy control styles. You will find the styles and templates for use in your application in the ResourceDictionaries folder in the Showcase.

WPF Controls

This release sees the first WPF control, under the Blacklight.Wpf namespace. It is actually the Drag Dock Panel control, ported over to WPF. There is a sample viewer that you can download from the releases page (in the binaries download) where you can see the panel in action.

Showcase Updates

There have been a few showcase updates, but most importantly, a guide to how to use Blacklight in Blend or Visual Studio 2008. So check those out. There is also a new ‘Who’s involved?’ page, so you can keep track on who is contributing to the project!

You can see all the bits running in the current showcase here. And you can download this release from here.

Next release is due end of November, and with lots planned; it should be a big one.

Enjoy,

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...

Blacklight updated for Silverlight 2 RC0

Martin Grayson — Wed, 01 Oct 2008 17:09:00 GMT

Back from holiday, and just a short post to let you know that Blacklight has been updated for Silverlight 2 RC0.

To get the release candidate for Silverlight 2 go here: http://silverlight.net/GetStarted/sl2rc0.aspx

To view the RC0 compatible version of the Showcase, you can go to: http://mightymeaty.members.winisp.net/blacklight.silverlight.rc0/

You can still see the Beta 2 version of the Showcase here, however: http://mightymeaty.members.winisp.net/blacklight.silverlight/

I have updated release v0.1 to also have the RC0 ready source code too. So head over to http://www.codeplex.com/blacklight for the bits.

Martin

Introducing Blacklight - our new (Silverlight) CodePlex project

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

Hey - very exciting news today... I finally have a CodePlex project set up. From the site...

'Blacklight is a UX focused code sharing project. Microsoft has released a bunch of technologies that allow designers and developers to work closely together to make beautiful software. This project is a collection of controls, samples, visual assets and ideas that has been put together by User Experience designers and developers to both show you what the technology is capable of (from a UX point of view), and give you code and samples that you can use in your own projects.'

We are currently delivering stuff in Silverlight, but have plenty more technologies to follow in the near future.

We also have a snazzy showcase that you can view the content through too. So, without further adue, here are the links to get to the stuff...

See Blacklight on CodePlex here.

See the Blacklight showcase site right here.

[SCREENSHOT OF THE SHOWCASE SITE]

I hope to do releases on a monthly basis, each release introducing new controls and samples. I will also be posting about new content right here on my blog too,so stay tuned!

Right off to Remix 08 tomorrow, and then on vacation for a week! Woohoo.

Laters, Martin.

New Patient Journey Demonstrator at MSCUI.net

Martin Grayson — Thu, 11 Sep 2008 13:12:00 GMT

Hi all - great news, an updated version of the Patient Journey Demonstrator, the project I am currently working on, has been released. Check it out at http://www.mscui.net/PatientJourneyDemonstrator.

In this release we fixed lots of bugs, as well as added some new features around capturing input from the user. Below is a list of some of the new features and a video walkthrough of the whole demonstrator...

Presence Indicators

Presence and availability is a really important theme in health care. Everywhere where we display an employee’s name, we show their presence...

Updated Navigation Bar

The updated navigation bar allows you to move backwards and forwards through different demonstrators too.

Silverlight Patient Banner

We have incorporated the new Silverlight patient banner, from the Microsoft Health CUI controls library.

Menu Pearl

We have a new menu pearl that will allow you access to some of the new features within the demonstrator - in this release, the ability to add a consultation!

Creating a Consultation

In the primary care demonstrator, you can now create a new consultation, prescribe medications and record observations. You can then save this to the patient record and see the activity list and meds list update!

SNOMED Terminology Lookup

We have taken a subset of the SNOMED database of clinical terms, and made these searchable when creating a consultation. Try typing ‘Chest Pain’.

Search and Prescribe Medications

Search for medications and prescribe to see the meds list view update.

Styled Meds List View

We have styled the Microsoft Health CUI Meds List View control to fit in visually with the demonstrator.

Drug details on Patient Chart’s table view

We have added columns to the table view in Patient Charts for showing the drugs the patient is taking.

Visual Makeover of the ECG charts

We are looking at different ways of representing the deep zoom, digital ECG data (in the Secondary Care Demonstrator). One of those explorations was to make the full result set look more like the live ECG. This is an easter egg, and requires you to press F8 once, as soon as the Secondary Care Demonstrator has loaded!

Annotating the Angiogram

We have added a bunch of features that allow you to annotate the ECG video in the secondary care demonstrator...

Including a tool bar for measuring, inking, drawing marquees, zooming in and going full screen...

A collapsible list of the annotation history...

The ability to attach a text note to each annotation...

A frame by frame selector allowing you to see what annotations are already on the video and provide navigation to those frames...

Walkthrough Video

Check out the video below for a complete walkthrough of the demonstrator - or better still - check it out at http://www.mscui.net/PatientJourneyDemonstrator.

Download the video here.

Keep checking here for future Patient Journey Demonstrator updates :)

Martin

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