The following example demonstrates the definition of a custom DependencyProperty on a simple System.Windows.Controls.UserControl (MyControl, defined in MyControl.xaml). The UserControl contains two text blocks: one set by the control's code-behind, and the other bound to a dependency property defined in the control's code-behind.

<UserControl
    x:Class="Apress.VisualCSharpRecipes.Chapter17.MyControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="20" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TextBlock x:Name="txblFontWeight" Text="FontWeight set to: Normal."  />

        <Viewbox Grid.Row="1">
            <TextBlock Text="{Binding Path=TextContent}"
                FontWeight="{Binding Path=TextFontWeight}" />
        </Viewbox>
    </Grid>
</UserControl>

The following code block details the code-behind for the previous markup (MyControl.xaml.cs):

using System.Windows;
using System.Windows.Controls;

namespace Apress.VisualCSharpRecipes.Chapter17
{
    public partial class MyControl : UserControl
    {
        public MyControl()
        {
            InitializeComponent();
            DataContext = this;
        }

        public FontWeight TextFontWeight
        {
            get { return (FontWeight)GetValue(TextFontWeightProperty); }
            set { SetValue(TextFontWeightProperty, value); }
        }

        public static readonly DependencyProperty TextFontWeightProperty =
            DependencyProperty.Register(
                "TextFontWeight",
                typeof(FontWeight),
                typeof(MyControl),
                new FrameworkPropertyMetadata(FontWeights.Normal,
                             FrameworkPropertyMetadataOptions.AffectsArrange
                             & FrameworkPropertyMetadataOptions.AffectsMeasure
                             & FrameworkPropertyMetadataOptions.AffectsRender,
                             TextFontWeight_PropertyChanged,
                             TextFontWeight_CoerceValue));

        public string TextContent
        {
            get { return (string)GetValue(TextContentProperty); }
            set { SetValue(TextContentProperty, value); }
        }

        public static readonly DependencyProperty TextContentProperty =
            DependencyProperty.Register(
                "TextContent",
                typeof(string),
                typeof(MyControl),

                new FrameworkPropertyMetadata(
                   "Default Value",
                   FrameworkPropertyMetadataOptions.AffectsArrange
                   & FrameworkPropertyMetadataOptions.AffectsMeasure
                   & FrameworkPropertyMetadataOptions.AffectsRender));

private static object TextFontWeight_CoerceValue(DependencyObject d,
               object value)
        {
            FontWeight fontWeight = (FontWeight)value;

            if (fontWeight == FontWeights.Bold
                || fontWeight == FontWeights.Normal)
            {
                return fontWeight;
            }

            return FontWeights.Normal;
        }

        private static void TextFontWeight_PropertyChanged(DependencyObject d,
                                  DependencyPropertyChangedEventArgs e)
        {
            MyControl myControl = d as MyControl;

            if (myControl != null)
            {
                FontWeight fontWeight = (FontWeight)e.NewValue;
                string fontWeightName;

                if (fontWeight == FontWeights.Bold)
                    fontWeightName = "Bold";
                else
                    fontWeightName = "Normal";

                myControl.txblFontWeight.Text =
                        string.Format("Font weight set to: {0}.", fontWeightName);
            }
        }
    }
}

The following code defines a simple System.Windows.Window that contains a few controls. The window's code-behind defines an attached property named RotationProperty with SystemWindows.UIElement as the target type. The window's markup defines four controls, three of which have the value of MainWindow.Rotation set in XAML. The button's value for this property is not set and will therefore return the default value for the property—0 in this case.

<Window
    x:Class=" Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Apress.VisualCSharpRecipes.Chapter17"
    Title="Recipe17_02" Height="350" Width="350">
    <UniformGrid>
        <Button Content="Click me!"  Click="UIElement_Click" Margin="10" />

        <Border MouseLeftButtonDown="UIElement_Click"
             BorderThickness="1" BorderBrush="Black" Background="Transparent"
             Margin="10" local:MainWindow.Rotation="3.14" />

        <ListView PreviewMouseLeftButtonDown="UIElement_Click"
            Margin="10" local:MainWindow.Rotation="1.57">
            <ListViewItem Content="Item 1" />
            <ListViewItem Content="Item 1" />
            <ListViewItem Content="Item 1" />
            <ListViewItem Content="Item 1" />
        </ListView>

<local:UserControl1 Margin="10" local:MainWindow.Rotation="1.0" />
    </UniformGrid>
</Window>

using System.Windows;
using System.Windows.Controls;

namespace Apress.VisualCSharpRecipes.Chapter17
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void UIElement_Click(object sender, RoutedEventArgs e)
        {
            UIElement uiElement = (UIElement)sender;

            MessageBox.Show("Rotation = " + GetRotation(uiElement), "Recipe17_02");
        }

        public static readonly DependencyProperty RotationProperty =
            DependencyProperty.RegisterAttached("Rotation",
                                                typeof(double),
                                                typeof(MainWindow),
                                                new FrameworkPropertyMetadata(
                            0d, FrameworkPropertyMetadataOptions.AffectsRender));

        public static void SetRotation(UIElement element, double value)
        {
            element.SetValue(RotationProperty, value);
        }

        public static double GetRotation(UIElement element)
        {
            return (double)element.GetValue(RotationProperty);
        }
    }
}

The following markup and code-behind define a simple System.Windows.Controls.UserControl that demonstrates the use of the custom attached property in code:

<UserControl
    x:Class=" Apress.VisualCSharpRecipes.Chapter17.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    MouseLeftButtonDown="UserControl_MouseLeftButtonDown"
    Background="Transparent">
    <Viewbox>
        <TextBlock Text="I'm a UserControl" />
    </Viewbox>
</UserControl>

using System.Windows;
using System.Windows.Controls;

namespace Apress.VisualCSharpRecipes.Chapter17
{
    /// <summary>
    /// Interaction logic for UserControl1.xaml
    /// </summary>
    public partial class UserControl1 : UserControl
    {
        public UserControl1()
        {
            InitializeComponent();
        }

        private void UserControl_MouseLeftButtonDown(object sender,
                                                     RoutedEventArgs e)
        {
            UserControl1 uiElement = (UserControl1)sender;

            MessageBox.Show("Rotation = " + MainWindow.GetRotation(uiElement),
                            "Recipe17_02");
        }
    }
}

Figure 17-1 shows the result of clicking the button. A value for the MainWindow.Rotation property is not explicitly set on the button; therefore, it is displaying the default value.

Figure 17.1. The result of clicking the button

The following example demonstrates the content of an application's App.xaml. Two System.Windows.Media.SolidColorBrush resources are defined that are referenced in other parts of the application.

<Application
  x:Class="Apress.VisualCSharpRecipes.Chapter17.App"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  StartupUri="MainWindow.xaml">
  <Application.Resources>
    <SolidColorBrush x:Key="FontBrush" Color="#FF222222" />
    <SolidColorBrush x:Key="BackgroundBrush" Color="#FFDDDDDD" />
  </Application.Resources>
</Application>

The following example demonstrates the content of the application's MainWindow.xaml file. The two resources that were defined in the application's resources are used by controls in the System.Windows.Window. The first resource is used to set the background property of the outer System.Windows.Controls.Grid, and the second resource is used to set the foreground property of a System.Windows.Controls.TextBlock (see Figure 17-2).

<Window
    x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Recipe17_03" Height="100" Width="300">
    <Grid Background="{StaticResource BackgroundBrush}">
        <Viewbox>
            <TextBlock Text="Some Text" Margin="5"
                Foreground="{StaticResource FontBrush}" />
        </Viewbox>
    </Grid>
</Window>

Figure 17.2. Using an application-level resource to set properties on controls

The following example demonstrates a System.Windows.Window that contains a System.Windows.Controls.Grid. Inside the Grid are a System.Windows.Controls.CheckBox and a System.Windows.Controls.Expander. The IsExpanded property of the Expander is bound to the IsChecked property of the CheckBox. This is a very simple binding, but it gives an example where you are able to place a breakpoint in code.

<Window
    x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Apress.VisualCSharpRecipes.Chapter17"
    Title="Recipe17_04" Width="200" Height="200">
    <Window.Resources>
        <local:DebugConverter x:Key="DebugConverter" />
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.5*" />
            <RowDefinition Height="0.5*"/>
        </Grid.RowDefinitions>

        <CheckBox x:Name="chkShouldItBeOpen" Margin="10"
            IsChecked="False" Content="Open Expander" />

        <Expander IsExpanded="{Binding
            ElementName=chkShouldItBeOpen, Path=IsChecked,
            Converter={StaticResource DebugConverter}}"
            Grid.Row="1" Background="Black" Foreground="White"
            Margin="10" VerticalAlignment="Center"
            HorizontalAlignment="Center" Header="I'm an Expander!">
                <TextBlock Text="Expander Open" Foreground="White"/>
        </Expander>
    </Grid>
</Window>

The following code defines the code-behind for the previous XAML:

using System.Windows;

namespace Apress.VisualCSharpRecipes.Chapter17
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

The following code defines a converter class that simply returns the value passed to it unchanged. However, you can place breakpoints on these lines of code to see what data is flowing through the converter:

using System;
using System.Globalization;
using System.Windows.Data;

namespace Apress.VisualCSharpRecipes.Chapter17
{
    public class DebugConverter : IValueConverter
    {
        public object Convert(object value,
                              Type targetType,
                              object parameter,
                              CultureInfo culture)
        {
            return value;
        }

        public object ConvertBack(object value,
                                  Type targetType,
                                  object parameter,
                                  CultureInfo culture)
        {
            return value;
        }
    }
}

The following markup demonstrates how to use the PresentationTraceSource.TraceLevel property in two different bindings. One of the bindings is valid and binds the value of the text block to the width of the parent grid; the other is invalid and attempts to bind the width of the parent grid to the height of the text block. Set the values of the PresentatonTraceSource.TraceLevel attached properties to see how they behave.

<Window
    x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:diagnostics="clr-namespace:System.Diagnostics;assembly=WindowsBase"
    Title="Recipe17_05" Height="300" Width="300">
    <Grid x:Name="gdLayoutRoot">
        <Viewbox>
            <TextBlock x:Name="tbkTextBlock">
                <TextBlock.Text>
                  <Binding ElementName="gdLayoutRoot" Path="ActualWidth"
                  diagnostics:PresentationTraceSources.TraceLevel="High" />
                </TextBlock.Text>
                <TextBlock.Height>
                  <Binding ElementName="gdLayoutRoot" Path="Name"
                  diagnostics:PresentationTraceSources.TraceLevel="High" />
                </TextBlock.Height>
            </TextBlock>
        </Viewbox>
    </Grid>
</Window>

The following XAML demonstrates how to use three StackPanel panels. An outer StackPanel allows you to stack two inner StackPanel panels vertically. The first inner StackPanel has a horizontal orientation and contains a set of System.Windows.Controls.Button controls. The Button controls show the effects of the various VerticalAlignment property values on the positioning of the controls. This panel also shows the cropping behavior of the StackPanel on the elements it contains (see Figure 17-3). You can see that Button 4 is partially cropped and that Button 5 is not visible at all. However, you can still tab to and interact with Button 5.

The second inner StackPanel has a vertical orientation and also contains a set of Button controls. These buttons show the effects of the various HorizontalAlignment property values on the positioning of a control in the StackPanel.

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Recipe17_06" Height="240" Width="250">
    <StackPanel Width="200">
        <StackPanel Height="50" Margin ="5" Orientation="Horizontal">
            <Button Content="Button _1" Margin="2" />
            <Button Content="Button _2" Margin="2"
                    VerticalAlignment="Top"/>
            <Button Content="Button _3" Margin="2"
                    VerticalAlignment="Center"/>

<Button Content="Button _4" Margin="2"
                    VerticalAlignment="Bottom"/>
            <Button Content="Button _5" Margin="2" />
        </StackPanel>
        <Separator />
        <StackPanel Margin="5" Orientation="Vertical">
            <Button Content="Button _A" Margin="2" />
            <Button Content="Button _B" Margin="2"
                    HorizontalAlignment="Left" />
            <Button Content="Button _C" Margin="2"
                    HorizontalAlignment="Center" />
            <Button Content="Button _D" Margin="2"
                    HorizontalAlignment="Right" />
            <Button Content="Button _E" Margin="2" />
        </StackPanel>
    </StackPanel>
</Window>

Figure 17.3. Using a StackPanel to control the layout of UI elements

The following XAML demonstrates how to use a DockPanel to dock a System.Windows.Controls.StackPanel containing a set of System.Windows.Controls.Button controls along its top edge and another along its left edge. The final Button added to the DockPanel stretches to fill all the remaining space in the panel (see Figure 17-5).

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Recipe17_07" Height="200" Width="300">
    <DockPanel >
        <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
            <Button Content="Button 1" Margin="2" />
            <Button Content="Button 2" Margin="2" />

<Button Content="Button 3" Margin="2" />
            <Button Content="Button 4" Margin="2" />
            <Button Content="Button 5" Margin="2" />
        </StackPanel>
        <StackPanel DockPanel.Dock="Left">
            <Button Content="Button A" Margin="2" />
            <Button Content="Button B" Margin="2" />
            <Button Content="Button C" Margin="2" />
            <Button Content="Button D" Margin="2" />
            <Button Content="Button E" Margin="2" />
        </StackPanel>
        <Button Content="Fill Button" />
    </DockPanel>
</Window>

Figure 17.5. Arranging UI elements in a DockPanel

The following XAML demonstrates how to use a three-by-three Grid to lay out a set of System.Windows.Controls.Button controls. The Grid uses a mix of fixed, auto, and proportional row and column sizing, and the Grid lines are turned on so that you can see (in Figure 17-6) the resulting Grid structure. The top-left Button controls span multiple rows or columns, and the leftmost Button is rotated (see recipe 17-11 for details on how to do this).

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Recipe17_08" Height="200" Width="250">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition MinHeight="50" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="3*" />
        </Grid.ColumnDefinitions>
        <Button Content="Button spanning 3 rows" Grid.RowSpan="3">
            <Button.LayoutTransform>
                <RotateTransform Angle="90" />
            </Button.LayoutTransform>
        </Button>
        <Button Content="Button spanning 2 columns" Grid.Column="1"
                Grid.Row="0" Grid.ColumnSpan="2" />
        <Button Content="Button" Grid.Column="2" Grid.Row="2"/>
    </Grid>
</Window>

Figure 17.6. Arranging UI elements in a Grid

The following XAML demonstrates how to use a Canvas to lay out a set of System.Windows.Controls.Button controls. In Figure 17-7, the shaded area shows the boundary of the Canvas. You can see how using negative position values for Button 1 and Button 5 place them wholly or partially outside the boundary of the Canvas. Despite Button 4 being declared after Button 2, the higher Canvas.ZIndex assigned on Button 2 forces the Canvas to draw Button 2 over the top of Button 4.

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Recipe17_09" Height="300" Width="300">
    <Canvas Background="LightGray" Margin="1cm">
        <Button Content="Button _1" Canvas.Top="-1cm" Canvas.Left="1cm" />
        <Button Content="Button _2" Canvas.Bottom="1cm" Canvas.Left="1cm"
                Canvas.ZIndex="1"/>
        <Button Content="Button _3" Canvas.Top="1cm" Canvas.Right="1cm" />
        <Button Content="Button _4" Canvas.Bottom="1.2cm" Canvas.Left="1.5cm" />

<Button Content="Button _5" Canvas.Bottom="1cm" Canvas.Right="-1cm" />
    </Canvas>
</Window>

Figure 17.7. Arranging UI elements using a Canvas

The following code provides a simple example of a RichTextBox used to edit a FlowDocument. The XAML defines a static FlowDocument that contains a variety of structural and formatting elements. The user interface provides a set of buttons to manipulate the RichTextBox content. The buttons rely on the application and editing command support provided by the RichTextBox control and use a style to make the RichTextBox the target of the button's command.

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Recipe17_10" Height="350" Width="500">
    <DockPanel>
        <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
            <StackPanel.Resources>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="CommandTarget"
                            Value="{Binding ElementName=rtbTextBox1}" />
                </Style>
            </StackPanel.Resources>

<Button Content="Clear" Name="btnClear" Click="btnClear_Click" />
            <Separator Margin="5"/>
            <Button Content="Cu_t" Command="ApplicationCommands.Cut" />
            <Button Content="_Copy" Command="ApplicationCommands.Copy" />
            <Button Content="_Paste" Command="ApplicationCommands.Paste" />
            <Separator Margin="5"/>
            <Button Content="_Undo" Command="ApplicationCommands.Undo" />
            <Button Content="_Redo" Command="ApplicationCommands.Redo" />
            <Separator Margin="5"/>
            <Button Content="_Bold" Command="EditingCommands.ToggleBold" />
            <Button Content="_Italic" Command="EditingCommands.ToggleItalic" />
            <Button Content="Underline"
                    Command="EditingCommands.ToggleUnderline" />
            <Separator Margin="5"/>
            <Button Content="_Right" Command="EditingCommands.AlignRight" />
            <Button Content="C_enter" Command="EditingCommands.AlignCenter" />
            <Button Content="_Left" Command="EditingCommands.AlignLeft" />
        </StackPanel>
        <RichTextBox DockPanel.Dock="Bottom" Name="rtbTextBox1"
                     HorizontalScrollBarVisibility="Visible"
                     VerticalScrollBarVisibility="Visible">
            <FlowDocument>
                <Paragraph FontSize="12">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet dolore
                    magna aliquam erat volutpat.
                </Paragraph>
                <Paragraph FontSize="15">
                    Ut wisi enim ad minim veniam, quis nostrud exerci tation
                    ullamcorper suscipit lobortis nisl ut aliquip ex ea
                    commodo consequat. Duis autem vel eum iriure.
                </Paragraph>

                <Paragraph FontSize="18">A List</Paragraph>

                <List>
                    <ListItem>
                        <Paragraph>
                            <Bold>Bold List Item</Bold>
                        </Paragraph>
                    </ListItem>
                    <ListItem>
                        <Paragraph>
                            <Italic>Italic List Item</Italic>
                        </Paragraph>
                    </ListItem>
                    <ListItem>
                        <Paragraph>
                            <Underline>Underlined List Item</Underline>
                        </Paragraph>
                    </ListItem>

</List>
            </FlowDocument>
        </RichTextBox>
    </DockPanel>
</Window>

The following code-behind contains the event handler that handles the Clear button provided on the user interface defined earlier:

using System.Windows;

namespace Apress.VisualCSharpRecipes.Chapter17
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        // Handles Clear button click event.
        private void btnClear_Click(object sender, RoutedEventArgs e)
        {
            // Select all the text in the FlowDocument and cut it.
            rtbTextBox1.SelectAll();
            rtbTextBox1.Cut();
        }
    }
}

Figure 17-8 shows what the RichTextBox looks like when the example is first run.

Figure 17.8. Using a RichTextBox to edit a FlowDocument

The following XAML demonstrates a variety of rotated controls, and the output is shown in Figure 17-9. Figure 17-9 shows the difference in behavior between a LayoutTransform (bottom left) and a RenderTransform (bottom-right).

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Recipe17_11" Height="350" Width="400">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition MinHeight="140" />
            <RowDefinition MinHeight="170" />

</Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBox Grid.Row="0" Grid.Column="0" Height="23"
                 HorizontalAlignment="Center" Text="An upside down TextBox."
                 Width="140">
            <TextBox.LayoutTransform>
                <RotateTransform Angle="180"/>
            </TextBox.LayoutTransform>
        </TextBox>
        <Button Content="A rotated Button" Grid.Row="0" Grid.Column="1"
                Height="23" Width="100">
            <Button.LayoutTransform>
                <RotateTransform Angle="-120"/>
            </Button.LayoutTransform>
        </Button>
        <StackPanel Grid.Row="1" Grid.Column="0" >
            <TextBlock HorizontalAlignment="Center" Margin="5">
                Layout Tranform
            </TextBlock>
            <Button Margin="5" Width="100">Top Button</Button>
            <Button Content="Middle Button" Margin="5" Width="100">
                <Button.LayoutTransform>
                    <RotateTransform Angle="30" />
                </Button.LayoutTransform>
            </Button>
            <Button Margin="5" Width="100">Bottom Button</Button>
        </StackPanel>
        <StackPanel Grid.Row="1" Grid.Column="1" >
            <TextBlock HorizontalAlignment="Center" Margin="5">
                Render Tranform
            </TextBlock>
            <Button Margin="5" Width="100">Top Button</Button>
            <Button Content="Middle Button" Margin="5"
                    RenderTransformOrigin="0.5, 0.5" Width="100">
                <Button.RenderTransform>
                    <RotateTransform Angle="30" />
                </Button.RenderTransform>
            </Button>
            <Button Margin="5" Width="100">Bottom Button</Button>
        </StackPanel>
    </Grid>
</Window>

Figure 17.9. A set of rotated controls

The following example demonstrates how to create a FileInputControl, a custom reusable user control to encapsulate the functionality of browsing for a file and displaying the selected file name. This user control is then used in a window, as shown in Figure 17-10. The XAML for the FileInputControl is as follows:

<UserControl x:Class="Apress.VisualCSharpRecipes.Chapter17.FileInputControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <DockPanel>
        <Button DockPanel.Dock="Right" Margin="2,0,0,0" Click="BrowseButton_Click">
            Browse...
        </Button>
        <TextBox x:Name="txtBox" IsReadOnly="True" />
    </DockPanel>
</UserControl>

The code-behind for the control is as follows:

using System.Windows.Controls;
using Microsoft.Win32;

namespace Apress.VisualCSharpRecipes.Chapter17
{
    public partial class FileInputControl : UserControl
    {
        public FileInputControl()
        {
            InitializeComponent();
        }

        private void BrowseButton_Click(
            object sender,
            System.Windows.RoutedEventArgs e)
        {
            OpenFileDialog dlg = new OpenFileDialog();

if(dlg.ShowDialog() == true)
            {
                this.FileName = dlg.FileName;
            }
        }

        public string FileName
        {
            get
            {
                return txtBox.Text;
            }
            set
            {
                txtBox.Text = value;
            }
        }
    }
}

The XAML for the window that consumes this user control is as follows:

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Apress.VisualCSharpRecipes.Chapter17;assembly="
     Title="Recipe17_12" Height="80" Width="300">
    <Grid>
        <local:FileInputControl Margin="8" />
    </Grid>
</Window>

Figure 17.10. Creating and using a FileInput user control

The following example creates a UserControl called FileInputControl that can be used to browse to a file using Microsoft.Win32.OpenFileDialog and display the file name in a System.Windows.Controls.TextBox.

It registers a CommandBinding for two application commands, Open and Find. When the user control has focus and the keyboard shortcuts for the Open and Find commands (Ctrl+O and Ctrl+F, respectively) are used, the Executed event handler for the respective command is invoked.

The Executed event handler for the Find command launches the OpenFileDialog, as if the user has clicked the Browse button. This command can always be executed, so the CanExecute event handler simply sets the CanExecute property of System.Windows.Input.CanExecuteRoutedEventArgs to True.

The Executed event handler for the Open command launches the file that is currently displayed in the TextBox. Therefore, the CanExecute event handler for this command sets the CanExecuteRoutedEventArgs to True only if there is a valid FileName. The XAML for the FileInputControl is as follows:

<UserControl x:Class=" Apress.VisualCSharpRecipes.Chapter17.FileInputControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <DockPanel>
        <Button DockPanel.Dock="Right" Margin="2,0,0,0" Click="BrowseButton_Click">
            Browse...
        </Button>
        <TextBox x:Name="txtBox" />
    </DockPanel>
</UserControl>

The code-behind for the FileInputControl is as follows:

using System.Diagnostics;
using System.IO;
using System.Windows.Controls;
using System.Windows.Input;
using Microsoft.Win32;

namespace Apress.VisualCSharpRecipes.Chapter17
{
    public partial class FileInputControl : UserControl
    {
        public FileInputControl()
        {
            InitializeComponent();

            // Register command bindings

            // ApplicationCommands.Find
            CommandManager.RegisterClassCommandBinding(
                typeof(FileInputControl),
                new CommandBinding(
                    ApplicationCommands.Find,
                    FindCommand_Executed,
                    FindCommand_CanExecute));

            // ApplicationCommands.Open
            CommandManager.RegisterClassCommandBinding(
                typeof(FileInputControl),
                new CommandBinding(

ApplicationCommands.Open,
                    OpenCommand_Executed,
                    OpenCommand_CanExecute));
        }

        #region Find Command

        private void FindCommand_CanExecute(
            object sender,
            CanExecuteRoutedEventArgs e)
        {
            e.CanExecute = true;
        }

        private void FindCommand_Executed(
            object sender,
            ExecutedRoutedEventArgs e)
        {
            DoFindFile();
        }

        #endregion

        #region Open Command

        private void OpenCommand_CanExecute(
            object sender,
            CanExecuteRoutedEventArgs e)
        {
            e.CanExecute =
                !string.IsNullOrEmpty(this.FileName)
                && File.Exists(this.FileName);
        }

        private void OpenCommand_Executed(
            object sender,
            ExecutedRoutedEventArgs e)
        {
            Process.Start(this.FileName);
        }

        #endregion

        private void BrowseButton_Click(
            object sender,
            System.Windows.RoutedEventArgs e)
        {
            DoFindFile();
        }

private void DoFindFile()
        {
            OpenFileDialog dlg = new OpenFileDialog();
            if(dlg.ShowDialog() == true)
            {
                this.FileName = dlg.FileName;
            }
        }

        public string FileName
        {
            get
            {
                return txtBox.Text;
            }

            set
            {
                txtBox.Text = value;
            }
        }
    }
}

The following XAML shows how to use the FileInputControl in a window. If the TextBox has the focus, then pressing the keyboard shortcut Ctrl+F will automatically open the OpenFileDialog. If a file is selected and a valid file name appears in the TextBox, then the shortcut Ctrl+O will launch it.

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Apress.VisualCSharpRecipes.Chapter17;assembly="
    Title="Recipe17_13" Height="80" Width="300">
    <Grid>
        <local:FileInputControl Margin="8"/>
    </Grid>
</Window>

The following example demonstrates how to create a lookless custom control to encapsulate the functionality of browsing to a file and displaying the file name. Figure 17-11 shows the control in use.

The FileInputControl class derives from Control and uses the TemplatePart attribute to signal that it expects a Button control called PART_Browse. It overrides the OnApplyTemplate method and calls GetTemplateChild to find the button defined by its actual template. If this exists, it adds an event handler to the button's Click event. The code for the control is as follows:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Markup;
using Microsoft.Win32;

namespace Apress.VisualCSharpRecipes.Chapter17
{
    [TemplatePart(Name = "PART_Browse", Type = typeof(Button))]
    [ContentProperty("FileName")]
    public class FileInputControl : Control
    {
        static FileInputControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata(
                typeof(FileInputControl),
                new FrameworkPropertyMetadata(
                    typeof(FileInputControl)));
        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            Button browseButton = base.GetTemplateChild("PART_Browse") as Button;

            if (browseButton != null)
                browseButton.Click += new RoutedEventHandler(browseButton_Click);
        }

        void browseButton_Click(object sender, RoutedEventArgs e)
        {
            OpenFileDialog dlg = new OpenFileDialog();
            if (dlg.ShowDialog() == true)
            {
                this.FileName = dlg.FileName;
            }
        }

        public string FileName
        {
            get
            {
                return (string)GetValue(FileNameProperty);
            }

set
            {
                SetValue(FileNameProperty, value);
            }
        }

        public static readonly DependencyProperty FileNameProperty =
            DependencyProperty.Register( "FileName", typeof(string),
 typeof(FileInputControl));
    }
}

The default style and control template for FileInputControl is in a ResourceDictionary in the Themes subfolder and is merged into the Generic ResourceDictionary. The XAML for this style is as follows:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Apress.VisualCSharpRecipes.Chapter17;assembly=">

    <Style TargetType="{x:Type local:FileInputControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate
                      TargetType="{x:Type local:FileInputControl}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <DockPanel>
                            <Button x:Name="PART_Browse" DockPanel.Dock="Right"
                                Margin="2,0,0,0">
                                Browse...
                            </Button>
                            <TextBox IsReadOnly="True"
                                Text="{Binding Path=FileName,
                                    RelativeSource=
                                       {RelativeSource TemplatedParent}}" />
                        </DockPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

The XAML for the window that consumes this custom control is as follows:

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Apress.VisualCSharpRecipes.Chapter17;assembly="

Title="Recipe17_14" Height="200" Width="300">
    <StackPanel>
      <StackPanel.Resources>
        <Style x:Key="fileInputStyle">
          <Setter Property="Control.Height" Value="50" />
          <Setter Property="Control.FontSize" Value="20px" />
          <Setter Property="Control.BorderBrush" Value="Blue" />
          <Setter Property="Control.BorderThickness" Value="2" />
          <Style.Triggers>
            <Trigger Property="Control.IsMouseOver" Value="True">
              <Setter Property="Control.BorderThickness" Value="3" />
              <Setter Property="Control.BorderBrush" Value="RoyalBlue" />
            </Trigger>
          </Style.Triggers>
        </Style>
        <ControlTemplate x:Key="fileInputTemplate"
              TargetType="{x:Type local:FileInputControl}">
          <Border Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}">
            <DockPanel>
              <Button x:Name="PART_Browse" DockPanel.Dock="Left"
                      Background="Lightgreen">
                <TextBlock FontSize="20px" Padding="3px" FontFamily="Arial"
 Text="Open..."/>
              </Button>
              <TextBlock x:Name="PART_Text" VerticalAlignment="Center"
                  Margin="5, 0, 0, 0" FontSize="16px" FontWeight="Bold"
                  Text="{Binding Path=FileName,
                                RelativeSource=
                                {RelativeSource TemplatedParent}}" />
            </DockPanel>
          </Border>
        </ControlTemplate>
      </StackPanel.Resources>
      <!-- Use the default appearance -->
      <local:FileInputControl Margin="8" />
      <!-- Applying a style to the control -->
      <local:FileInputControl Margin="8" Style="{StaticResource fileInputStyle}" />
      <!-- Applying a template to the control -->
      <local:FileInputControl Margin="8" Template="{StaticResource
 fileInputTemplate}" />
    </StackPanel>
</Window>

Figure 17.11. Creating and using a FileInput custom control

The following example demonstrates a window containing a System.Windows.Controls.Slider control and a System.Windows.Controls.TextBlock control. The XAML statement for the Text property of the TextBlock specifies a Binding statement that binds it to the Value property of the Slider control. In the binding statement, the Mode attribute is set to TwoWay, and the UpdateSourceTrigger attribute is set to PropertyChanged. This ensures that when a number from 1 to 100 is typed into the TextBox, the Slider control immediately updates its value to reflect it. The XAML for the window is as follows:

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     Title="Recipe17_15" Height="100" Width="260">
    <StackPanel>
        <Slider Name="slider" Margin="4" Interval="1"
                TickFrequency="1" IsSnapToTickEnabled="True"
                Minimum="0" Maximum="100"/>
        <StackPanel Orientation="Horizontal" >
            <TextBlock Width="Auto" HorizontalAlignment="Left"
                       VerticalAlignment="Center" Margin="4"
                       Text="Gets and sets the value of the slider:" />
            <TextBox Width="40" HorizontalAlignment="Center" Margin="4"
                 Text="{Binding
                        ElementName=slider,
                        Path=Value,
                        Mode=TwoWay,
                        UpdateSourceTrigger=PropertyChanged}" />
        </StackPanel>
    </StackPanel>
</Window>

Figure 17-12 shows the resulting window.

Figure 17.12. Creating a two-way binding

The following example demonstrates a window containing three System.Windows.Controls.TextBox controls. These are bound to the FirstName, LastName, and Age properties of a custom Person object. The Person class also exposes an instance of the AddPersonCommand and SetOccupationCommand as read-only properties. There are two Button controls on the window that have their Command attribute bound to these command properties. Custom logic in the CanExecute methods of the commands specifies when the Buttons should be enabled or disabled. If the ICommand can be executed and the Button should therefore be enabled, the code in the CanExecute method returns True. If it returns False, the Button will be disabled. The Set Occupation Button control also binds its CommandParameter to the Text property of a System.Windows.Controls.ComboBox control. This demonstrates how to pass parameters to an instance of an ICommand. Figure 17-13 shows the resulting window. The XAML for the window is as follows:

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Recipe17_16" Height="233" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="70"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="40"/>
            <RowDefinition Height="34"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>

        <TextBlock Margin="4" Text="First Name" VerticalAlignment="Center"/>
        <TextBox Text="{Binding Path=FirstName}" Margin="4" Grid.Column="1"/>

<TextBlock Margin="4" Text="Last Name" Grid.Row="1"
            VerticalAlignment="Center"/>
        <TextBox Margin="4" Text="{Binding Path=LastName}"
            Grid.Column="1" Grid.Row="1"/>

        <TextBlock Margin="4" Text="Age" Grid.Row="2"
            VerticalAlignment="Center"/>
        <TextBox Margin="4" Text="{Binding Path=Age}"
            Grid.Column="1" Grid.Row="2"/>

        <!-- Bind the Button to the Add Command -->
        <Button Command="{Binding Path=Add}" Content="Add"
            Margin="4" Grid.Row="3" Grid.Column="2"/>

        <StackPanel Orientation="Horizontal"
            Grid.Column="2" Grid.Row="4">


        <ComboBox x:Name="cboOccupation" IsEditable="False"
            Margin="4" Width="100">
             <ComboBoxItem>Student</ComboBoxItem>
             <ComboBoxItem>Skilled</ComboBoxItem>
             <ComboBoxItem>Professional</ComboBoxItem>
        </ComboBox>

         <Button Command="{Binding Path=SetOccupation}"
            CommandParameter="{Binding ElementName=cboOccupation, Path=Text}"
            Content="Set Occupation" Margin="4" />
        </StackPanel>

        <TextBlock Margin="4" Text="Status"
            Grid.Row="5" VerticalAlignment="Center"/>
        <TextBlock Margin="4"
            Text="{Binding Path=Status, UpdateSourceTrigger=PropertyChanged}"
            VerticalAlignment="Center" FontStyle="Italic" Grid.Column="1"
            Grid.Row="5"/>
    </Grid>
</Window>

The code-behind for the window sets its DataContext property to a new Person object. The code for this is as follows:

using System.Windows;

namespace Apress.VisualCSharpRecipes.Chapter17
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

// Set the DataContext to a Person object
            this.DataContext = new Person()
                {
                    FirstName = "Zander",
                    LastName = "Harris"
                };
        }
    }
}

The code for the Person, AddPersonCommand, and SetOccupationCommand classes are as follows:

using System;
using System.ComponentModel;
using System.Windows.Input;

namespace Apress.VisualCSharpRecipes.Chapter17
{
    public class Person : INotifyPropertyChanged
    {
        private string firstName;
        private int age;
        private string lastName;
        private string status;
        private string occupation;

        private AddPersonCommand addPersonCommand;
        private SetOccupationCommand setOccupationCommand;

        public string FirstName
        {
            get
            {
                return firstName;
            }
            set
            {
                if(firstName != value)
                {
                    firstName = value;
                    OnPropertyChanged("FirstName");
                }
            }
        }


        public string LastName
        {
            get

            {
                return lastName;
            }

set
            {
                if(this.lastName != value)
                {
                    this.lastName = value;
                    OnPropertyChanged("LastName");
                }
            }
        }

        public int Age
        {
            get
            {
                return age;
            }
            set
            {
                if(this.age != value)
                {
                    this.age = value;
                    OnPropertyChanged("Age");
                }
            }
        }

        public string Status
        {
            get
            {
                return status;
            }
            set
            {
                if(this.status != value)
                {
                    this.status = value;
                    OnPropertyChanged("Status");
                }
            }
        }

        public string Occupation
        {
            get
            {
                return occupation;
            }
            set
            {

if(this.occupation != value)
                {
                    this.occupation = value;
                    OnPropertyChanged("Occupation");
                }
            }
        }

        /// Gets an AddPersonCommand for data binding
        public AddPersonCommand Add
        {
            get
            {
                if(addPersonCommand == null)
                    addPersonCommand = new AddPersonCommand(this);

                return addPersonCommand;
            }
        }

        /// Gets a SetOccupationCommand for data binding
        public SetOccupationCommand SetOccupation
        {
            get
            {
                if(setOccupationCommand == null)
                    setOccupationCommand = new SetOccupationCommand(this);

                return setOccupationCommand;
            }
        }

        #region INotifyPropertyChanged Members

        /// Implement INotifyPropertyChanged to notify the binding
        /// targets when the values of properties change.
        public event PropertyChangedEventHandler PropertyChanged;


        private void OnPropertyChanged(string propertyName)
        {

            if(this.PropertyChanged != null)
            {
                this.PropertyChanged(
                    this, new PropertyChangedEventArgs(propertyName));
            }
        }

        #endregion
    }

public class AddPersonCommand : ICommand
    {
        private Person person;

        public AddPersonCommand(Person person)
        {
            this.person = person;

            this.person.PropertyChanged +=
                new PropertyChangedEventHandler(person_PropertyChanged);
        }

        // Handle the PropertyChanged event of the person to raise the
        // CanExecuteChanged event
        private void person_PropertyChanged(
            object sender, PropertyChangedEventArgs e)
        {
            if(CanExecuteChanged != null)
            {
                CanExecuteChanged(this, EventArgs.Empty);
            }
        }

        #region ICommand Members

        /// The command can execute if there are valid values
        /// for the person's FirstName, LastName, and Age properties
        /// and if it hasn't already been executed and had its
        /// Status property set.
        public bool CanExecute(object parameter)
        {
            if(!string.IsNullOrEmpty(person.FirstName))
                if(!string.IsNullOrEmpty(person.LastName))
                    if(person.Age > 0)
                        if(string.IsNullOrEmpty(person.Status))
                            return true;

            return false;
        }

        public event EventHandler CanExecuteChanged;

        /// When the command is executed, update the
        /// status property of the person.
        public void Execute(object parameter)
        {
            person.Status =
                string.Format("Added {0} {1}",
                              person.FirstName, person.LastName);
        }

#endregion
    }

    public class SetOccupationCommand : ICommand
    {
        private Person person;

        public SetOccupationCommand(Person person)
        {
            this.person = person;

            this.person.PropertyChanged +=
                new PropertyChangedEventHandler(person_PropertyChanged);
        }

        // Handle the PropertyChanged event of the person to raise the
        // CanExecuteChanged event
        private void person_PropertyChanged(
            object sender, PropertyChangedEventArgs e)
        {
            if(CanExecuteChanged != null)
            {
                CanExecuteChanged(this, EventArgs.Empty);
            }
        }

        #region ICommand Members

        /// The command can execute if the person has been added,
        /// which means its Status will be set, and if the occupation
        /// parameter is not null
        public bool CanExecute(object parameter)
        {
            if(!string.IsNullOrEmpty(parameter as string))
                if(!string.IsNullOrEmpty(person.Status))
                    return true;

            return false;
        }

        public event EventHandler CanExecuteChanged;

        /// When the command is executed, set the Occupation
        /// property of the person, and update the Status.
        public void Execute(object parameter)
        {
            // Get the occupation string from the command parameter
            person.Occupation = parameter.ToString();

person.Status =
                string.Format("Added {0} {1}, {2}",
                              person.FirstName, person.LastName, person.Occupation);
        }
        #endregion
    }
}

Figure 17.13. Binding to a command

The following example demonstrates a window that contains a System.Windows.Controls.ListBox control. The ItemsSource property of the ListBox is bound to a collection of Person objects. The Person class is defined in the Data.cs file and exposes FirstName, LastName, Age, and Photo properties. It also overrides the ToString method to return the full name of the person it represents. Without a DataTemplate, the ListBox control would just display this list of names. Figure 17-14 shows what this would look like.

Figure 17.14. Binding to a list of data objects without specifying a DataTemplate

However, the ItemTemplate property of the ListBox is set to a static resource called personTemplate. This is a DataTemplate resource defined in the window's System.Windows.ResourceDictionary. The DataTemplate creates a System.Windows.Controls.Grid control inside a System.Windows.Controls.Border control. Inside the Grid, it defines a series of System.Windows.Controls.TextBlock controls and a System.Windows.Controls.Image control. These controls have standard binding statements that bind their properties to properties on the Person class. When the window opens and the ListBox binds to the collection of Person objects, the binding mechanism uses the set of UI elements in the DataTemplate to display each item. Figure 17-15 shows the same ListBox as in Figure 17-14 but with its ItemTemplate property set to the DataTemplate.

The XAML for the window is as follows:

<Window
    x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Apress.VisualCSharpRecipes.Chapter17"
    Title="Recipe17_17" Height="298" Width="260">


    <Window.Resources>

        <!-- Creates the local data source for binding -->
        <local:PersonCollection x:Key="people"/>

        <!-- Styles used by the UI elements in the DataTemplate -->
        <Style
            x:Key="lblStyle"
            TargetType="{x:Type TextBlock}">
            <Setter Property="FontFamily" Value="Tahoma"/>
            <Setter Property="FontSize" Value="11pt"/>
            <Setter Property="VerticalAlignment" Value="Center"/>

<Setter Property="Margin" Value="2"/>
            <Setter Property="Foreground" Value="Red"/>
        </Style>

        <Style
            x:Key="dataStyle"
            TargetType="{x:Type TextBlock}"
            BasedOn="{StaticResource lblStyle}">
            <Setter Property="Margin" Value="10,2,2,2"/>
            <Setter Property="Foreground" Value="Blue"/>
            <Setter Property="FontStyle" Value="Italic"/>
        </Style>

        <!-- DataTemplate to use for displaying each Person item -->
        <DataTemplate x:Key="personTemplate">
            <Border
                BorderThickness="1"
                BorderBrush="Gray"
                Padding="4"
                Margin="4"
                Height="Auto"
                Width="Auto">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="80"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <StackPanel>
                        <TextBlock
                            Style="{StaticResource lblStyle}"
                            Text="First Name" />
                        <TextBlock
                            Style="{StaticResource dataStyle}"
                            Text="{Binding Path=FirstName}"/>

                        <TextBlock
                            Style="{StaticResource lblStyle}"
                            Text="Last Name" />
                        <TextBlock
                            Style="{StaticResource dataStyle}"
                            Text="{Binding Path=LastName}" />

                        <TextBlock
                            Style="{StaticResource lblStyle}"
                            Text="Age" />
                        <TextBlock
                            Style="{StaticResource dataStyle}"
                            Text="{Binding Path=Age}" />
                    </StackPanel>

<Image
                        Margin="4"
                        Grid.Column="1"
                        Width="96"
                        Height="140"
                        Source="{Binding Path=Photo}"/>
                </Grid>
            </Border>
        </DataTemplate>


    </Window.Resources>

    <Grid>
        <!-- The ListBox binds to the people collection, and sets the -->
        <!-- DataTemplate to use for displaying each item -->
        <ListBox
            Margin="10"
            ItemsSource="{Binding Source={StaticResource people}}"
            ItemTemplate="{StaticResource personTemplate}"/>

        <!-- Without specifying a DataTemplate, the ListBox just -->
        <!-- displays a list of names. -->
        <!--<ListBox
            Margin="10"
            ItemsSource="{Binding Source={StaticResource people}}"/>-->
    </Grid>
</Window>

Figure 17.15. Binding to a list of data objects and specifying a DataTemplate

The following example demonstrates a window that data-binds to an instance of the PersonCollection class in its constructor. The PersonCollection class is an ObservableCollection<T> of Person objects. Each Person object exposes name, age, and occupation data, as well as a description.

In the top half of the window, a ListBox is bound to the window's DataContext. This is assigned an instance of the PersonCollection in the code-behind for the window. The ItemTemplate property of the ListBox references a DataTemplate called masterTemplate defined in the window's Resources collection. This shows the value of the Description property for each Person object in the collection. It sets the UpdateSourceTrigger attribute to System.Windows.Data.UpdateSourceTrigger.PropertyChanged. This ensures that the text in the ListBox item is updated automatically and immediately when the Description property of a Person changes. In the bottom half of the window, a ContentControl binds to the same collection. Because it is a singleton UI element and does not display a collection of items, it automatically binds to thecurrent item in the PersonCollection class. Because the IsSynchronizedWithCurrentItem property of the ListBox is set to True, this corresponds to the selected item in the ListBox. The ContentControl uses a DataTemplate called detailTemplate to display the full details of the selected Person.

When the data displayed in the details section is changed, it automatically updates the corresponding description in the master section above it. This is made possible for two reasons. First, the System.Windows.Controls.TextBox controls in the details section specify a System.Windows.Data.Binding.BindingMode of TwoWay, which means that when new text is input, it is automatically marshaled to the binding source. Second, the Person class implements the INotifyPropertyChanged interface. This means that when a value of a property changes, the binding target is automatically notified.

At the bottom of the window, there is a System.Windows.Controls.Button control marked Add Person. When this button is clicked, it adds a new Person object to the collection. Because the PersonCollection class derives from ObservableCollection<T>, which in turn implements INotifyCollectionChanged, the master list of items automatically updates to show the new item.

The XAML for the window is as follows:

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Recipe17_18" Height="380" Width="280">
    <Window.Resources>

        <DataTemplate
            x:Key="masterTemplate">
            <TextBlock
                Margin="4"
                Text="{Binding
                       Path=Description,
                       UpdateSourceTrigger=PropertyChanged}"/>
        </DataTemplate>

        <DataTemplate x:Key="detailTemplate">
            <Border
                BorderBrush="LightBlue"
                BorderThickness="1">
                <Grid Margin="10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="74"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="30"/>
                        <RowDefinition Height="30"/>

<RowDefinition Height="30"/>
                        <RowDefinition Height="30"/>
                    </Grid.RowDefinitions>

                    <TextBlock
            Margin="4"
            Text="First Name"
            VerticalAlignment="Center"/>
        <TextBox
            Text="{Binding Path=FirstName, Mode=TwoWay}"
            Margin="4" Grid.Column="1"/>

        <TextBlock
            Margin="4"
            Text="Last Name"
            Grid.Row="1"
            VerticalAlignment="Center"/>
        <TextBox
            Margin="4"
            Text="{Binding Path=LastName, Mode=TwoWay}"
            Grid.Column="1" Grid.Row="1"/>

        <TextBlock
            Margin="4"
            Text="Age"
            Grid.Row="2"
            VerticalAlignment="Center"/>
        <TextBox
            Margin="4"
            Text="{Binding Path=Age, Mode=TwoWay}"
            Grid.Column="1"
            Grid.Row="2"/>

         <TextBlock
            Margin="4"
            Text="Occupation"
            Grid.Row="3"
            VerticalAlignment="Center"/>

         <ComboBox
            x:Name="cboOccupation"
            IsEditable="False"
            Grid.Column="1"
            Grid.Row="3"
            HorizontalAlignment="Left"
            Text="{Binding Path=Occupation, Mode=TwoWay}"
            Margin="4" Width="140">
             <ComboBoxItem>Student</ComboBoxItem>
             <ComboBoxItem>Engineer</ComboBoxItem>
             <ComboBoxItem>Professional</ComboBoxItem>
        </ComboBox>

</Grid>
            </Border>
        </DataTemplate>
    </Window.Resources>

    <StackPanel Margin="5">

        <TextBlock
            VerticalAlignment="Center"
            FontSize="14"
            Margin="4"
            Text="People"/>

        <!-- The ItemsControls binds to the collection. -->
        <ListBox
            ItemsSource="{Binding}"
            ItemTemplate="{StaticResource masterTemplate}"
            IsSynchronizedWithCurrentItem="True" />

        <TextBlock
            VerticalAlignment="Center"
            FontSize="14"
            Margin="4"
            Text="Details"/>

        <!-- The ContentControl binds to the CurrentItem of the collection. -->
        <ContentControl
          Content="{Binding}"
          ContentTemplate="{StaticResource detailTemplate}" />

        <!-- Add a new person to the collection. -->
        <Button
            Margin="4"
            Width="100"
            Height="34"
            HorizontalAlignment="Right"
            Click="AddButton_Click">
            Add Person
        </Button>
    </StackPanel>
</Window>

The code-behind for the window is as follows:

using System.Windows;

namespace Apress.VisualCSharpRecipes.Chapter17
{
    public partial class MainWindow : Window
    {
        // Create an instance of the PersonCollection class

PersonCollection people =
            new PersonCollection();

        public MainWindow()
        {
            InitializeComponent();

            // Set the DataContext to the PersonCollection
            this.DataContext = people;
        }

        private void AddButton_Click(
            object sender, RoutedEventArgs e)
        {
            people.Add(new Person()
                           {
                               FirstName = "Simon",
                               LastName = "Williams",
                               Age = 39,
                               Occupation = "Professional"
                           });
        }
    }
}

The code for the Person class is omitted for brevity. The code for the PersonCollection class is as follows:

using System.Collections.ObjectModel;

namespace Apress.VisualCSharpRecipes.Chapter17
{
    public class PersonCollection
        : ObservableCollection<Person>
    {
        public PersonCollection()
        {
            this.Add(new Person()
                         {
                             FirstName = "Sam",
                             LastName = "Bourton",
                             Age = 33,
                             Occupation = "Engineer"
                         });
            this.Add(new Person()
                         {
                             FirstName = "Adam",
                             LastName = "Freeman",
                             Age = 37,
                             Occupation = "Professional"
                         });

this.Add(new Person()
                         {
                             FirstName = "Sam",
                             LastName = "Noble",
                             Age = 24,
                             Occupation = "Engineer"
                         });
        }
    }
}

Figure 17-16 shows the resulting window.

Figure 17.16. Binding to a collection using the master-detail pattern

The following example demonstrates a window with a Style resource and two System.Windows.Controls.Button controls. The Style uses a Trigger to change the System.Windows.FontWeight and BitmapEffect properties of the Button controls when the mouse is over them. The XAML for the window is as follows:

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Recipe17_19" Height="120" Width="240">

    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="FontWeight" Value="Bold" />
                    <Setter Property="BitmapEffect">
                        <Setter.Value>
                            <DropShadowEffect BlurRadius="15"
                                Color="Orange" ShadowDepth="0" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <StackPanel Margin="8">
        <Button Height="25" Width="100" Margin="4">
            Mouse Over Me!
        </Button>
        <Button Height="25" Width="100" Margin="4">
            Mouse Over Me!
        </Button>
    </StackPanel>
</Window>

Figure 17-17 shows the resulting window.

Figure 17.17. Changing a control's appearance on mouseover

The following example demonstrates a window that displays a list of country names in a ListBox. In the XAML for the ListBox, its ItemContainerStyleSelector property is set to a local StyleSelector class called AlternatingRowStyleSelector. This class has a property called AlternateStyle, which is set to a Style resource that changes the Background property of a ListBoxItem.

The AlternatingRowStyleSelector class overrides the SelectStyle property and returns either the default or the alternate Style, based on a Boolean flag. The XAML for the window is as follows:

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Apress.VisualCSharpRecipes.Chapter17;assembly="
    Title="Recipe17_20" Height="248" Width="200">

<Window.Resources>
        <local:Countries x:Key="countries"/>
        <Style x:Key="AlternateStyle">
            <Setter Property="ListBoxItem.Background" Value="LightGray"/>
        </Style>
    </Window.Resources>

    <Grid Margin="4">
        <ListBox
            DisplayMemberPath="Name"
            ItemsSource="{Binding Source={StaticResource countries}}" >

            <ListBox.ItemContainerStyleSelector>
                <local:AlternatingRowStyleSelector
                    AlternateStyle="{StaticResource AlternateStyle}" />
            </ListBox.ItemContainerStyleSelector>
        </ListBox>
    </Grid>
</Window>

The code for the StyleSelector is as follows:

using System.Windows;
using System.Windows.Controls;

namespace Apress.VisualCSharpRecipes.Chapter17
{
    public class AlternatingRowStyleSelector : StyleSelector
    {
        // Flag to track the alternate rows
        private bool isAlternate = false;

        public Style DefaultStyle {  get; set; }
        public Style AlternateStyle { get; set; }

        public override Style SelectStyle(object item, DependencyObject container)
        {
            // Select the style, based on the value of isAlternate
            Style style = isAlternate ? AlternateStyle : DefaultStyle;

            // Invert the flag
            isAlternate = !isAlternate;

            return style;
        }
    }
}

Figure 17-18 shows the resulting window.

Figure 17.18. Changing the appearance of alternate rows

The following XAML demonstrates how to set up a ListBox with ListBoxItem objects that support drag-and-drop operations (see Figure 17-19):

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Recipe17_21" Height="300" Width="300">
    <DockPanel LastChildFill="True" >
        <ListBox DockPanel.Dock="Left" Name="lstLabels">
            <ListBox.Resources>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="FontSize" Value="14" />
                    <Setter Property="Margin" Value="2" />
                    <EventSetter Event="PreviewMouseLeftButtonDown"
                       Handler="ListBoxItem_PreviewMouseLeftButtonDown"/>
                    <EventSetter Event="PreviewMouseMove"
                                 Handler="ListBoxItem_PreviewMouseMove"/>
                </Style>
            </ListBox.Resources>
            <ListBoxItem IsSelected="True">Allen</ListBoxItem>
            <ListBoxItem>Andy</ListBoxItem>
            <ListBoxItem>Antoan</ListBoxItem>
            <ListBoxItem>Bruce</ListBoxItem>
            <ListBoxItem>Ian</ListBoxItem>
            <ListBoxItem>Matthew</ListBoxItem>

<ListBoxItem>Sam</ListBoxItem>
            <ListBoxItem>Simon</ListBoxItem>
        </ListBox>
        <Canvas AllowDrop="True" Background="Transparent"
                DragEnter="cvsSurface_DragEnter" Drop="cvsSurface_Drop"
                Name="cvsSurface" >
        </Canvas>
    </DockPanel>
</Window>

The following code-behind contains the event handlers that allow the example to identify the ListBoxItem that the user is dragging, determine whether a mouse movement constitutes a drag operation, and allow the Canvas to receive the dragged ListBoxItem content.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace Apress.VisualCSharpRecipes.Chapter17
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private ListBoxItem draggedItem;
        private Point startDragPoint;

        public MainWindow()
        {
            InitializeComponent();
        }

        // Handles the DragEnter event for the Canvas. Changes the mouse
        // pointer to show the user that copy is an option if the drop
        // text content is over the Canvas.
        private void cvsSurface_DragEnter(object sender, DragEventArgs e)
        {
            if (e.Data.GetDataPresent(DataFormats.Text))
            {
                e.Effects = DragDropEffects.Copy;
            }
            else
            {
                e.Effects = DragDropEffects.None;
            }
        }

        // Handles the Drop event for the Canvas. Creates a new Label
        // and adds it to the Canvas at the location of the mouse pointer.

private void cvsSurface_Drop(object sender, DragEventArgs e)
        {
            // Create a new Label.
            Label newLabel = new Label();
            newLabel.Content = e.Data.GetData(DataFormats.Text);
            newLabel.FontSize = 14;

            // Add the Label to the Canvas and position it.
            cvsSurface.Children.Add(newLabel);
            Canvas.SetLeft(newLabel, e.GetPosition(cvsSurface).X);
            Canvas.SetTop(newLabel, e.GetPosition(cvsSurface).Y);
        }

        // Handles the PreviewMouseLeftButtonDown event for all ListBoxItem
        // objects. Stores a reference to the item being dragged and the
        // point at which the drag started.
        private void ListBoxItem_PreviewMouseLeftButtonDown(object sender,
            MouseButtonEventArgs e)
        {
            draggedItem = sender as ListBoxItem;
            startDragPoint = e.GetPosition(null);
        }

        // Handles the PreviewMouseMove event for all ListBoxItem objects.
        // Determines whether the mouse has been moved far enough to be
        // considered a drag operation.
        private void ListBoxItem_PreviewMouseMove(object sender,
            MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                Point position = e.GetPosition(null);

                if (Math.Abs(position.X - startDragPoint.X) >
                        SystemParameters.MinimumHorizontalDragDistance ||
                    Math.Abs(position.Y - startDragPoint.Y) >
                        SystemParameters.MinimumVerticalDragDistance)
                {
                    // User is dragging, set up the DragDrop behavior.
                    DragDrop.DoDragDrop(draggedItem, draggedItem.Content,
                        DragDropEffects.Copy);
                }
            }
        }
    }
}

Figure 17.19. Dragging items from a ListBox and dropping them on a Canvas

The following example demonstrates a window that declares a ProgressBar control and a Button. An instance of the BackgroundWorker class is created in the window's constructor, and its WorkerSupportsCancellation property is set to True.

When the Button is clicked, the code in the Click handler runs the BackgroundWorker asynchronously and changes the text of the Button from Start to Cancel. If it is clicked again, the IsBusy property of the BackgroundWorker returns True, and the code calls the CancelAsync method to cancel the operation.

In the RunWorkerCompleted event handler, a System.Windows.MessageBox is shown if the Cancelled property of the RunWorkerCompletedEventArgs parameter is True. The XAML for the window is as follows:

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Recipe17_22" Height="100" Width="250">
    <Grid>

<Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <ProgressBar Name="progressBar" Margin="4"/>

        <Button Name="button" Grid.Row="1" Click="button_Click"
            HorizontalAlignment="Center" Margin="4" Width="60">
            Start
        </Button>
    </Grid>
</Window>

The code-behind for the window is as follows:

using System.ComponentModel;
using System.Threading;
using System.Windows;
using System.Windows.Input;

namespace Apress.VisualCSharpRecipes.Chapter17
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private BackgroundWorker worker;

        public MainWindow()
        {
            InitializeComponent();

            // Create a Background Worker
            worker = new BackgroundWorker();
            worker.WorkerReportsProgress = true;

            // Enable support for cancellation
            worker.WorkerSupportsCancellation = true;

            // Attach the event handlers
            worker.DoWork +=
                new DoWorkEventHandler(worker_DoWork);
            worker.RunWorkerCompleted +=
                new RunWorkerCompletedEventHandler(worker_RunWorkerCompleted);
            worker.ProgressChanged +=
                worker_ProgressChanged;
        }

private void button_Click(
            object sender, RoutedEventArgs e)
        {
            if(!worker.IsBusy)
            {
                this.Cursor = Cursors.Wait;

                // Start the Background Worker
                worker.RunWorkerAsync();
                button.Content = "Cancel";
            }
            else
            {
                // Cancel the Background Worker
                worker.CancelAsync();
            }
        }

        private void worker_RunWorkerCompleted(
            object sender, RunWorkerCompletedEventArgs e)
        {
            this.Cursor = Cursors.Arrow;

            if(e.Cancelled)
            {
                // The user cancelled the operation
                MessageBox.Show("Operation was cancelled");
            }
            else if(e.Error != null)
            {
                MessageBox.Show(e.Error.Message);
            }

            button.Content = "Start";
        }

        private void worker_DoWork(
            object sender, DoWorkEventArgs e)
        {
            for(int i = 1; i <= 100; i++)
            {
                // Check if the BackgroundWorker
                // has been cancelled
                if(worker.CancellationPending)
                {
                    // Set the Cancel property
                    e.Cancel = true;
                    return;
                }

// Simulate some processing by sleeping
                Thread.Sleep(100);
                worker.ReportProgress(i);
            }
        }

        private void worker_ProgressChanged(
            object sender, ProgressChangedEventArgs e)
        {
            progressBar.Value = e.ProgressPercentage;
        }
    }
}

Figure 17-20 shows the resulting window.

Figure 17.20. Executing a method asynchronously using a background thread

The following XAML demonstrates how to use the various drawing elements mentioned previously to draw a wide variety of two-dimensional shapes in a System.Windows.Controls.Canvas (see Figure 17-21).

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Recipe17_23" Height="350" Width="450">
    <Canvas>
        <Canvas.Resources>
            <Style TargetType="Ellipse">
                <Setter Property="Stroke" Value="Black" />
                <Setter Property="StrokeThickness" Value="3" />
            </Style>
            <Style TargetType="Polygon">
                <Setter Property="Stroke" Value="Black" />
                <Setter Property="StrokeThickness" Value="3" />
            </Style>
            <Style TargetType="Rectangle">
                <Setter Property="Stroke" Value="Black" />
                <Setter Property="StrokeThickness" Value="3" />
            </Style>
        </Canvas.Resources>
        <Rectangle Canvas.Top="20" Canvas.Left="10"
                   Height="60" Width="90" />
        <Rectangle Canvas.Top="20" Canvas.Left="120"
                   Height="100" Width="70"
                   RadiusX="10" RadiusY="10"/>
        <Rectangle Canvas.Top="20" Canvas.Left="220"
                   Height="70" Width="70"
                   RadiusX="5" RadiusY="30"/>
        <Ellipse Canvas.Top="100" Canvas.Left="20"
                 Height="100" Width="70"/>
        <Ellipse Canvas.Top="130" Canvas.Left="110"
                 Height="50" Width="90"/>
        <Ellipse Canvas.Top="120" Canvas.Left="220"
                 Height="70" Width="70"/>
        <Polygon Canvas.Top="200" Canvas.Left="10"
                 Margin="5" Points="40,10 70,80 10,80"/>

<Polygon Canvas.Top="200" Canvas.Left="110"
                 Margin="5" Points="20,0 60,0 80,20 80,60 60,80
                 20,80 0,60 0,20"/>
        <Polygon Canvas.Top="200" Canvas.Left="210"
                 Margin="5" Points="20,0 50,10 50,50 80,60 60,80 0,20"/>
        <Path Canvas.Top="60" Canvas.Left="320"
              Stroke="Black" StrokeThickness="3" >
            <Path.Data>
                <GeometryGroup>
                    <!--Head and hat-->
                    <PathGeometry>
                        <PathFigure IsClosed="True" StartPoint="40,0">
                            <LineSegment Point="70,100" />
                            <ArcSegment Point="70,110" IsLargeArc="True"
                                    Size="10,10" SweepDirection="Clockwise"/>
                            <ArcSegment Point="10,110" Size="30,30"
                                    SweepDirection="Clockwise"/>

                            <ArcSegment Point="10,100" IsLargeArc="True"
                                    Size="10,10" SweepDirection="Clockwise"/>
                        </PathFigure>
                    </PathGeometry>
                    <!--Hat buttons-->
                    <EllipseGeometry Center="40,40" RadiusX="2" RadiusY="2"/>
                    <EllipseGeometry Center="40,50" RadiusX="2" RadiusY="2"/>
                    <EllipseGeometry Center="40,60" RadiusX="2" RadiusY="2"/>
                    <!--Eyes-->
                    <EllipseGeometry Center="30,100" RadiusX="3" RadiusY="2"/>
                    <EllipseGeometry Center="50,100" RadiusX="3" RadiusY="2"/>
                    <!--Nose-->
                    <EllipseGeometry Center="40,110" RadiusX="3" RadiusY="3"/>
                    <!--Mouth-->
                    <RectangleGeometry Rect="30,120 20,10"/>
                </GeometryGroup>
            </Path.Data>
        </Path>
    </Canvas>
</Window>

Figure 17.21. Examples of simple and complex shapes on a canvas

The following XAML demonstrates how to create a System.Windows.Media.GeometryGroup static resource with the key Clown, and its subsequent use to display a clown shape multiple times in a System.Windows.Controls.UniformGrid. Each clown displayed uses the same underlying geometry but different stroke settings to change the color and format of the lines (see Figure 17-22).

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Recipe17_24" Height="350" Width="300">
    <Window.Resources>
        <GeometryGroup x:Key="Clown">
            <!--Head and hat-->
            <PathGeometry>
                <PathFigure IsClosed="True" StartPoint="40,0">
                    <LineSegment Point="70,100" />
                    <ArcSegment Point="70,110" IsLargeArc="True"
                                    Size="10,10" SweepDirection="Clockwise"/>
                    <ArcSegment Point="10,110" Size="30,30"
                                    SweepDirection="Clockwise"/>
                    <ArcSegment Point="10,100" IsLargeArc="True"
                                    Size="10,10" SweepDirection="Clockwise"/>
                </PathFigure>
            </PathGeometry>

            <!--Hat buttons-->
            <EllipseGeometry Center="40,40" RadiusX="2" RadiusY="2"/>
            <EllipseGeometry Center="40,50" RadiusX="2" RadiusY="2"/>
            <EllipseGeometry Center="40,60" RadiusX="2" RadiusY="2"/>
            <!--Eyes-->
            <EllipseGeometry Center="30,100" RadiusX="3" RadiusY="2"/>
            <EllipseGeometry Center="50,100" RadiusX="3" RadiusY="2"/>
            <!--Nose-->
            <EllipseGeometry Center="40,110" RadiusX="3" RadiusY="3"/>
            <!--Mouth-->
            <RectangleGeometry Rect="30,120 20,10"/>
        </GeometryGroup>
    </Window.Resources>
    <UniformGrid Columns="2" Rows="2">
        <Path HorizontalAlignment="Center" Data="{StaticResource Clown}"
              Stroke="Black" StrokeThickness="1" Margin="5" Fill="BurlyWood"/>
        <Path HorizontalAlignment="Center" Data="{StaticResource Clown}"
              Stroke="Blue" StrokeThickness="5" Margin="5" />
        <Path HorizontalAlignment="Center" Data="{StaticResource Clown}"
              Stroke="Red" StrokeThickness="3"  StrokeDashArray="1 1"/>
        <Path HorizontalAlignment="Center" Data="{StaticResource Clown}"
              Stroke="Green" StrokeThickness="4" StrokeDashArray="2 1"/>
    </UniformGrid>
</Window>

Figure 17.22. Using static geometry resources to create reusable shapes

The following XAML uses a set of Rectangle, Ellipse, and Line objects (from the System.Windows.Shapes namespace) to demonstrate how to use SolidColorBrush objects to draw and fill shapes (see Figure 17-23). The XAML demonstrates how to use named colors, RGB syntax, and scRGB syntax, as well as how to create and use a static SolidColorBrush resource.

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Recipe17_25" Height="300" Width="300">
    <Canvas Margin="5">
        <Canvas.Resources>
            <!--scRGB semi-transparent color-->
            <SolidColorBrush Color="sc# 0.8,0.3,0.9,0.25" x:Key="Brush1" />
        </Canvas.Resources>

        <!--SolidColorBrush resource-->
        <Rectangle Fill="{StaticResource Brush1}" Height="180" Width="80" />
        <!--Named color-->

<Rectangle Canvas.Top="10" Canvas.Left="50"
            Fill="RoyalBlue" Height="70" Width="220" />
        <!--RGB semi-transparent color-->
        <Ellipse Canvas.Top="30" Canvas.Left="90"
            Fill="#72ff8805" Height="150" Width="100" />
        <!--RGB solid color-->
        <Ellipse Canvas.Top="150" Canvas.Left="70"
            Fill="#ff0000" Height="100" Width="200" />
        <!--scRGB semi-transparent color-->
        <Line X1="20" X2="260" Y1="200" Y2="50"
              Stroke="sc# 0.6,0.8,0.3,0.0" StrokeThickness="40"/>
        <!--scRGB solid color-->
        <Line X1="20" X2="270" Y1="240" Y2="240"
              Stroke="sc# 0.1,0.5,0.1" StrokeThickness="20"/>
    </Canvas>
</Window>

Figure 17.23. Drawing and filling shapes with solid colors

The following XAML uses a set of Rectangle, Ellipse, and Line objects (from the System.Windows.Shapes namespace) to demonstrate how to use LinearGradientBrush and RadialGradientBrush objects to draw and fill shapes (see Figure 17-24). The XAML also demonstrates how to create and use static LinearGradientBrush and RadialGradientBrush resources.

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Recipe17_26" Height="300" Width="300">
    <Canvas Margin="5">
        <Canvas.Resources>
            <!--Vertical reflected LinearGradientBrush static resource-->
            <LinearGradientBrush x:Key="LGB1" SpreadMethod="Reflect"
                                 StartPoint="0.5,-0.25" EndPoint="0.5,.5">
                <GradientStop Color="Aqua" Offset="0.5" />
                <GradientStop Color="Navy" Offset="1.0" />
            </LinearGradientBrush>

<!--Centered RadialGradientBrush static resource-->
            <RadialGradientBrush Center="0.5,0.5" RadiusX=".8" RadiusY=".5"
                                 GradientOrigin="0.5,0.5" x:Key="RGB1">
                <GradientStop Color="BlanchedAlmond" Offset="0" />
                <GradientStop Color="DarkGreen" Offset=".7" />
            </RadialGradientBrush>
        </Canvas.Resources>

        <!--Fill with LinearGradientBrush static resource-->
        <Rectangle Canvas.Top="5" Canvas.Left="5"
            Fill="{StaticResource LGB1}" Height="180" Width="80" />
        <!--Fill with RadialGradientBrush static resource-->
        <Rectangle Canvas.Top="10" Canvas.Left="50"
                   Fill="{StaticResource RGB1}" Height="70" Width="230" />
        <!--Fill with offset RadialGradientBrush-->
        <Ellipse Canvas.Top="130" Canvas.Left="30" Height="100" Width="230">
            <Ellipse.Fill>
                <RadialGradientBrush RadiusX=".8" RadiusY="1"
                                 Center="0.5,0.5" GradientOrigin="0.05,0.5">
                    <GradientStop Color="#ffffff" Offset="0.1" />
                    <GradientStop Color="#ff0000" Offset="0.5" />
                    <GradientStop Color="#880000" Offset="0.8" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <!--Fill with diagonal LinearGradientBrush-->
        <Ellipse Canvas.Top="30" Canvas.Left="110" Height="150" Width="150">
            <Ellipse.Fill>
                <LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
                    <GradientStop Color="#DDFFFFFF" Offset=".2" />
                    <GradientStop Color="#FF000000" Offset=".8" />
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>

        <!--Stroke with horizontal multi-color LinearGradientBrush-->
        <Line X1="20" X2="280" Y1="240" Y2="240" StrokeThickness="30">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="Red" Offset="0.15" />
                    <GradientStop Color="Orange" Offset="0.2" />
                    <GradientStop Color="Yellow" Offset="0.35" />
                    <GradientStop Color="Green" Offset="0.5" />
                    <GradientStop Color="Blue" Offset="0.65" />
                    <GradientStop Color="Indigo" Offset="0.75" />
                    <GradientStop Color="Violet" Offset="0.9" />
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
    </Canvas>
</Window>

Figure 17.24. Filling and drawing shapes with linear and radial gradients

The following XAML uses a set of Rectangle, Ellipse, Polygon, and Line objects (from the System.Windows.Shapes namespace) to demonstrate how to use ImageBrush objects to fill shapes with an image (see Figure 17-25). The XAML also demonstrates how to create and use a static ImageBrush resource.

<Window x:Class="Apress.VisualCSharpRecipes.Chapter17.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Recipe17_27" Height="300" Width="300">
    <Canvas Margin="5">
        <!--Define a static ImageBrush resource-->
        <Canvas.Resources>
            <ImageBrush x:Key="IB1" ImageSource="WeeMee.jpg" />
        </Canvas.Resources>

        <!--Fill ellipse using static ImageBrush resource-->
        <Ellipse Height="160" Width="160"
                 Canvas.Top="0" Canvas.Left="110"
                 Stroke="Black" StrokeThickness="1"
                 Fill="{StaticResource IB1}" />
        <!--Fill rectangle with UniformToFill ImageBrush-->
        <Rectangle Height="180" Width="50"
                   Canvas.Top="5" Canvas.Left="5"
                   Stroke="Black" StrokeThickness="1" >
            <Rectangle.Fill>
                <ImageBrush ImageSource="WeeMee.jpg" Stretch="UniformToFill"/>
            </Rectangle.Fill>
        </Rectangle>
        <!--Fill Polygon with Left aligned Uniform ImageBrush-->
        <Polygon Canvas.Top="110" Canvas.Left="45"
                 Points="40,0 150,100 10,100"
                 Stroke="Black" StrokeThickness="1">

            <Polygon.Fill>
                <ImageBrush ImageSource="WeeMee.jpg" Stretch="Uniform"
                            AlignmentX="Left" />
            </Polygon.Fill>
        </Polygon>

<!--Draw a line using a part of the source image-->
        <Line X1="20" X2="280" Y1="240" Y2="240" StrokeThickness="30">
            <Line.Stroke>
                <ImageBrush ImageSource="WeeMee.jpg"
                            Viewbox="30,46,42,15" ViewboxUnits="Absolute" />
            </Line.Stroke>
        </Line>
    </Canvas>
</Window>

Figure 17.25. Filling and drawing shapes with images