For those of you who attended my presentation last week in Boca on introduction to Windows Presentation Foundation.
I borrowed a lot of these from windows Presentation Foundation Hands-On-Labs
http://msdn.microsoft.com/windowsvista/building/presentation/hands_on_lab/default.aspx
Please download the following startup projects
Demo1
http://www.ssccinc.com/richcontent.zip
Demo 2
http://www.ssccinc.com/WPFDataBinding.zip
Here are step by Step copy each step and expalin it to the audience.
DEMO 1
Demo1 Ex1 Task 1
1 create a new project remove the Grid tag and add the canvas tag then inside of it add the following make sure to run the application after each step so everyone knows what you are trying to accomplish.
+++++++++++++++++++++++++++
<Ellipse Width="300" Height="300" Stroke="Purple" StrokeThickness="20">
</Ellipse>
2 +++++++++++++++++++++++++++
<Ellipse.Fill>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="Yellow" />
<GradientStop Offset="1" Color="Red" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Ellipse.Fill>
3 ++++++++++++++++
StrokeDashArray="0.5,2">
4 ++++++++++++++++++
StrokeDashCap="Round">
5 ++++++++++++++++++++++++++++++
delte stroke
<Ellipse.Stroke>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="Black" />
<GradientStop Offset="1" Color="White" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Ellipse.Stroke>
6 +++++++++++++++++++++++++++++++++++++++++++
Replace Ellipse with
<Path Width="800" Height="800"
StrokeThickness="20" StrokeDashArray="0.5,2"
StrokeDashCap="Round" >
<Path.Data>
<EllipseGeometry RadiusX="150" RadiusY="150" Center = "200,200" />
</Path.Data>
<Path.Fill>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="Yellow" />
<GradientStop Offset="1" Color="Red" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Path.Fill>
<Path.Stroke>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="Black" />
<GradientStop Offset="1" Color="White" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Path.Stroke>
</Path>
7 ++++++++++++++++++++++++++++
replace
<Path.Data>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<EllipseGeometry Center="200,200" RadiusX="150" RadiusY="150" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry Center="400,200" RadiusX="150" RadiusY="150" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
8 +++++++++++++++++++++++++++++++++++++
<Path.Fill>
<VisualBrush>
<VisualBrush.Visual>
<TextBlock Text="Hello World" FontWeight="Bold" Padding="10">
<TextBlock.Background>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="Yellow" />
<GradientStop Offset="1" Color="Red" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Background>
</TextBlock>
</VisualBrush.Visual>
</VisualBrush>
</Path.Fill>
======================================
Ex2
1 +++++++
Name="MyPath" add to Path
then
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyPath"
Storyboard.TargetProperty="StrokeDashOffset"
To="20" Duration="0:0:10"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Path.Triggers>
2 ++++++++++++++++++++++++++++++++++++++++++++
add to ellipse geomtry
x:Name="MyEllipseGeometry"
<EllipseGeometry x:Name="MyEllipseGeometry"
Center="200,200" RadiusX="150" RadiusY="150" />
then
<BeginStoryboard>
<Storyboard>
<PointAnimation
Storyboard.TargetName="MyEllipseGeometry"
Storyboard.TargetProperty="Center"
From="150,100" To="650,200" Duration="0:0:3"
RepeatBehavior="Forever" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
3 ++++++++++++++++++++++++++++++++++++++++++++++
replace textblock
<TextBlock Text="Hello World" FontWeight="Bold" Padding="10">
<TextBlock.Foreground>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="Yellow" />
<GradientStop Offset="1" Color="Red" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Foreground>
<TextBlock.Background>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement Source="C:\\apollo11_launchclip04.mpg" />
</VisualBrush.Visual>
</VisualBrush>
</TextBlock.Background>
</TextBlock>
============================================
ex 3
==============================================
clear all and paste this
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera
FarPlaneDistance="20"
LookDirection="0,-0.65,-1"
UpDirection="0,1,0"
NearPlaneDistance="1"
Position="0,2,3"
FieldOfView="40" />
</Viewport3D.Camera>
<Viewport3D.Children>
<ModelVisual3D>
<ModelVisual3D.Content>
<Model3DGroup >
<Model3DGroup.Children>
<AmbientLight Color="White" />
<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D
TriangleIndices="0,1,2 2,3,0 6,5,4 4,7,6"
TextureCoordinates="1,1 1,0 0,0 0,1 0,1 0,0 1,0 1,1"
Positions="-0.5,-0.5,0 -0.5,0.5,0 0.5,0.5,0 0.5,-0.5,0 -0.5,-0.5,0 -0.5,0.5,0 0.5,0.5,0 0.5,-0.5,0 "/>
</GeometryModel3D.Geometry>
<GeometryModel3D.Transform>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="MyRotation3D" Angle="45" Axis="0 1 0"/>
</RotateTransform3D.Rotation>
</RotateTransform3D>
</GeometryModel3D.Transform>
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<VisualBrush>
<VisualBrush.Visual>
<TextBlock Text="Hello" />
</VisualBrush.Visual>
</VisualBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
</GeometryModel3D>
</Model3DGroup.Children>
</Model3DGroup>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D.Children>
<Viewport3D.Triggers>
<EventTrigger RoutedEvent="Viewport3D.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="360" Duration="0:0:3"
Storyboard.TargetName="MyRotation3D"
Storyboard.TargetProperty="Angle" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Viewport3D.Triggers>
</Viewport3D>
2 ++++++++++++++++++++++++++++++++++++++++++++++++++++
<MeshGeometry3D
TriangleIndices="0,1,2 3,4,5 6,7,8 9,10,11 12,13,14 15,16,17 18,19,20 21,22,23 24,25,26 27,28,29 30,31,32 33,34,35 "
Normals="0,0,-1 0,0,-1 0,0,-1 0,0,-1 0,0,-1 0,0,-1 0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 0,-1,0 0,-1,0 0,-1,0 0,-1,0 0,-1,0 0,-1,0 1,0,0 1,0,0 1,0,0 1,0,0 1,0,0 1,0,0 0,1,0 0,1,0 0,1,0 0,1,0 0,1,0 0,1,0 -1,0,0 -1,0,0 -1,0,0 -1,0,0 -1,0,0 -1,0,0 "
TextureCoordinates="1,1 1,0 0,0 0,0 0,1 1,1 0,1 1,1 1,0 1,0 0,0 0,1 0,1 1,1 1,0 1,0 0,0 0,1 1,1 1,0 0,0 0,0 0,1 1,1 1,0 0,0 0,1 0,1 1,1 1,0 0,0 0,1 1,1 1,1 1,0 0,0 "
Positions="-0.5,-0.5,-0.5 -0.5,0.5,-0.5 0.5,0.5,-0.5 0.5,0.5,-0.5 0.5,-0.5,-0.5 -0.5,-0.5,-0.5 -0.5,-0.5,0.5 0.5,-0.5,0.5 0.5,0.5,0.5 0.5,0.5,0.5 -0.5,0.5,0.5 -0.5,-0.5,0.5 -0.5,-0.5,-0.5 0.5,-0.5,-0.5 0.5,-0.5,0.5 0.5,-0.5,0.5 -0.5,-0.5,0.5 -0.5,-0.5,-0.5 0.5,-0.5,-0.5 0.5,0.5,-0.5 0.5,0.5,0.5 0.5,0.5,0.5 0.5,-0.5,0.5 0.5,-0.5,-0.5 0.5,0.5,-0.5 -0.5,0.5,-0.5 -0.5,0.5,0.5 -0.5,0.5,0.5 0.5,0.5,0.5 0.5,0.5,-0.5 -0.5,0.5,-0.5 -0.5,-0.5,-0.5 -0.5,-0.5,0.5 -0.5,-0.5,0.5 -0.5,0.5,0.5 -0.5,0.5,-0.5 "/>
3 +++++++++++++++++++++++++++++++++++++++++++++++++++++
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement Source = "C:\apollo11_launchclip04.mpg" />
</VisualBrush.Visual>
</VisualBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
4 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<VisualBrush>
<VisualBrush.Visual>
<Ellipse Width="300" Height="300"
Stroke="Purple" StrokeThickness="20">
<Ellipse.Fill>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="Yellow" />
<GradientStop Offset="1" Color="Red" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
</VisualBrush.Visual>
</VisualBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
5 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<Path Name="MyPath"
Width="800" Height="800"
StrokeThickness="20" StrokeDashArray="0.5,2"
StrokeDashCap="Round">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<EllipseGeometry x:Name="MyEllipseGeometry"
Center="200 200" RadiusX="150" RadiusY="150" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry Center="400 200" RadiusX="150" RadiusY="150" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
<Path.Fill>
<VisualBrush>
<VisualBrush.Visual>
<TextBlock Text="Hello World" FontWeight="Bold" Padding="10">
<TextBlock.Foreground>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="Yellow" />
<GradientStop Offset="1" Color="Red" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Foreground>
<TextBlock.Background>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement>
<MediaElement.Source>
<MediaTimeline Source="C:\Microsoft Hands-On-Lab\HOL-PRSHOL08\Source\apollo11_launchclip04.mpg" RepeatBehavior="Forever"/>
</MediaElement.Source>
</MediaElement>
</VisualBrush.Visual>
</VisualBrush>
</TextBlock.Background>
</TextBlock>
</VisualBrush.Visual>
</VisualBrush>
</Path.Fill>
<Path.Stroke>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="Black" />
<GradientStop Offset="1" Color="White" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Path.Stroke>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="20" Duration="0:0:10"
Storyboard.TargetName="MyPath"
Storyboard.TargetProperty="StrokeDashOffset"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard>
<PointAnimation From="150,100" To="650,200" Duration="0:0:3"
Storyboard.TargetName="MyEllipseGeometry"
Storyboard.TargetProperty="Center"
RepeatBehavior="Forever" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Path.Triggers>
</Path>
DEMO 2
Create a new C# WPF windows Project
add a new codepage and Call it data.cs
1 Add the following Using statements to the top +++++++++++++++++++++++
using System;
using System.Collections.Generic;
using System.Text;
using System.IO;
using System.Collections.ObjectModel;
using System.ComponentModel;
2 ++++++++++++++++++++
Inside namespace PhotoStore
public class Photo
{
public Photo(string path)
{
_source = path;
}
public override string ToString()
{
return Source;
}
private string _source;
public string Source { get { return _source; } }
}
3 ++++++++++++++++++++++++++++++++++++++
public class PhotoList : ObservableCollection<Photo>
{
public PhotoList() { }
public PhotoList(string path) : this(new DirectoryInfo(path)) { }
public PhotoList(DirectoryInfo directory)
{
_directory = directory;
Update();
}
public string Path
{
set
{
_directory = new DirectoryInfo(value);
Update();
}
get { return _directory.FullName; }
}
public DirectoryInfo Directory
{
set
{
_directory = value;
Update();
}
get { return _directory; }
}
private void Update()
{
foreach (FileInfo f in _directory.GetFiles("*.jpg"))
{
Add(new Photo(f.FullName));
}
}
DirectoryInfo _directory;
}
3.5 +++++++++++++++++++++++++++++++++
public class PrintType
{
public PrintType(string description, double cost)
{
_description = description;
_cost = cost;
}
public override string ToString()
{
return _description;
}
private string _description;
public String Description { get { return _description; } }
private double _cost;
public double Cost { get { return _cost; } }
}
4 +++++++++++++++++++++++++++++++++++++
public class PrintTypeList : ObservableCollection<PrintType>
{
public PrintTypeList()
{
Add(new PrintType("4x6 Print", 0.19));
Add(new PrintType("5x7 Print", 0.99));
Add(new PrintType("8x10 Print", 2.99));
Add(new PrintType("Framed Print", 7.99));
Add(new PrintType("T-Shirt", 12.99));
}
}
5 +++++++++++++++++++++++++++++++++++++++++++++
public class Print : INotifyPropertyChanged
{
public Print(Photo photo, PrintType printtype, int quantity)
{
Photo = photo;
PrintType = printtype;
Quantity = quantity;
}
private Photo _photo;
public Photo Photo
{
set { _photo = value; OnPropertyChanged("Photo"); }
get { return _photo; }
}
private PrintType _PrintType;
public PrintType PrintType
{
set { _PrintType = value; OnPropertyChanged("PrintType"); }
get { return _PrintType; }
}
private int _quantity;
public int Quantity
{
set { _quantity = value; OnPropertyChanged("Quantity"); }
get { return _quantity; }
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(String info)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
public override string ToString()
{
return Quantity + " " + PrintType + " " + Photo;
}
}
6 ++++++++++++++++++++++++++++++++++
public class PrintList : ObservableCollection<Print> { }
================= WIndow1.xaml.cs =================
7 in window1.xaml.cs add the following delcartion++++++++++++++++++++++++++++++++++++
PhotoList Photos;
PrintList PhotoTray;
8 make sure you copy the images in the zip file to c:\Pics directory
if you copy it to a different folder modify the code below ++++++++++++++++++
private void WindowLoaded(object sender, RoutedEventArgs e)
{
Photos = (PhotoList)(this.Resources["Photos"] as ObjectDataProvider).Data;
Photos.Path = "c:\\Pics";
PhotoTray = (PrintList)(this.Resources["PhotoTray"] as ObjectDataProvider).Data;
}
9 we need to uncomment the lines here after we modify window1.xaml in the next example ++++++++++++++++++++++++++++++++++++++
private void AddToPhotoTray(object sender, RoutedEventArgs e)
{
/*
if (PrintTypeComboBox.SelectedItem != null)
{
foreach (Photo p in PhotosListBox.SelectedItems)
{
Print print = GetPrintFromPhotoTray(p, PrintTypeComboBox.SelectedItem as PrintType);
if (print != null)
{
print.Quantity++;
}
else
{
print = new Print(p, PrintTypeComboBox.SelectedItem as PrintType, 1);
PhotoTray.Add(print);
}
}
}
*/
}
10 +++++++++++++++++++++++++++++++++++++
private void Upload(object sender, RoutedEventArgs e)
{
for (int i = 0; i <= 100; i++)
{
//UploadProgressBar.Value = i;
}
}
11 +++++++++++++++++++++++++++++++++++++++++
private Print GetPrintFromPhotoTray(Photo photo, PrintType printtype)
{
foreach (Print print in PhotoTray)
{
if (print.Photo == photo && print.PrintType == printtype)
{
return print;
}
}
return null;
}
===================================
Task 2
===================================
1 Add the following line to the top of the page window1.xaml ++++++++++++++++++
<?Mapping XmlNamespace="ps" ClrNamespace="PhotoStore" ?>
2 Insert this to the end of the tag++++++++++++++++++++++++
Loaded="WindowLoaded"
xmlns:ps="ps"
Width="640"
Height="670">
<Window.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0" Color="#DDDDDD"/>
<GradientStop Offset="1" Color="#EEEEEE"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Window.Background>
<Window.Resources>
<ObjectDataProvider
x:Name="PhotosODP"
x:Key="Photos"
ObjectType="{x:Type ps:PhotoList}" />
<ObjectDataProvider
x:Name="PhotoTrayODP"
x:Key="PhotoTray"
ObjectType="{x:Type ps:PrintList}" />
<ObjectDataProvider
x:Name="PrintTypes"
x:Key="PrintTypes"
ObjectType="{x:Type ps:PrintTypeList}" />
</Window.Resources>
3 +++++++++++++++++++++++++++++++++++++++++++++
Margin="20" MaxWidth="600" ShowGridLines="False" >
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="250" />
<RowDefinition Height="15" />
<RowDefinition Height="Auto" />
<RowDefinition Height="2000" />
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
<TextBlock
Grid.Row="0"
Grid.ColumnSpan="2">
PhotoStore
</TextBlock>
<TextBlock Grid.Row="1" Grid.ColumnSpan="2">Making memories.</TextBlock>
<ListBox
Grid.Row="2" Grid.ColumnSpan="2"
Margin="0,8,0,8"
Name="PhotosListBox"
DataContext="{Binding Source={StaticResource Photos}}"
ItemsSource="{Binding }"
SelectedIndex="0" />
<ContentControl
Grid.Row="4"
Grid.RowSpan="4"
Grid.Column="0"
Margin="0"
Content="{Binding ElementName=PhotosListBox, Path=SelectedItem}"/>
<StackPanel
Grid.Row="6"
Grid.Column="0"
Orientation="Horizontal"
HorizontalAlignment="Center"
Margin="0">
<ComboBox
Margin="2"
VerticalAlignment="Center"
Name="PrintTypeComboBox"
DataContext="{Binding Source={StaticResource PrintTypes}}"
ItemsSource="{Binding}"
Width="100"
SelectedIndex="0" />
<Button
Click="AddToPhotoTray"
Margin="2"
VerticalAlignment="Center"
IsDefault="true">Add To Tray</Button>
</StackPanel>
<TextBlock
Grid.Row="3"
Grid.Column="1">
Photo Tray
</TextBlock>
<ItemsControl
Grid.Row="4"
Grid.Column="1"
Name="PhotoTrayItemsControl"
DataContext="{Binding Source={StaticResource PhotoTray}}"
ItemsSource="{Binding}" />
<StackPanel
Grid.Row="6"
Grid.Column="1"
Orientation="Horizontal"
HorizontalAlignment="Center"
Margin="0">
<ProgressBar
Name="UploadProgressBar"
Width="126"
Value="0"
Margin="2"
VerticalAlignment="Center" />
<Button Click="Upload" Margin="2" VerticalAlignment="Center" >Upload</Button>
</StackPanel>
====================================
EX2 task 1
=====================================
1 ++++++++++++++++++++++++++++++++++++++
<Style TargetType="{x:Type TextBlock}">
<Setter Property="FontFamily" Value="Segoe Black" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="FontSize" Value="12pt" />
<Setter Property="Foreground" Value="#777777" />
</Style>
2 +++++++++++++++++++++++++++++++++++++++++
first add this to photostore
Style="{StaticResource TitleText}">
then
<Style
x:Key="TitleText"
BasedOn="{StaticResource {x:Type TextBlock}}"
TargetType="{x:Type TextBlock}">
<Setter Property="FontSize" Value="32pt" />
<Setter Property="Foreground">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0" Color="#90C117"/>
<GradientStop Offset="1" Color="#5C9417"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<TransformGroup.Children>
<TranslateTransform X="0" Y="10"/>
</TransformGroup.Children>
</TransformGroup>
</Setter.Value>
</Setter>
</Style>
3 +++++++++++++++++++++++++++++++++++++++++++++++++++
add to to Photo Tray
HorizontalAlignment="Left">
4 ++++++++++++++++++++++++++++++++++++++++++++++++++
add this to items control
Style="{StaticResource TrayItemsControl}"
then
<Style TargetType="{x:Type ListBox}">
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}" >
<Border
Height="100"
Padding="5"
BorderThickness="0.5"
CornerRadius="6"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<StackPanel
IsItemsHost="True"
Orientation="Horizontal"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0" Color="#88000000"/>
<GradientStop Offset="1" Color="#DDFFFFFF"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0" Color="#CCFFFFFF"/>
<GradientStop Offset="1" Color="#55FFFFFF"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
5 ++++++++++++++++++++++++++++++++++++++++++++
<Style x:Key="TrayItemsControl" TargetType="{x:Type ItemsControl}">
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ItemsControl}" >
<Border
Height="250"
Width="200"
Padding="10"
BorderThickness="0.5"
CornerRadius="6"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<WrapPanel
ItemHeight="75"
ItemWidth="75"
IsItemsHost="True"
Orientation="Horizontal"
VerticalAlignment="Top"
HorizontalAlignment="Center" />
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0" Color="#88000000"/>
<GradientStop Offset="1" Color="#DDFFFFFF"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0" Color="#CCFFFFFF"/>
<GradientStop Offset="1" Color="#55FFFFFF"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
6 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
<DataTemplate DataType="{x:Type ps:Photo}">
<Border
VerticalAlignment="Center"
HorizontalAlignment="Center"
Padding="4"
Margin="2"
Background="White">
<Image Source="{Binding Source}" />
</Border>
</DataTemplate>
7 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
add this to content Control
ContentTemplate="{StaticResource ReflectedPhoto}"/>
then paste this
<DataTemplate DataType="{x:Type ps:Print}">
<Grid>
<Border
VerticalAlignment="Center"
HorizontalAlignment="Center"
Padding="3"
Margin="1,4,1,12"
Background="White"
BorderBrush="#AAAAAA"
BorderThickness="1" >
<Image Source="{Binding Photo.Source}" />
</Border>
<TextBlock
Text="{Binding PrintType.Description}"
Foreground="#999999"
FontSize="8pt"
HorizontalAlignment="Center"
VerticalAlignment="Bottom" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="ReflectedPhoto" >
<Grid HorizontalAlignment="Center">
<RowDefinition Height="250" />
<RowDefinition />
<!-- reflection-->
<Border
Grid.Row="1"
VerticalAlignment="Top"
Width="{Binding ElementName=MainBorder, Path=ActualWidth}"
Background="White"
BorderBrush="#EEEEEE"
BorderThickness="1">
<Border.LayoutTransform>
<TransformGroup>
<TransformGroup.Children>
<ScaleTransform ScaleX="1" ScaleY="-0.5"/>
</TransformGroup.Children>
</TransformGroup>
</Border.LayoutTransform>
<Border.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0" Color="Transparent"/>
<GradientStop Offset="1" Color="#50000000"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.OpacityMask>
<Image
Margin="7"
Width="{Binding ElementName=MainImage, Path=ActualWidth}"
Source="{Binding Source}"/>
</Border>
<!-- shadow -->
<Rectangle
Grid.Row="0"
VerticalAlignment="Bottom"
HorizontalAlignment="Center"
Width="{Binding ElementName=MainBorder, Path=ActualWidth}"
Height="30" >
<Rectangle.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<TranslateTransform X="0" Y="15"/>
</TransformGroup.Children>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<RadialGradientBrush >
<RadialGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0" Color="#B0000000"/>
<GradientStop Offset="1" Color="Transparent"/>
</GradientStopCollection>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- main image -->
<Border
Grid.Row="0"
x:Name="MainBorder"
Background="White"
BorderBrush="#DDDDDD"
BorderThickness="1"
HorizontalAlignment="Center"
VerticalAlignment="Bottom" >
<Image
Margin="7"
x:Name="MainImage"
Source="{Binding Source}" />
</Border>
</Grid>
</DataTemplate>
9+++++++++++++++++++++++++++++++++++++++++++
<Style x:Key="{x:Type ListBoxItem}" TargetType="{x:Type ListBoxItem}">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Opacity" Value="0.5" />
<Setter Property="MaxHeight" Value="75" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border
x:Name="ContentBorder"
BorderThickness="1"
BorderBrush="Transparent">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Opacity" Value="1.0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
</EventTrigger>
</Style.Triggers>
</Style>
Sorry For the Delay, but here are all the files for the demo.