I’ve made a sweet new banner for my blog, but this time in WPF!  The original one I did was all in Paint.NET, but it involved scary juggling with canvas sizes and didn’t look so great at the end.

This sample builds on what I was doing with the ItemsControl and Canvas in my WPF Physics demo, but this time it’s just rendering a list of images from an XML file.  It still amazes me how easy it is to do stuff like this in WPF.  Here’s the entire XAML:

<Window x:Class="PhotoShuffle.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="PhotoShuffle" Height="227" Width="1242" > <Window.Resources> <XmlDataProvider x:Key="photos" Source="PhotoShuffle.xml" XPath="Photos"/> <DataTemplate x:Key="photo"> <Border BorderThickness="{Binding XPath=../@Thickness}" BorderBrush="{Binding XPath=../@Border}"> <Image Source="{Binding XPath=@File}" Height="{Binding XPath=@Height}" RenderTransformOrigin="0.5, 0.5"/> <Border.RenderTransform> <TransformGroup> <RotateTransform Angle="{Binding XPath=@Angle}"/> <TranslateTransform X="{Binding XPath=@X}" Y="{Binding XPath=@Y}"/> </TransformGroup> </Border.RenderTransform> <Border.BitmapEffect> <BitmapEffectGroup> <OuterGlowBitmapEffect GlowColor="Black" GlowSize="5" /> <DropShadowBitmapEffect Color="Black" ShadowDepth="5" /> </BitmapEffectGroup> </Border.BitmapEffect> </Border> </DataTemplate> <DataTemplate x:Key="text"> <TextBlock Text="{Binding XPath=@Content}" Canvas.Right="{Binding XPath=@Right}" Canvas.Bottom="{Binding XPath=@Bottom}" FontFamily="{Binding XPath=@Font}" Foreground="{Binding XPath=@Color}" FontSize="{Binding XPath=@Size}"> <TextBlock.RenderTransform> <TranslateTransform X="{Binding XPath=@X}" Y="{Binding XPath=@Y}"/> </TextBlock.RenderTransform> </TextBlock> </DataTemplate> </Window.Resources> <Grid DataContext="{Binding Source={StaticResource photos}}" Background="{Binding XPath=@Background}"> <ItemsControl ItemsSource="{Binding XPath=Photo}" ItemTemplate="{StaticResource photo}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> <Rectangle Fill="{Binding XPath=@Mask}"/> <ItemsControl ItemsSource="{Binding XPath=Text}" ItemTemplate="{StaticResource text}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> </Grid> </Window>

This is all controlled by an XML file in the application directory.  It just lists the images in order and specifies simple attributes like angle and position:

<?xml version="1.0" encoding="utf-8" ?> <Photos Mask="#B0FFFFFF" Border="White" Thickness="5"> <Photo File="pack://siteoforigin:,,,/Pics/IMG_4967.jpg" Angle="5" Height="90" X="20" Y="20"/> <Photo File="pack://siteoforigin:,,,/Pics/IMG_4908.jpg" Angle="-5" Height="90" X="140" Y="20"/> <Photo File="pack://siteoforigin:,,,/Pics/IMG_4874.jpg" Angle="5" Height="90" X="230" Y="20"/> <Photo File="pack://siteoforigin:,,,/Pics/IMG_4929.jpg" Angle="-5" Height="90" X="290" Y="20"/> <Photo File="pack://siteoforigin:,,,/Pics/IMG_4921.jpg" Angle="5" Height="90" X="405" Y="20"/> <Photo File="pack://siteoforigin:,,,/Pics/IMG_4941.jpg" Angle="-5" Height="90" X="470" Y="20"/> <Photo File="pack://siteoforigin:,,,/Pics/IMG_5117.jpg" Angle="5" Height="90" X="555" Y="20"/> <Photo File="pack://siteoforigin:,,,/Pics/IMG_4930.jpg" Angle="-5" Height="90" X="620" Y="20"/> <Text Font="Bradley Hand ITC" Color="#FF000050" Size="42" X="340" Y="85" Content="Chris Cavanagh's Blog"/> </Photos>

Note how the image paths are specified using the Pack URI Scheme.  In this case the ‘siteoforigin:,,,’ embedded URI specifies it’s looking for a local content file relative to the site of origin (in the case of a web application this would be the originating server).