Here is the source code for a sample that I was going to demo at Mix but we ran out of time.

http://blendables.com/files/folders/samples/entry49.aspx

I will follow up with more tutorial info but in the meantime its a very simple sample… It switches the template on a control based on the width of the root window element in the application.

I realize the template switching in reading experiences like newspaper front pages is a much larger problem than I solve here but this is an incredibly useful tool for me to build solutions that require switching based on window size.

 Here is the quick run down of the sample:

//First you need to add references to blendables essentials or this wont work at all. Notice that I have given the Window element an x:Name of RootWindow :

<Window
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:blendables=”http://schemas.identitymine.com/blendables”
x:Class=”TheOldSwitcheroo.Window1″ x:Name=”RootWindow” Title=”The Old Switcheroo”
Width=”500″ Height=”500″>
<Window.Resources>

//Next I define the two different control templates I want to switch between:

<ControlTemplate x:Key=”ControlTemplate1″ TargetType=”{x:Type Control}”>
<Grid>
<Ellipse Fill=”#FF4D6AA4″ />
</Grid>
</ControlTemplate>

<ControlTemplate x:Key=”ControlTemplate2″ TargetType=”{x:Type Control}”>
<Grid>
<Rectangle Fill=”#FFB43C3C” />
</Grid>
</ControlTemplate>

//Then I define a NumericRangeObjectMap resource that says when the value is 0 – 650 use ControlTemplate1 and When it is 650 to infinite use ControlTemplate2.

<blendables:NumericRangeToObjectConverter x:Key=”NumericRangeToObjectConverter”>
<blendables:NumericRangeObjectMap From=”0″ To=”650″ Value=”{StaticResource ControlTemplate1}” />
<blendables:NumericRangeObjectMap From=”650″ Value=”{StaticResource ControlTemplate2}” />
</blendables:NumericRangeToObjectConverter>

</Window.Resources>
<Grid x:Name=”LayoutRoot”>

//Then I call the converter in the Template property of my control and pass it an ElementName of RootWindow and a Path of ActualWidth.

<Control x:Name=”TemplateSwitcherControl”
Template=”{Binding Path=ActualWidth, Converter={StaticResource NumericRangeToObjectConverter}, ElementName=RootWindow}”/>
</Grid>
</Window>