This one comes from showing Blend to a few people yesterday and trying to think of various scenarios for making use of different visual states for a UI or for a control and one that came up was “can you make one of those UIs where we have a panel with data on the front and data on the back and it flips over”.

I declined to attempt to do this in front of people because I know it’s a little fiddly so I did it instead on a train journey.The output is below;

I started with some sample data;

I’ve been through making sample data before and the definition of my data here is pretty simple;

and I quickly added a DataGrid and bound it up to this data (I made the sample data available at run time too);

and so that’s relatively easy. I also brought in the Silverlight charting controls and created a chart to display the sales data for each salesperson;

I always struggle a little with the charts from the toolkit because they’re pretty complex controls – what I did here was set up the Chart’s ColumnSeries so that its ItemsSource is data-bound to my sample data and made sure that the 2 axes are set up correctly. In XAML, this looks like;

<toolkit:ColumnSeries 
  Title="Sales" 
  ItemsSource="{Binding Collection}" 
  IndependentValueBinding="{Binding Name}" 
  DependentValueBinding="{Binding Sales}"/>

where I’m displaying Sales on the Y axis and Name on the X axis. The only other “unusual” thing here is that I wanted my labels rotated on the X-axis and I had to go back to the source on that one to remember how it was done and I end up with something like;

<toolkit:Chart.Axes>
				<toolkit:CategoryAxis Orientation="X">
					<toolkit:CategoryAxis.AxisLabelStyle>
						<Style TargetType="toolkit:AxisLabel">
							<Setter Property="Template">
								<Setter.Value>
									<ControlTemplate TargetType="toolkit:AxisLabel">
										<toolkit:LayoutTransformer>
											<toolkit:LayoutTransformer.LayoutTransform>
												<RotateTransform Angle="-60"/>
											</toolkit:LayoutTransformer.LayoutTransform>
											<TextBlock Text="{TemplateBinding FormattedContent}"/>
										</toolkit:LayoutTransformer>
									</ControlTemplate>
								</Setter.Value>
							</Setter>
						</Style>
					</toolkit:CategoryAxis.AxisLabelStyle>
				</toolkit:CategoryAxis>
				<toolkit:LinearAxis Orientation="Y"/>
			</toolkit:Chart.Axes>

for my axes.

That’s all good – I’ve now got 2 pieces of content my DataGrid and my Chart both occupying the same place on the screen at the same time.

By default, I want to show my DataGrid and have my Chart away in the background somewhere so I made sure that it is behind my DataGrid;

and set up transformations on the Chart so that it is projected to be rotated by –180 degrees;

and scaled down;

and so by default my user will see the DataGrid and not the Chart. I then set up a couple of visual states for the control (I wrote about visual states previously);

my “normal” state is already defined. This is the state when the Grid is at the front and the Chart is at the back. Now, I want to define my chartToFront state and I do that by recording that state and making some property changes. Firstly on my DataGrid I want to rotate it, scale it and offset it a little;

and then I want my Chart object to rotate around to –360 degrees and grow to its full size;

Making these property changes “kind of works” in that when my control now transitions from the “normal” state to the “chartToFront” state, all the right things happen. The problem is that they all happen at once and that’s not really what I want. So, I manipulated the transition into my “chartToFront” state;

now, by default what’s Blend for me looks like this (note that  the 3 second period here is exaggerated);

so, clearly, everything’s happening here but I want to control the order so a little manipulation is called for;

and so now you can see that the ordering goes something like this;

1. Scale down the DataGrid
2. Rotate the DataGrid and the Chart at the same time.
3. Translate the DataGrid “into the screen” halfway through the rotation.
4. Scale up the Chart at the end.

and that works quite nicely. The only “problem” is that going back from this state to the “normal” state simply reverses the various property changes and so I probably want to control that transition as well;

and so I can edit that one in a similar manner;

I’m not 100% sure whether I’m doing these on the right transitions here so feel very free to post comments on this post and say “no,no, you should have done this in a different way” – I’m fairly robust, I can take the constructive criticism

I added a couple of buttons to drive the state transitions and simply used GoToStateAction to drive the state transitions;

and I wrote a little about actions, triggers, behaviours previously.

I put the project file here for download in case you want to open it up and play around.

One of the things that’s a bit annoying with Expression Blend is that when you go to reference an assembly you get the standard Windows file open dialog. That is;

raises the dialog;

and that’s not what you see in Visual Studio and makes hunting down the assemblies that you want a little more “tricky”. What I tend to do is to use a Windows 7 library to add all the locations for my typical assemblies and then it makes it relatively easy to find what I want – at the time of writing mine looks like this;

and so when I’m hunting for the charting library from the toolkit I just need to bang in a search string;

and it’s pretty quick to locate it.