Restore WPF .NET Framework content from WPF .NET (#144)

* Copy .NET 5 WPF content back into .NET Framework * Add H1 heading difference for .NET * Fix validation errors
2026-09-06 16:06:07 +02:00 · 2020-12-07 13:06:20 -08:00
parent 99e90fa162
commit ffc3b77150
168 changed files with 4527 additions and 31 deletions
@@ -0,0 +1,184 @@
+---
+title: Create a template in WPF
+description: Learn how to create and reference a control template in Windows Presentation Foundation and .NET Framework.
+author: adegeo
+ms.author: adegeo
+ms.date: 12/03/2020
+no-loc: ["<Window>", "<ControlTemplate>", "<Ellipse>", "<ContentPresenter>", "<Trigger>", "<Setter>", "<PropertyTrigger>", "<Grid>", "<VisualStateManager.VisualStateGroups>", "<VisualStateGroup>", "<VisualState>", "<Storyboard>", "SizeToContent", "MinWidth", "TargetType", "Title"]
+ms.topic: how-to
+helpviewer_keywords: 
+  - "control contract [WPF]"
+  - "controls [WPF], visual structure changes"
+  - "ControlTemplate [WPF], customizing for existing controls"
+  - "skinning controls [WPF]"
+  - "controls [WPF], appearance specified by state"
+  - "templates [WPF], custom for existing controls"
+---
+
+# Create a template for a control
+
+With Windows Presentation Foundation (WPF), you can customize an existing control's visual structure and behavior with your own reusable template. Templates can be applied globally to your application, windows and pages, or directly to controls. Most scenarios that require you to create a new control can be covered by instead creating a new template for an existing control.
+
+In this article, you'll explore creating a new <xref:System.Windows.Controls.ControlTemplate> for the <xref:System.Windows.Controls.Button> control.
+
+## When to create a ControlTemplate
+
+Controls have many properties, such as <xref:System.Windows.Controls.Border.Background%2A>, <xref:System.Windows.Controls.Control.Foreground%2A>, and <xref:System.Windows.Controls.Control.FontFamily%2A>. These properties control different aspects of the control's appearance, but the changes that you can make by setting these properties are limited. For example, you can set the <xref:System.Windows.Controls.Control.Foreground%2A> property to blue and <xref:System.Windows.Controls.Control.FontStyle%2A> to italic on a <xref:System.Windows.Controls.CheckBox>. When you want to customize the control's appearance beyond what setting the other properties on the control can do, you create a <xref:System.Windows.Controls.ControlTemplate>.
+
+In most user interfaces, a button has the same general appearance: a rectangle with some text. If you wanted to create a rounded button, you could create a new control that inherits from the button or recreates the functionality of the button. In addition, the new user control would provide the circular visual.
+
+You can avoid creating new controls by customizing the visual layout of an existing control. With a rounded button, you create a <xref:System.Windows.Controls.ControlTemplate> with the desired visual layout.
+
+On the other hand, if you need a control with new functionality, different properties, and new settings, you would create a new <xref:System.Windows.Controls.UserControl>.
+
+## Prerequisites
+
+Create a new WPF application and in *MainWindow.xaml* (or another window of your choice) set the following properties on the **\<Window>** element:
+
+|     |     |
+| --- | --- |
+| **Title**         | `Template Intro Sample` |
+| **SizeToContent** | `WidthAndHeight` |
+| **MinWidth**      | `250` |
+
+Set the content of the **\<Window>** element to the following XAML:
+
+[!code-xaml[Initial](./snippets/how-to-create-apply-template/csharp/Window1.xaml#Initial)]
+
+In the end, the *MainWindow.xaml* file should look similar to the following:
+
+[!code-xaml[InitialWhole](./snippets/how-to-create-apply-template/csharp/Window1.xaml#InitialWhole)]
+
+If you run the application, it looks like the following:
+
+![WPF window with two unstyled buttons](media/how-to-create-apply-template/unstyled-button.png)
+
+## Create a ControlTemplate
+
+The most common way to declare a <xref:System.Windows.Controls.ControlTemplate> is as a resource in the `Resources` section in a XAML file. Because templates are resources, they obey the same scoping rules that apply to all resources. Put simply, where you declare a template affects where the template can be applied. For example, if you declare the template in the root element of your application definition XAML file, the template can be used anywhere in your application. If you define the template in a window, only the controls in that window can use the template.
+
+To start with, add a `Window.Resources` element to your *MainWindow.xaml* file:
+
+[!code-xaml[WindowResStart](./snippets/how-to-create-apply-template/csharp/Window2.xaml#WindowResStart)]
+
+Create a new **\<ControlTemplate>** with the following properties set:
+
+|     |     |
+| --- | --- |
+| **x:Key**         | `roundbutton` |
+| **TargetType**    | `Button` |
+
+This control template will be simple:
+
+- a root element for the control, a <xref:System.Windows.Controls.Grid>
+- an <xref:System.Windows.Shapes.Ellipse> to draw the rounded appearance of the button
+- a <xref:System.Windows.Controls.ContentPresenter> to display the user-specified button content
+
+[!code-xaml[ControlTemplate](./snippets/how-to-create-apply-template/csharp/Window3.xaml#ControlTemplate)]
+
+### TemplateBinding
+
+When you create a new <xref:System.Windows.Controls.ControlTemplate>, you still might want to use the public properties to change the control's appearance. The [TemplateBinding](../advanced/templatebinding-markup-extension.md) markup extension binds a property of an element that is in the <xref:System.Windows.Controls.ControlTemplate> to a public property that is defined by the control. When you use a [TemplateBinding](../advanced/templatebinding-markup-extension.md), you enable properties on the control to act as parameters to the template. That is, when a property on a control is set, that value is passed on to the element that has the [TemplateBinding](../advanced/templatebinding-markup-extension.md) on it.
+
+### Ellipse
+
+Notice that the **:::no-loc text="Fill":::** and **:::no-loc text="Stroke":::** properties of the **\<Ellipse>** element are bound to the control's <xref:System.Windows.Controls.Control.Foreground> and <xref:System.Windows.Controls.Control.Background> properties.
+
+### ContentPresenter
+
+A [\<ContentPresenter>](xref:System.Windows.Controls.ContentPresenter) element is also added to the template. Because this template is designed for a button, take into consideration that the button inherits from <xref:System.Windows.Controls.ContentControl>. The button presents the content of the element. You can set anything inside of the button, such as plain text or even another control. Both of the following are valid buttons:
+
+```xaml
+<Button>My Text</Button>
+
+<!-- and -->
+
+<Button>
+    <CheckBox>Checkbox in a button</CheckBox>
+</Button>
+```
+
+In both of the previous examples, the text and the checkbox are set as the [Button.Content](xref:System.Windows.Controls.ContentControl.Content) property. Whatever is set as the content can be presented through a **\<ContentPresenter>**, which is what the template does.
+
+If the <xref:System.Windows.Controls.ControlTemplate> is applied to a <xref:System.Windows.Controls.ContentControl> type, such as a `Button`, a <xref:System.Windows.Controls.ContentPresenter> is searched for in the element tree. If the `ContentPresenter` is found, the template automatically binds the control's <xref:System.Windows.Controls.ContentControl.Content> property to the `ContentPresenter`.
+
+## Use the template
+
+Find the buttons that were declared at the start of this article.
+
+[!code-xaml[Initial](./snippets/how-to-create-apply-template/csharp/Window1.xaml#Initial)]
+
+Set the second button's <xref:System.Windows.Controls.Control.Template> property to the `roundbutton` resource:
+
+[!code-xaml[StyledButton](./snippets/how-to-create-apply-template/csharp/Window3.xaml#StyledButton)]
+
+If you run the project and look at the result, you'll see that the button has a rounded background.
+
+![WPF window with one template oval button](media/how-to-create-apply-template/styled-button.png)
+
+You may have noticed that the button isn't a circle but is skewed. Because of the way the **\<Ellipse>** element works, it always expands to fill the available space. Make the circle uniform by changing the button's  **:::no-loc text="width":::** and **:::no-loc text="height":::** properties to the same value:
+
+[!code-xaml[StyledButtonSize](./snippets/how-to-create-apply-template/csharp/Window3.xaml#StyledButtonSize)]
+
+![WPF window with one template circular button](media/how-to-create-apply-template/styled-uniform-button.png)
+
+## Add a Trigger
+
+Even though a button with a template applied looks different, it behaves the same as any other button. If you press the button, the <xref:System.Windows.Controls.Primitives.ButtonBase.Click> event fires. However, you may have noticed that when you move your mouse over the button, the button's visuals don't change. These visual interactions are all defined by the template.
+
+With the dynamic event and property systems that WPF provides, you can watch a specific property for a value and then restyle the template when appropriate. In this example, you'll watch the button's <xref:System.Windows.UIElement.IsMouseOver> property. When the mouse is over the control, style the **\<Ellipse>** with a new color. This type of trigger is known as a *PropertyTrigger*.
+
+For this to work, you'll need to add a name to the **\<Ellipse>** that you can reference. Give it the name of **backgroundElement**.
+
+[!code-xaml[EllipseName](./snippets/how-to-create-apply-template/csharp/Window4.xaml#EllipseName)]
+
+Next, add a new <xref:System.Windows.Trigger> to the [ControlTemplate.Triggers](xref:System.Windows.Controls.ControlTemplate.Triggers) collection. The trigger will watch the `IsMouseOver` event for the value `true`.
+
+[!code-xaml[ControlTemplate](./snippets/how-to-create-apply-template/csharp/Window4.xaml?name=ControlTemplate&highlight=6-10)]
+
+Next, add a **\<Setter>** to the **\<Trigger>** that changes the **Fill** property of the **\<Ellipse>** to a new color.
+
+[!code-xaml[MouseOver](./snippets/how-to-create-apply-template/csharp/Window5.xaml#MouseOver)]
+
+Run the project. Notice that when you move the mouse over the button, the color of the **\<Ellipse>** changes.
+
+![mouse moves over WPF button to change the fill color](media/how-to-create-apply-template/mouse-move-over-button.gif)
+
+## Use a VisualState
+
+Visual states are defined and triggered by a control. For example, when the mouse is moved on top of the control, the `CommonStates.MouseOver` state is triggered. You can animate property changes based on the current state of the control. In the previous section, a **\<PropertyTrigger>** was used to change the foreground of the button to `AliceBlue` when the `IsMouseOver` property was `true`. Instead, create a visual state that animates the change of this color, providing a smooth transition. For more information about *VisualStates*, see [Styles and templates in WPF](styles-templates-overview.md#visual-states).
+
+To convert the **\<PropertyTrigger>** to an animated visual state, First, remove the **\<ControlTemplate.Triggers>** element from your template.
+
+[!code-xaml[CleanTemplate](./snippets/how-to-create-apply-template/csharp/Window5.xaml#CleanTemplate)]
+
+Next, in the **\<Grid>** root of the control template, add the **\<VisualStateManager.VisualStateGroups>** element with a **\<VisualStateGroup>** for `CommonStates`. Define two states, `Normal` and `MouseOver`.
+
+[!code-xaml[VisualState](./snippets/how-to-create-apply-template/csharp/Window6.xaml#VisualState)]
+
+Any animations defined in a **\<VisualState>** are applied when that state is triggered. Create animations for each state. Animations are put inside of a **\<Storyboard>** element. For more information about storyboards, see [Storyboards Overview](../graphics-multimedia/storyboards-overview.md).
+
+- Normal
+
+  This state animates the ellipse fill, restoring it to the control's `Background` color.
+
+  [!code-xaml[NormalState](./snippets/how-to-create-apply-template/csharp/Window6.xaml#NormalState)]
+
+- MouseOver
+
+  This state animates the ellipse `Background` color to a new color: `Yellow`.
+
+  [!code-xaml[MouseOverState](./snippets/how-to-create-apply-template/csharp/Window6.xaml#MouseOverState)]
+
+The **\<ControlTemplate>** should now look like the following.
+
+[!code-xaml[FinalTemplate](./snippets/how-to-create-apply-template/csharp/Window7.xaml#FinalTemplate)]
+
+Run the project. Notice that when you move the mouse over the button, the color of the **\<Ellipse>** animates.
+
+![mouse moves over WPF button to change visual state](media/how-to-create-apply-template/mouse-move-over-button-visualstate.gif)
+
+## Next steps
+
+- [Styles and templates in WPF](styles-templates-overview.md)
+- [Overview of XAML Resources](../advanced/xaml-resources-define.md)
@@ -0,0 +1,14 @@
+// // Copyright (c) Microsoft. All rights reserved.
+// // Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+using System.Windows;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    ///     Interaction logic for App.xaml
+    /// </summary>
+    public partial class App : Application
+    {
+    }
+}
@@ -0,0 +1,18 @@
+<!--<AppResources>-->
+<Application x:Class="IntroToStylingAndTemplating.App"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+             StartupUri="MainWindow.xaml">
+    <Application.Resources>
+        <ResourceDictionary>
+            
+            <Style x:Key="Header1" TargetType="TextBlock">
+                <Setter Property="FontSize" Value="15" />
+                <Setter Property="FontWeight" Value="ExtraBold" />
+            </Style>
+            
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>
+<!--</AppResources>-->
@@ -0,0 +1,11 @@
+<Project Sdk="Microsoft.NET.Sdk.WindowsDesktop">
+
+  <PropertyGroup>
+    <OutputType>WinExe</OutputType>
+    <TargetFramework>netcoreapp3.1</TargetFramework>
+    <RootNamespace>IntroToStylingAndTemplating</RootNamespace>
+    <UseWpf>true</UseWpf>
+    <AssemblyName>IntroToStylingAndTemplating</AssemblyName>
+  </PropertyGroup>
+
+</Project>
@@ -0,0 +1,28 @@
+// // Copyright (c) Microsoft. All rights reserved.
+// // Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+using System.Windows;
+using System.Windows.Data;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    ///     Interaction logic for MainWindow.xaml
+    /// </summary>
+    public partial class MainWindow : Window
+    {
+        public MainWindow()
+        {
+            InitializeComponent();
+        }
+
+        private void WindowLoaded(object sender, RoutedEventArgs e)
+        {
+        }
+
+        private void Button_Click(object sender, RoutedEventArgs e)
+        {
+            MessageBox.Show("Clicked");
+        }
+    }
+}
@@ -0,0 +1,43 @@
+<Window x:Class="IntroToStylingAndTemplating.MainWindow"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Template Intro Sample" Loaded="WindowLoaded" SizeToContent="WidthAndHeight" MinWidth="250">
+    <Window.Resources>
+        <ControlTemplate x:Key="roundbutton" TargetType="Button">
+            <Grid>
+                <VisualStateManager.VisualStateGroups>
+                    <VisualStateGroup Name="CommonStates">
+                        <VisualState Name="Normal">
+                            <Storyboard>
+                                <ColorAnimation Storyboard.TargetName="backgroundElement" 
+                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
+                                    To="{TemplateBinding Background}"
+                                    Duration="0:0:0.3"/>
+                            </Storyboard>
+                        </VisualState>
+                        <VisualState Name="MouseOver">
+                            <Storyboard>
+                                <ColorAnimation Storyboard.TargetName="backgroundElement" 
+                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" 
+                                    To="Yellow" 
+                                    Duration="0:0:0.3"/>
+                            </Storyboard>
+                        </VisualState>
+                    </VisualStateGroup>
+                </VisualStateManager.VisualStateGroups>
+                <Ellipse Name="backgroundElement" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}" />
+                <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" />
+            </Grid>
+        </ControlTemplate>
+    </Window.Resources>
+    <StackPanel Margin="10">
+        <Label>Unstyled Button</Label>
+        <Button>Button 1</Button>
+        <Label>Rounded Button</Label>
+        <Button Template="{StaticResource roundbutton}" Width="65" Height="65" Click="Button_Click">Button 2</Button>
+    </StackPanel>
+</Window>
@@ -0,0 +1,19 @@
+<!--<SnippetInitialWhole>-->
+<Window x:Class="IntroToStylingAndTemplating.Window1"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Template Intro Sample" SizeToContent="WidthAndHeight" MinWidth="250">
+    <!--<SnippetInitial>-->
+    <StackPanel Margin="10">
+        <Label>Unstyled Button</Label>
+        <Button>Button 1</Button>
+        <Label>Rounded Button</Label>
+        <Button>Button 2</Button>
+    </StackPanel>
+    <!--</SnippetInitial>-->
+</Window>
+<!--</SnippetInitialWhole>-->
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window1.xaml
+    /// </summary>
+    public partial class Window1 : Window
+    {
+        public Window1()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,20 @@
+<!--<SnippetWindowResStart>-->
+<Window x:Class="IntroToStylingAndTemplating.Window2"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Template Intro Sample" SizeToContent="WidthAndHeight" MinWidth="250">
+    <Window.Resources>
+        
+    </Window.Resources>
+    <StackPanel Margin="10">
+        <Label>Unstyled Button</Label>
+        <Button>Button 1</Button>
+        <Label>Rounded Button</Label>
+        <Button>Button 2</Button>
+    </StackPanel>
+</Window>
+<!--</SnippetWindowResStart>-->
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window2.xaml
+    /// </summary>
+    public partial class Window2 : Window
+    {
+        public Window2()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,38 @@
+<Window x:Class="IntroToStylingAndTemplating.Window3"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Window3" SizeToContent="WidthAndHeight" MinWidth="250">
+    <Window.Resources>
+        <!--<SnippetControlTemplate>-->
+        <ControlTemplate x:Key="roundbutton" TargetType="Button">
+            <Grid>
+                <Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}" />
+                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
+            </Grid>
+        </ControlTemplate>
+        <!--</SnippetControlTemplate>-->
+    </Window.Resources>
+    <Grid>
+        <!--<SnippetStyledButton>-->
+        <StackPanel Margin="10">
+            <Label>Unstyled Button</Label>
+            <Button>Button 1</Button>
+            <Label>Rounded Button</Label>
+            <Button Template="{StaticResource roundbutton}">Button 2</Button>
+        </StackPanel>
+        <!--</SnippetStyledButton>-->
+
+        <!--<SnippetStyledButtonSize>-->
+        <StackPanel Margin="10">
+            <Label>Unstyled Button</Label>
+            <Button>Button 1</Button>
+            <Label>Rounded Button</Label>
+            <Button Template="{StaticResource roundbutton}" Width="65" Height="65">Button 2</Button>
+        </StackPanel>
+        <!--</SnippetStyledButtonSize>-->
+    </Grid>
+</Window>
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window3.xaml
+    /// </summary>
+    public partial class Window3 : Window
+    {
+        public Window3()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,29 @@
+<Window x:Class="IntroToStylingAndTemplating.Window4"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Window4" SizeToContent="WidthAndHeight" MinWidth="250">
+    <Window.Resources>
+        <!--<SnippetControlTemplate>-->
+        <ControlTemplate x:Key="roundbutton" TargetType="Button">
+            <Grid>
+                <!--<SnippetEllipseName>-->
+                <Ellipse x:Name="backgroundElement" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}" />
+                <!--</SnippetEllipseName>-->
+                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
+            </Grid>
+            <ControlTemplate.Triggers>
+                <Trigger Property="IsMouseOver" Value="true">
+
+                </Trigger>
+            </ControlTemplate.Triggers>
+        </ControlTemplate>
+        <!--</SnippetControlTemplate>-->
+    </Window.Resources>
+    <Grid>
+        
+    </Grid>
+</Window>
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window4.xaml
+    /// </summary>
+    public partial class Window4 : Window
+    {
+        public Window4()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,35 @@
+<Window x:Class="IntroToStylingAndTemplating.Window5"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Window5" SizeToContent="WidthAndHeight" MinWidth="250">
+    <Window.Resources>
+        <ControlTemplate x:Key="roundbuttonUnneeded" TargetType="Button">
+            <Grid>
+                <Ellipse x:Name="backgroundElement" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}" />
+                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
+            </Grid>
+            <ControlTemplate.Triggers>
+                <!--<SnippetMouseOver>-->
+                <Trigger Property="IsMouseOver" Value="true">
+                    <Setter Property="Fill" TargetName="backgroundElement" Value="AliceBlue"/>
+                </Trigger>
+                <!--</SnippetMouseOver>-->
+            </ControlTemplate.Triggers>
+        </ControlTemplate>
+        <!--<SnippetCleanTemplate>-->
+        <ControlTemplate x:Key="roundbutton" TargetType="Button">
+            <Grid>
+                <Ellipse x:Name="backgroundElement" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}" />
+                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
+            </Grid>
+        </ControlTemplate>
+        <!--</SnippetCleanTemplate>-->
+    </Window.Resources>
+    <Grid>
+
+    </Grid>
+</Window>
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window5.xaml
+    /// </summary>
+    public partial class Window5 : Window
+    {
+        public Window5()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,60 @@
+<Window x:Class="IntroToStylingAndTemplating.Window6"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Window6" SizeToContent="WidthAndHeight" MinWidth="250">
+    <Window.Resources>
+        <!--<SnippetVisualState>-->
+        <ControlTemplate x:Key="roundbutton" TargetType="Button">
+            <Grid>
+                <VisualStateManager.VisualStateGroups>
+                    <VisualStateGroup Name="CommonStates">
+                        <VisualState Name="Normal">
+                        </VisualState>
+                        <VisualState Name="MouseOver">
+                        </VisualState>
+                    </VisualStateGroup>
+                </VisualStateManager.VisualStateGroups>
+                <Ellipse x:Name="backgroundElement" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}" />
+                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
+            </Grid>
+        </ControlTemplate>
+        <!--</SnippetVisualState>-->
+        <ControlTemplate x:Key="roundbuttonOther" TargetType="Button">
+            <Grid>
+                <VisualStateManager.VisualStateGroups>
+                    <VisualStateGroup Name="CommonStates">
+                        <VisualState Name="Normal">
+                            <!--<SnippetNormalState>-->
+                            <Storyboard>
+                                <ColorAnimation Storyboard.TargetName="backgroundElement" 
+                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
+                                    To="{TemplateBinding Background}"
+                                    Duration="0:0:0.3"/>
+                            </Storyboard>
+                            <!--</SnippetNormalState>-->
+                        </VisualState>
+                        <VisualState Name="MouseOver">
+                            <!--<SnippetMouseOverState>-->
+                            <Storyboard>
+                                <ColorAnimation Storyboard.TargetName="backgroundElement" 
+                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" 
+                                    To="Yellow" 
+                                    Duration="0:0:0.3"/>
+                            </Storyboard>
+                            <!--</SnippetMouseOverState>-->
+                        </VisualState>
+                    </VisualStateGroup>
+                </VisualStateManager.VisualStateGroups>
+                <Ellipse x:Name="backgroundElement" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}" />
+                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
+            </Grid>
+        </ControlTemplate>
+    </Window.Resources>
+    <Grid>
+
+    </Grid>
+</Window>
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window6.xaml
+    /// </summary>
+    public partial class Window6 : Window
+    {
+        public Window6()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,45 @@
+<Window x:Class="IntroToStylingAndTemplating.Window7"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Template Intro Sample" SizeToContent="WidthAndHeight" MinWidth="250">
+    <Window.Resources>
+        <!--<FinalTemplate>-->
+        <ControlTemplate x:Key="roundbutton" TargetType="Button">
+            <Grid>
+                <VisualStateManager.VisualStateGroups>
+                    <VisualStateGroup Name="CommonStates">
+                        <VisualState Name="Normal">
+                            <Storyboard>
+                                <ColorAnimation Storyboard.TargetName="backgroundElement" 
+                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
+                                    To="{TemplateBinding Background}"
+                                    Duration="0:0:0.3"/>
+                            </Storyboard>
+                        </VisualState>
+                        <VisualState Name="MouseOver">
+                            <Storyboard>
+                                <ColorAnimation Storyboard.TargetName="backgroundElement" 
+                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" 
+                                    To="Yellow" 
+                                    Duration="0:0:0.3"/>
+                            </Storyboard>
+                        </VisualState>
+                    </VisualStateGroup>
+                </VisualStateManager.VisualStateGroups>
+                <Ellipse Name="backgroundElement" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}" />
+                <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" />
+            </Grid>
+        </ControlTemplate>
+        <!--</FinalTemplate>-->
+    </Window.Resources>
+    <StackPanel Margin="10">
+        <Label>Unstyled Button</Label>
+        <Button>Button 1</Button>
+        <Label>Rounded Button</Label>
+        <Button Template="{StaticResource roundbutton}" Width="65" Height="65" Click="Button_Click">Button 2</Button>
+    </StackPanel>
+</Window>
@@ -0,0 +1,30 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window7.xaml
+    /// </summary>
+    public partial class Window7 : Window
+    {
+        public Window7()
+        {
+            InitializeComponent();
+        }
+
+        private void Button_Click(object sender, RoutedEventArgs e)
+        {
+            MessageBox.Show("Clicked");
+        }
+    }
+}
@@ -0,0 +1,25 @@
+<Window x:Class="IntroToStylingAndTemplating.ExplicitStyle"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Height="100" Width="300"
+        Title="Style Intro Sample">
+    <!--<ExplicitStyleDeclare>-->
+    <Window.Resources>
+        <Style x:Key="TitleText" TargetType="TextBlock">
+            <Setter Property="HorizontalAlignment" Value="Center" />
+            <Setter Property="FontFamily" Value="Comic Sans MS"/>
+            <Setter Property="FontSize" Value="14"/>
+        </Style>
+    </Window.Resources>
+    <!--</ExplicitStyleDeclare>-->
+    <!--<ExplicitStyleReference>-->
+    <StackPanel>
+        <TextBlock Style="{StaticResource TitleText}">My Pictures</TextBlock>
+        <TextBlock>Check out my new pictures!</TextBlock>
+    </StackPanel>
+    <!--</ExplicitStyleReference>-->
+</Window>
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for ExplicitStyle.xaml
+    /// </summary>
+    public partial class ExplicitStyle : Window
+    {
+        public ExplicitStyle()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,20 @@
+<!--<WindowResources>-->
+<Window x:Class="IntroToStylingAndTemplating.WindowSingleResource"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="WindowSingleResource" Height="450" Width="800">
+    <Window.Resources>
+        
+        <Style x:Key="Header1" TargetType="TextBlock">
+            <Setter Property="FontSize" Value="15" />
+            <Setter Property="FontWeight" Value="ExtraBold" />
+        </Style>
+        
+    </Window.Resources>
+    <Grid />
+</Window>
+<!--</WindowResources>-->
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for WindowSingleResource.xaml
+    /// </summary>
+    public partial class WindowSingleResource : Window
+    {
+        public WindowSingleResource()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,9 @@
+<Application x:Class="Application"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+             StartupUri="MainWindow.xaml">
+    <Application.Resources>
+         
+    </Application.Resources>
+</Application>
@@ -0,0 +1,6 @@
+Class Application
+
+    ' Application-level events, such as Startup, Exit, and DispatcherUnhandledException
+    ' can be handled in this file.
+
+End Class
@@ -0,0 +1,18 @@
+<Window x:Class="MainWindow"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Template Intro Sample" Loaded="WindowLoaded" SizeToContent="WidthAndHeight" MinWidth="250">
+    <Window.Resources>
+
+    </Window.Resources>
+    <StackPanel Margin="10">
+        <Label>Unstyled Button</Label>
+        <Button>Button 1</Button>
+        <Label>Rounded Button</Label>
+        <Button>Button 2</Button>
+    </StackPanel>
+</Window>
@@ -0,0 +1,6 @@
+Class MainWindow
+
+    Private Sub WindowLoaded(sender As Object, e As Windows.RoutedEventArgs)
+
+    End Sub
+End Class
@@ -0,0 +1,11 @@
+<Project Sdk="Microsoft.NET.Sdk.WindowsDesktop">
+
+  <PropertyGroup>
+    <OutputType>WinExe</OutputType>
+    <TargetFramework>netcoreapp3.1</TargetFramework>
+    <RootNamespace>IntroToStylingAndTemplating</RootNamespace>
+    <UseWpf>true</UseWpf>
+    <AssemblyName>IntroToStylingAndTemplating</AssemblyName>
+  </PropertyGroup>
+
+</Project>
@@ -0,0 +1,14 @@
+// // Copyright (c) Microsoft. All rights reserved.
+// // Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+using System.Windows;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    ///     Interaction logic for App.xaml
+    /// </summary>
+    public partial class App : Application
+    {
+    }
+}
@@ -0,0 +1,18 @@
+<!--<AppResources>-->
+<Application x:Class="IntroToStylingAndTemplating.App"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+             StartupUri="WindowExplicitStyle.xaml">
+    <Application.Resources>
+        <ResourceDictionary>
+            
+            <Style x:Key="Header1" TargetType="TextBlock">
+                <Setter Property="FontSize" Value="15" />
+                <Setter Property="FontWeight" Value="ExtraBold" />
+            </Style>
+            
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>
+<!--</AppResources>-->
@@ -0,0 +1,29 @@
+<Project Sdk="Microsoft.NET.Sdk.WindowsDesktop">
+
+  <PropertyGroup>
+    <OutputType>WinExe</OutputType>
+    <TargetFramework>netcoreapp3.1</TargetFramework>
+    <RootNamespace>IntroToStylingAndTemplating</RootNamespace>
+    <UseWpf>true</UseWpf>
+    <AssemblyName>IntroToStylingAndTemplating</AssemblyName>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <None Include="images\flower1.jpg">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+    <None Include="images\flower2.jpg">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+    <None Include="images\leaf1.jpg">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+    <None Include="images\leaf2.jpg">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+    <None Include="images\winter1.jpg">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+  </ItemGroup>
+
+</Project>
@@ -0,0 +1,27 @@
+// // Copyright (c) Microsoft. All rights reserved.
+// // Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+using System.Windows;
+using System.Windows.Data;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    ///     Interaction logic for MainWindow.xaml
+    /// </summary>
+    public partial class MainWindow : Window
+    {
+        private PhotoList _photos;
+
+        public MainWindow()
+        {
+            InitializeComponent();
+        }
+
+        private void WindowLoaded(object sender, RoutedEventArgs e)
+        {
+            _photos = (PhotoList) (Resources["MyPhotos"] as ObjectDataProvider).Data;
+            _photos.Path = "images";
+        }
+    }
+}
@@ -0,0 +1,106 @@
+<Window x:Class="IntroToStylingAndTemplating.MainWindow"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Style Intro Sample" Loaded="WindowLoaded" SizeToContent="WidthAndHeight">
+    <Window.Resources>
+        <ObjectDataProvider x:Key="MyPhotos" ObjectType="{x:Type local:PhotoList}"/>
+
+        <!--A Style that affects all TextBlocks-->
+        <Style TargetType="TextBlock">
+            <Setter Property="HorizontalAlignment" Value="Center" />
+            <Setter Property="FontFamily" Value="Comic Sans MS"/>
+            <Setter Property="FontSize" Value="14"/>
+        </Style>
+
+        <!--A Style that extends the previous TextBlock Style-->
+        <!--This is a "named style" with an x:Key of TitleText-->
+        <Style BasedOn="{StaticResource {x:Type TextBlock}}"
+           TargetType="TextBlock"
+           x:Key="TitleText">
+            <Setter Property="FontSize" Value="26"/>
+            <Setter Property="Foreground">
+                <Setter.Value>
+                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
+                        <LinearGradientBrush.GradientStops>
+                            <GradientStop Offset="0.0" Color="#90DDDD" />
+                            <GradientStop Offset="1.0" Color="#5BFFFF" />
+                        </LinearGradientBrush.GradientStops>
+                    </LinearGradientBrush>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!--Horizontal ListBox Control Template-->
+        <Style TargetType="ListBox">
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="ListBox">
+                        <Border CornerRadius="5" Background="{TemplateBinding ListBox.Background}">
+                            <ScrollViewer HorizontalScrollBarVisibility="Auto">
+                                <StackPanel Orientation="Horizontal"
+                           VerticalAlignment="Center"
+                           HorizontalAlignment="Center"
+                           IsItemsHost="True"/>
+                            </ScrollViewer>
+                        </Border>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!--DataTemplate to display Photos as images
+        instead of text strings of Paths-->
+        <DataTemplate DataType="{x:Type local:Photo}">
+            <Border Margin="3">
+                <Image Source="{Binding Source}"/>
+            </Border>
+        </DataTemplate>
+
+        <Style TargetType="ListBoxItem">
+            <Setter Property="Opacity" Value="0.5" />
+            <Setter Property="MaxHeight" Value="75" />
+            <Style.Triggers>
+                <Trigger Property="IsSelected" Value="True">
+                    <Trigger.Setters>
+                        <Setter Property="Opacity" Value="1.0" />
+                    </Trigger.Setters>
+                </Trigger>
+                <EventTrigger RoutedEvent="Mouse.MouseEnter">
+                    <EventTrigger.Actions>
+                        <BeginStoryboard>
+                            <Storyboard>
+                                <DoubleAnimation
+                  Duration="0:0:0.2"
+                  Storyboard.TargetProperty="MaxHeight"
+                  To="90"  />
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </EventTrigger.Actions>
+                </EventTrigger>
+                <EventTrigger RoutedEvent="Mouse.MouseLeave">
+                    <EventTrigger.Actions>
+                        <BeginStoryboard>
+                            <Storyboard>
+                                <DoubleAnimation
+                  Duration="0:0:1"
+                  Storyboard.TargetProperty="MaxHeight"  />
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </EventTrigger.Actions>
+                </EventTrigger>
+            </Style.Triggers>
+        </Style>
+
+    </Window.Resources>
+    <StackPanel Margin="10">
+        <TextBlock Style="{StaticResource TitleText}" Name="textblock1">My Pictures</TextBlock>
+        <TextBlock>Check out my new pictures!</TextBlock>
+
+        <ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}"
+               Background="Silver" Width="600" Margin="10" SelectedIndex="0"/>
+    </StackPanel>
+</Window>
@@ -0,0 +1,19 @@
+// // Copyright (c) Microsoft. All rights reserved.
+// // Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+namespace IntroToStylingAndTemplating
+{
+    // <PhotoClass>
+    public class Photo
+    {
+        public Photo(string path)
+        {
+            Source = path;
+        }
+
+        public string Source { get; }
+
+        public override string ToString() => Source;
+    }
+    // </PhotoClass>
+}
@@ -0,0 +1,55 @@
+// // Copyright (c) Microsoft. All rights reserved.
+// // Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+using System.Collections.ObjectModel;
+using System.IO;
+
+namespace IntroToStylingAndTemplating
+{
+    public class PhotoList : ObservableCollection<Photo>
+    {
+        private DirectoryInfo _directory;
+
+        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 (var f in _directory.GetFiles("*.jpg"))
+            {
+                Add(new Photo(f.FullName));
+            }
+        }
+    }
+}
@@ -0,0 +1,25 @@
+<Window x:Class="IntroToStylingAndTemplating.Window1"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Window1" Height="450" Width="800">
+    <!--<SnippetDefaultTextBlockStyle>-->
+    <Window.Resources>
+        <!--A Style that affects all TextBlocks-->
+        <Style TargetType="TextBlock">
+            <Setter Property="HorizontalAlignment" Value="Center" />
+            <Setter Property="FontFamily" Value="Comic Sans MS"/>
+            <Setter Property="FontSize" Value="14"/>
+        </Style>
+    </Window.Resources>
+    <!--</SnippetDefaultTextBlockStyle>-->
+    <!--<SnippetTextBlocks>-->
+    <StackPanel>
+        <TextBlock>My Pictures</TextBlock>
+        <TextBlock>Check out my new pictures!</TextBlock>
+    </StackPanel>
+    <!--</SnippetTextBlocks>-->
+</Window>
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window1.xaml
+    /// </summary>
+    public partial class Window1 : Window
+    {
+        public Window1()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,44 @@
+<Window x:Class="IntroToStylingAndTemplating.Window2"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Window2" Height="450" Width="800" Loaded="Window_Loaded">
+    <!--<SnippetDefaultTextBlockStyleBasedOn>-->
+    <Window.Resources>
+        <!-- .... other resources .... -->
+
+        <!--A Style that affects all TextBlocks-->
+        <Style TargetType="TextBlock">
+            <Setter Property="HorizontalAlignment" Value="Center" />
+            <Setter Property="FontFamily" Value="Comic Sans MS"/>
+            <Setter Property="FontSize" Value="14"/>
+        </Style>
+        
+        <!--A Style that extends the previous TextBlock Style with an x:Key of TitleText-->
+        <Style BasedOn="{StaticResource {x:Type TextBlock}}"
+               TargetType="TextBlock"
+               x:Key="TitleText">
+            <Setter Property="FontSize" Value="26"/>
+            <Setter Property="Foreground">
+                <Setter.Value>
+                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
+                        <LinearGradientBrush.GradientStops>
+                            <GradientStop Offset="0.0" Color="#90DDDD" />
+                            <GradientStop Offset="1.0" Color="#5BFFFF" />
+                        </LinearGradientBrush.GradientStops>
+                    </LinearGradientBrush>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </Window.Resources>
+    <!--</SnippetDefaultTextBlockStyleBasedOn>-->
+    <!--<SnippetTextBlocksExplicit>-->
+    <StackPanel>
+        <TextBlock Style="{StaticResource TitleText}" Name="textblock1">My Pictures</TextBlock>
+        <TextBlock>Check out my new pictures!</TextBlock>
+    </StackPanel>
+    <!--</SnippetTextBlocksExplicit>-->
+</Window>
@@ -0,0 +1,32 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window2.xaml
+    /// </summary>
+    public partial class Window2 : Window
+    {
+        public Window2()
+        {
+            InitializeComponent();
+        }
+
+        private void Window_Loaded(object sender, RoutedEventArgs e)
+        {
+            // <SnippetSetStyleCode>
+            textblock1.Style = (Style)Resources["TitleText"];
+            // </SnippetSetStyleCode>
+        }
+    }
+}
@@ -0,0 +1,20 @@
+<Window x:Class="IntroToStylingAndTemplating.Window3"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Window3" Height="450" Width="800">
+    <Window.Resources>
+        <ObjectDataProvider x:Key="MyPhotos" ObjectType="{x:Type local:PhotoList}"/>
+    </Window.Resources>
+    <StackPanel>
+        <TextBlock>My Pictures</TextBlock>
+        <TextBlock>Check out my new pictures!</TextBlock>
+        <!--<SnippetListBox>-->
+        <ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}"
+                 Background="Silver" Width="600" Margin="10" SelectedIndex="0"/>
+        <!--</SnippetListBox>-->
+    </StackPanel>
+</Window>
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window3.xaml
+    /// </summary>
+    public partial class Window3 : Window
+    {
+        public Window3()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,26 @@
+<Window x:Class="IntroToStylingAndTemplating.Window4"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Window4" Height="450" Width="800">
+    <!--<SnippetDataTemplate>-->
+    <Window.Resources>
+        <!-- .... other resources .... -->
+
+        <!--DataTemplate to display Photos as images
+        instead of text strings of Paths-->
+        <DataTemplate DataType="{x:Type local:Photo}">
+            <Border Margin="3">
+                <Image Source="{Binding Source}"/>
+            </Border>
+        </DataTemplate>
+    </Window.Resources>
+    <!--</SnippetDataTemplate>-->
+    <StackPanel>
+        <TextBlock>My Pictures</TextBlock>
+        <TextBlock>Check out my new pictures!</TextBlock>
+    </StackPanel>
+</Window>
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window4.xaml
+    /// </summary>
+    public partial class Window4 : Window
+    {
+        public Window4()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,30 @@
+<Window x:Class="IntroToStylingAndTemplating.Window5"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Window5" Height="450" Width="800">
+    <!--<SnippetPropertyTrigger>-->
+    <Window.Resources>
+        <!-- .... other resources .... -->
+
+        <Style TargetType="ListBoxItem">
+            <Setter Property="Opacity" Value="0.5" />
+            <Setter Property="MaxHeight" Value="75" />
+            <Style.Triggers>
+                <Trigger Property="IsSelected" Value="True">
+                    <Trigger.Setters>
+                        <Setter Property="Opacity" Value="1.0" />
+                    </Trigger.Setters>
+                </Trigger>
+            </Style.Triggers>
+        </Style>
+    </Window.Resources>
+    <!--</SnippetPropertyTrigger>-->
+    <StackPanel>
+        <TextBlock>My Pictures</TextBlock>
+        <TextBlock>Check out my new pictures!</TextBlock>
+    </StackPanel>
+</Window>
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window5.xaml
+    /// </summary>
+    public partial class Window5 : Window
+    {
+        public Window5()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,53 @@
+<Window x:Class="IntroToStylingAndTemplating.Window6"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Window6" Height="450" Width="800">
+    <Window.Resources>
+        <!-- .... other resources .... -->
+
+        <Style TargetType="ListBoxItem">
+            <Setter Property="Opacity" Value="0.5" />
+            <Setter Property="MaxHeight" Value="75" />
+            <!--<SnippetStyleEventTriggers>-->
+            <Style.Triggers>
+                <Trigger Property="IsSelected" Value="True">
+                    <Trigger.Setters>
+                        <Setter Property="Opacity" Value="1.0" />
+                    </Trigger.Setters>
+                </Trigger>
+                <EventTrigger RoutedEvent="Mouse.MouseEnter">
+                    <EventTrigger.Actions>
+                        <BeginStoryboard>
+                            <Storyboard>
+                                <DoubleAnimation
+                                    Duration="0:0:0.2"
+                                    Storyboard.TargetProperty="MaxHeight"
+                                    To="90"  />
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </EventTrigger.Actions>
+                </EventTrigger>
+                <EventTrigger RoutedEvent="Mouse.MouseLeave">
+                    <EventTrigger.Actions>
+                        <BeginStoryboard>
+                            <Storyboard>
+                                <DoubleAnimation
+                                    Duration="0:0:1"
+                                    Storyboard.TargetProperty="MaxHeight"  />
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </EventTrigger.Actions>
+                </EventTrigger>
+            </Style.Triggers>
+            <!--</SnippetStyleEventTriggers>-->
+        </Style>
+    </Window.Resources>
+    <StackPanel>
+        <TextBlock>My Pictures</TextBlock>
+        <TextBlock>Check out my new pictures!</TextBlock>
+    </StackPanel>
+</Window>
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window6.xaml
+    /// </summary>
+    public partial class Window6 : Window
+    {
+        public Window6()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,25 @@
+<Window x:Class="IntroToStylingAndTemplating.ExplicitStyle"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Height="100" Width="300"
+        Title="Style Intro Sample">
+    <!--<ExplicitStyleDeclare>-->
+    <Window.Resources>
+        <Style x:Key="TitleText" TargetType="TextBlock">
+            <Setter Property="HorizontalAlignment" Value="Center" />
+            <Setter Property="FontFamily" Value="Comic Sans MS"/>
+            <Setter Property="FontSize" Value="14"/>
+        </Style>
+    </Window.Resources>
+    <!--</ExplicitStyleDeclare>-->
+    <!--<ExplicitStyleReference>-->
+    <StackPanel>
+        <TextBlock Style="{StaticResource TitleText}">My Pictures</TextBlock>
+        <TextBlock>Check out my new pictures!</TextBlock>
+    </StackPanel>
+    <!--</ExplicitStyleReference>-->
+</Window>
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for ExplicitStyle.xaml
+    /// </summary>
+    public partial class ExplicitStyle : Window
+    {
+        public ExplicitStyle()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,20 @@
+<!--<WindowResources>-->
+<Window x:Class="IntroToStylingAndTemplating.WindowSingleResource"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="WindowSingleResource" Height="450" Width="800">
+    <Window.Resources>
+        
+        <Style x:Key="Header1" TargetType="TextBlock">
+            <Setter Property="FontSize" Value="15" />
+            <Setter Property="FontWeight" Value="ExtraBold" />
+        </Style>
+        
+    </Window.Resources>
+    <Grid />
+</Window>
+<!--</WindowResources>-->
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for WindowSingleResource.xaml
+    /// </summary>
+    public partial class WindowSingleResource : Window
+    {
+        public WindowSingleResource()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,9 @@
+<Application x:Class="Application"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+             StartupUri="MainWindow.xaml">
+    <Application.Resources>
+         
+    </Application.Resources>
+</Application>
@@ -0,0 +1,6 @@
+Class Application
+
+    ' Application-level events, such as Startup, Exit, and DispatcherUnhandledException
+    ' can be handled in this file.
+
+End Class
@@ -0,0 +1,33 @@
+<Window x:Class="MainWindow"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="MainWindow" Height="450" Width="800" Loaded="Window_Loaded">
+    <Window.Resources>
+        <!-- .... other resources .... -->
+
+        <!--A Style that extends the previous TextBlock Style-->
+        <!--This is a "named style" with an x:Key of TitleText-->
+        <Style BasedOn="{StaticResource {x:Type TextBlock}}"
+               TargetType="TextBlock"
+               x:Key="TitleText">
+            <Setter Property="FontSize" Value="26"/>
+            <Setter Property="Foreground">
+                <Setter.Value>
+                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
+                        <LinearGradientBrush.GradientStops>
+                            <GradientStop Offset="0.0" Color="#90DDDD" />
+                            <GradientStop Offset="1.0" Color="#5BFFFF" />
+                        </LinearGradientBrush.GradientStops>
+                    </LinearGradientBrush>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </Window.Resources>
+    <Grid>
+        <TextBlock Name="textblock1">My Pictures</TextBlock>
+    </Grid>
+</Window>
@@ -0,0 +1,7 @@
+Class MainWindow
+    Private Sub Window_Loaded(sender As Object, e As Windows.RoutedEventArgs)
+        '<SnippetSetStyleCode>
+        textblock1.Style = CType(Resources("TitleText"), Windows.Style)
+        '</SnippetSetStyleCode>
+    End Sub
+End Class
@@ -0,0 +1,13 @@
+' <PhotoClass>
+Public Class Photo
+    Sub New(ByVal path As String)
+        Source = path
+    End Sub
+
+    Public ReadOnly Property Source As String
+
+    Public Overrides Function ToString() As String
+        Return Source
+    End Function
+End Class
+' </PhotoClass>
@@ -0,0 +1,11 @@
+<Project Sdk="Microsoft.NET.Sdk.WindowsDesktop">
+
+  <PropertyGroup>
+    <OutputType>WinExe</OutputType>
+    <TargetFramework>netcoreapp3.1</TargetFramework>
+    <RootNamespace>IntroToStylingAndTemplating</RootNamespace>
+    <UseWpf>true</UseWpf>
+    <AssemblyName>IntroToStylingAndTemplating</AssemblyName>
+  </PropertyGroup>
+
+</Project>
@@ -0,0 +1,14 @@
+// // Copyright (c) Microsoft. All rights reserved.
+// // Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+using System.Windows;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    ///     Interaction logic for App.xaml
+    /// </summary>
+    public partial class App : Application
+    {
+    }
+}
@@ -0,0 +1,18 @@
+<!--<AppResources>-->
+<Application x:Class="IntroToStylingAndTemplating.App"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+             StartupUri="WindowExplicitStyle.xaml">
+    <Application.Resources>
+        <ResourceDictionary>
+            
+            <Style x:Key="Header1" TargetType="TextBlock">
+                <Setter Property="FontSize" Value="15" />
+                <Setter Property="FontWeight" Value="ExtraBold" />
+            </Style>
+            
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>
+<!--</AppResources>-->
@@ -0,0 +1,29 @@
+<Project Sdk="Microsoft.NET.Sdk.WindowsDesktop">
+
+  <PropertyGroup>
+    <OutputType>WinExe</OutputType>
+    <TargetFramework>netcoreapp3.1</TargetFramework>
+    <RootNamespace>IntroToStylingAndTemplating</RootNamespace>
+    <UseWpf>true</UseWpf>
+    <AssemblyName>IntroToStylingAndTemplating</AssemblyName>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <None Include="images\flower1.jpg">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+    <None Include="images\flower2.jpg">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+    <None Include="images\leaf1.jpg">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+    <None Include="images\leaf2.jpg">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+    <None Include="images\winter1.jpg">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+  </ItemGroup>
+
+</Project>
@@ -0,0 +1,27 @@
+// // Copyright (c) Microsoft. All rights reserved.
+// // Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+using System.Windows;
+using System.Windows.Data;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    ///     Interaction logic for MainWindow.xaml
+    /// </summary>
+    public partial class MainWindow : Window
+    {
+        private PhotoList _photos;
+
+        public MainWindow()
+        {
+            InitializeComponent();
+        }
+
+        private void WindowLoaded(object sender, RoutedEventArgs e)
+        {
+            _photos = (PhotoList) (Resources["MyPhotos"] as ObjectDataProvider).Data;
+            _photos.Path = "images";
+        }
+    }
+}
@@ -0,0 +1,106 @@
+<Window x:Class="IntroToStylingAndTemplating.MainWindow"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Style Intro Sample" Loaded="WindowLoaded" SizeToContent="WidthAndHeight">
+    <Window.Resources>
+        <ObjectDataProvider x:Key="MyPhotos" ObjectType="{x:Type local:PhotoList}"/>
+
+        <!--A Style that affects all TextBlocks-->
+        <Style TargetType="TextBlock">
+            <Setter Property="HorizontalAlignment" Value="Center" />
+            <Setter Property="FontFamily" Value="Comic Sans MS"/>
+            <Setter Property="FontSize" Value="14"/>
+        </Style>
+
+        <!--A Style that extends the previous TextBlock Style-->
+        <!--This is a "named style" with an x:Key of TitleText-->
+        <Style BasedOn="{StaticResource {x:Type TextBlock}}"
+           TargetType="TextBlock"
+           x:Key="TitleText">
+            <Setter Property="FontSize" Value="26"/>
+            <Setter Property="Foreground">
+                <Setter.Value>
+                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
+                        <LinearGradientBrush.GradientStops>
+                            <GradientStop Offset="0.0" Color="#90DDDD" />
+                            <GradientStop Offset="1.0" Color="#5BFFFF" />
+                        </LinearGradientBrush.GradientStops>
+                    </LinearGradientBrush>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!--Horizontal ListBox Control Template-->
+        <Style TargetType="ListBox">
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="ListBox">
+                        <Border CornerRadius="5" Background="{TemplateBinding ListBox.Background}">
+                            <ScrollViewer HorizontalScrollBarVisibility="Auto">
+                                <StackPanel Orientation="Horizontal"
+                           VerticalAlignment="Center"
+                           HorizontalAlignment="Center"
+                           IsItemsHost="True"/>
+                            </ScrollViewer>
+                        </Border>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!--DataTemplate to display Photos as images
+        instead of text strings of Paths-->
+        <DataTemplate DataType="{x:Type local:Photo}">
+            <Border Margin="3">
+                <Image Source="{Binding Source}"/>
+            </Border>
+        </DataTemplate>
+
+        <Style TargetType="ListBoxItem">
+            <Setter Property="Opacity" Value="0.5" />
+            <Setter Property="MaxHeight" Value="75" />
+            <Style.Triggers>
+                <Trigger Property="IsSelected" Value="True">
+                    <Trigger.Setters>
+                        <Setter Property="Opacity" Value="1.0" />
+                    </Trigger.Setters>
+                </Trigger>
+                <EventTrigger RoutedEvent="Mouse.MouseEnter">
+                    <EventTrigger.Actions>
+                        <BeginStoryboard>
+                            <Storyboard>
+                                <DoubleAnimation
+                  Duration="0:0:0.2"
+                  Storyboard.TargetProperty="MaxHeight"
+                  To="90"  />
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </EventTrigger.Actions>
+                </EventTrigger>
+                <EventTrigger RoutedEvent="Mouse.MouseLeave">
+                    <EventTrigger.Actions>
+                        <BeginStoryboard>
+                            <Storyboard>
+                                <DoubleAnimation
+                  Duration="0:0:1"
+                  Storyboard.TargetProperty="MaxHeight"  />
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </EventTrigger.Actions>
+                </EventTrigger>
+            </Style.Triggers>
+        </Style>
+
+    </Window.Resources>
+    <StackPanel Margin="10">
+        <TextBlock Style="{StaticResource TitleText}" Name="textblock1">My Pictures</TextBlock>
+        <TextBlock>Check out my new pictures!</TextBlock>
+
+        <ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}"
+               Background="Silver" Width="600" Margin="10" SelectedIndex="0"/>
+    </StackPanel>
+</Window>
@@ -0,0 +1,19 @@
+// // Copyright (c) Microsoft. All rights reserved.
+// // Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+namespace IntroToStylingAndTemplating
+{
+    // <PhotoClass>
+    public class Photo
+    {
+        public Photo(string path)
+        {
+            Source = path;
+        }
+
+        public string Source { get; }
+
+        public override string ToString() => Source;
+    }
+    // </PhotoClass>
+}
@@ -0,0 +1,55 @@
+// // Copyright (c) Microsoft. All rights reserved.
+// // Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+using System.Collections.ObjectModel;
+using System.IO;
+
+namespace IntroToStylingAndTemplating
+{
+    public class PhotoList : ObservableCollection<Photo>
+    {
+        private DirectoryInfo _directory;
+
+        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 (var f in _directory.GetFiles("*.jpg"))
+            {
+                Add(new Photo(f.FullName));
+            }
+        }
+    }
+}
@@ -0,0 +1,25 @@
+<Window x:Class="IntroToStylingAndTemplating.Window1"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Window1" Height="450" Width="800">
+    <!--<SnippetDefaultTextBlockStyle>-->
+    <Window.Resources>
+        <!--A Style that affects all TextBlocks-->
+        <Style TargetType="TextBlock">
+            <Setter Property="HorizontalAlignment" Value="Center" />
+            <Setter Property="FontFamily" Value="Comic Sans MS"/>
+            <Setter Property="FontSize" Value="14"/>
+        </Style>
+    </Window.Resources>
+    <!--</SnippetDefaultTextBlockStyle>-->
+    <!--<SnippetTextBlocks>-->
+    <StackPanel>
+        <TextBlock>My Pictures</TextBlock>
+        <TextBlock>Check out my new pictures!</TextBlock>
+    </StackPanel>
+    <!--</SnippetTextBlocks>-->
+</Window>
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window1.xaml
+    /// </summary>
+    public partial class Window1 : Window
+    {
+        public Window1()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,44 @@
+<Window x:Class="IntroToStylingAndTemplating.Window2"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Window2" Height="450" Width="800" Loaded="Window_Loaded">
+    <!--<SnippetDefaultTextBlockStyleBasedOn>-->
+    <Window.Resources>
+        <!-- .... other resources .... -->
+
+        <!--A Style that affects all TextBlocks-->
+        <Style TargetType="TextBlock">
+            <Setter Property="HorizontalAlignment" Value="Center" />
+            <Setter Property="FontFamily" Value="Comic Sans MS"/>
+            <Setter Property="FontSize" Value="14"/>
+        </Style>
+        
+        <!--A Style that extends the previous TextBlock Style with an x:Key of TitleText-->
+        <Style BasedOn="{StaticResource {x:Type TextBlock}}"
+               TargetType="TextBlock"
+               x:Key="TitleText">
+            <Setter Property="FontSize" Value="26"/>
+            <Setter Property="Foreground">
+                <Setter.Value>
+                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
+                        <LinearGradientBrush.GradientStops>
+                            <GradientStop Offset="0.0" Color="#90DDDD" />
+                            <GradientStop Offset="1.0" Color="#5BFFFF" />
+                        </LinearGradientBrush.GradientStops>
+                    </LinearGradientBrush>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </Window.Resources>
+    <!--</SnippetDefaultTextBlockStyleBasedOn>-->
+    <!--<SnippetTextBlocksExplicit>-->
+    <StackPanel>
+        <TextBlock Style="{StaticResource TitleText}" Name="textblock1">My Pictures</TextBlock>
+        <TextBlock>Check out my new pictures!</TextBlock>
+    </StackPanel>
+    <!--</SnippetTextBlocksExplicit>-->
+</Window>
@@ -0,0 +1,32 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window2.xaml
+    /// </summary>
+    public partial class Window2 : Window
+    {
+        public Window2()
+        {
+            InitializeComponent();
+        }
+
+        private void Window_Loaded(object sender, RoutedEventArgs e)
+        {
+            // <SnippetSetStyleCode>
+            textblock1.Style = (Style)Resources["TitleText"];
+            // </SnippetSetStyleCode>
+        }
+    }
+}
@@ -0,0 +1,20 @@
+<Window x:Class="IntroToStylingAndTemplating.Window3"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Window3" Height="450" Width="800">
+    <Window.Resources>
+        <ObjectDataProvider x:Key="MyPhotos" ObjectType="{x:Type local:PhotoList}"/>
+    </Window.Resources>
+    <StackPanel>
+        <TextBlock>My Pictures</TextBlock>
+        <TextBlock>Check out my new pictures!</TextBlock>
+        <!--<SnippetListBox>-->
+        <ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}"
+                 Background="Silver" Width="600" Margin="10" SelectedIndex="0"/>
+        <!--</SnippetListBox>-->
+    </StackPanel>
+</Window>
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window3.xaml
+    /// </summary>
+    public partial class Window3 : Window
+    {
+        public Window3()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,26 @@
+<Window x:Class="IntroToStylingAndTemplating.Window4"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Window4" Height="450" Width="800">
+    <!--<SnippetDataTemplate>-->
+    <Window.Resources>
+        <!-- .... other resources .... -->
+
+        <!--DataTemplate to display Photos as images
+        instead of text strings of Paths-->
+        <DataTemplate DataType="{x:Type local:Photo}">
+            <Border Margin="3">
+                <Image Source="{Binding Source}"/>
+            </Border>
+        </DataTemplate>
+    </Window.Resources>
+    <!--</SnippetDataTemplate>-->
+    <StackPanel>
+        <TextBlock>My Pictures</TextBlock>
+        <TextBlock>Check out my new pictures!</TextBlock>
+    </StackPanel>
+</Window>
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window4.xaml
+    /// </summary>
+    public partial class Window4 : Window
+    {
+        public Window4()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,30 @@
+<Window x:Class="IntroToStylingAndTemplating.Window5"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Window5" Height="450" Width="800">
+    <!--<SnippetPropertyTrigger>-->
+    <Window.Resources>
+        <!-- .... other resources .... -->
+
+        <Style TargetType="ListBoxItem">
+            <Setter Property="Opacity" Value="0.5" />
+            <Setter Property="MaxHeight" Value="75" />
+            <Style.Triggers>
+                <Trigger Property="IsSelected" Value="True">
+                    <Trigger.Setters>
+                        <Setter Property="Opacity" Value="1.0" />
+                    </Trigger.Setters>
+                </Trigger>
+            </Style.Triggers>
+        </Style>
+    </Window.Resources>
+    <!--</SnippetPropertyTrigger>-->
+    <StackPanel>
+        <TextBlock>My Pictures</TextBlock>
+        <TextBlock>Check out my new pictures!</TextBlock>
+    </StackPanel>
+</Window>
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window5.xaml
+    /// </summary>
+    public partial class Window5 : Window
+    {
+        public Window5()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,53 @@
+<Window x:Class="IntroToStylingAndTemplating.Window6"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="Window6" Height="450" Width="800">
+    <Window.Resources>
+        <!-- .... other resources .... -->
+
+        <Style TargetType="ListBoxItem">
+            <Setter Property="Opacity" Value="0.5" />
+            <Setter Property="MaxHeight" Value="75" />
+            <!--<SnippetStyleEventTriggers>-->
+            <Style.Triggers>
+                <Trigger Property="IsSelected" Value="True">
+                    <Trigger.Setters>
+                        <Setter Property="Opacity" Value="1.0" />
+                    </Trigger.Setters>
+                </Trigger>
+                <EventTrigger RoutedEvent="Mouse.MouseEnter">
+                    <EventTrigger.Actions>
+                        <BeginStoryboard>
+                            <Storyboard>
+                                <DoubleAnimation
+                                    Duration="0:0:0.2"
+                                    Storyboard.TargetProperty="MaxHeight"
+                                    To="90"  />
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </EventTrigger.Actions>
+                </EventTrigger>
+                <EventTrigger RoutedEvent="Mouse.MouseLeave">
+                    <EventTrigger.Actions>
+                        <BeginStoryboard>
+                            <Storyboard>
+                                <DoubleAnimation
+                                    Duration="0:0:1"
+                                    Storyboard.TargetProperty="MaxHeight"  />
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </EventTrigger.Actions>
+                </EventTrigger>
+            </Style.Triggers>
+            <!--</SnippetStyleEventTriggers>-->
+        </Style>
+    </Window.Resources>
+    <StackPanel>
+        <TextBlock>My Pictures</TextBlock>
+        <TextBlock>Check out my new pictures!</TextBlock>
+    </StackPanel>
+</Window>
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for Window6.xaml
+    /// </summary>
+    public partial class Window6 : Window
+    {
+        public Window6()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,25 @@
+<Window x:Class="IntroToStylingAndTemplating.ExplicitStyle"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Height="100" Width="300"
+        Title="Style Intro Sample">
+    <!--<ExplicitStyleDeclare>-->
+    <Window.Resources>
+        <Style x:Key="TitleText" TargetType="TextBlock">
+            <Setter Property="HorizontalAlignment" Value="Center" />
+            <Setter Property="FontFamily" Value="Comic Sans MS"/>
+            <Setter Property="FontSize" Value="14"/>
+        </Style>
+    </Window.Resources>
+    <!--</ExplicitStyleDeclare>-->
+    <!--<ExplicitStyleReference>-->
+    <StackPanel>
+        <TextBlock Style="{StaticResource TitleText}">My Pictures</TextBlock>
+        <TextBlock>Check out my new pictures!</TextBlock>
+    </StackPanel>
+    <!--</ExplicitStyleReference>-->
+</Window>
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for ExplicitStyle.xaml
+    /// </summary>
+    public partial class ExplicitStyle : Window
+    {
+        public ExplicitStyle()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,20 @@
+<!--<WindowResources>-->
+<Window x:Class="IntroToStylingAndTemplating.WindowSingleResource"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
+        mc:Ignorable="d"
+        Title="WindowSingleResource" Height="450" Width="800">
+    <Window.Resources>
+        
+        <Style x:Key="Header1" TargetType="TextBlock">
+            <Setter Property="FontSize" Value="15" />
+            <Setter Property="FontWeight" Value="ExtraBold" />
+        </Style>
+        
+    </Window.Resources>
+    <Grid />
+</Window>
+<!--</WindowResources>-->
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace IntroToStylingAndTemplating
+{
+    /// <summary>
+    /// Interaction logic for WindowSingleResource.xaml
+    /// </summary>
+    public partial class WindowSingleResource : Window
+    {
+        public WindowSingleResource()
+        {
+            InitializeComponent();
+        }
+    }
+}
--- a/Show More
+++ b/Show More