<< Photos from last weekends Code camp and Pub Club | Home | WInfx installation links and instructions >>
WPF Presentation.
Posted on Thursday, March 16, 2006 5:16 AM

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.

2 Comments

Comments

# re: WPF Presentation.
Gravatar I am trying to run the PhotoStore sample with the February CTP of Vista, and I am having trouble getting it to compile and run. On the line <?Mapping XmlNamespace="ps" ClrNamespace="PhotoStore" ?>, I get an error that Assembly is required. I have tried putting in the Assembly attribute with PhotoStore, bin\debug\PhotoStore, and every other combination like that I can think of. Do you know how to get this to run against the February CTP?

Thanks,
Ian
Left by Ian on 4/18/2006 12:55 PM

Leave Your Comment

Title*
Name*
Email (never displayed)
 (will show your gravatar)
Url
Comment*

 

Preview Your Comment.