Demonstrated Issues:

• Using images
• Adding content to controls
• Templates
• Styles
• Layout - Canvas, StackPanel, DockPanel, WrapPanel, UniformGrid, Grid
• Custom command

Steps:

1. Create a new WPF Application project in Visual Studio 2008.
   • We will add many windows demonstrating controls and layout issues. To make testing new windows simpler, we add piece of C# code creating and adding buttons to the main window, one button per each class inherited from the Window class found in the current project. Clicking the button will instantiate and display a window of the selected type.
     • Replace the Grid control with the WrapPanel control in the main window (Window1). To use the WrapPanel control from the source code, its name must be set:
       <Window x:Class="ControlsLayout.Window1"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Title="Window1" Height="300" Width="300" Loaded="Window_Loaded">
           <WrapPanel Name="wrapPanel">
               
           </WrapPanel>
       </Window>
     • Add a handler for the Loaded event of the Window1 class and write the following code:
       private void Window_Loaded(object sender, RoutedEventArgs e)
       {
           Assembly assembly = Assembly.GetExecutingAssembly();
           Type[] types = assembly.GetTypes();
           foreach (Type type in types)
           {
               if (type != this.GetType() &&
                   type.BaseType.FullName == "System.Windows.Window")
               {
                   Button button = new Button();
                   button.Content = type.Name;
                   button.Tag = type;
                   button.Click += new RoutedEventHandler(button_Click);
                   wrapPanel.Children.Add(button);
               }
           }
       }
       
       void button_Click(object sender, RoutedEventArgs e)
       {
           Type type = (Type)(sender as Button).Tag;
           Window window = Activator.CreateInstance(type) as Window;
           window.Owner = this;
           window.WindowStartupLocation = WindowStartupLocation.CenterOwner;
           window.Show();
       }
       • In the above source code, the reflection mechanism is used. It allows to find all classes in the specified assembly and take the Type of each of them. When the Type is known, an object of it can be instantiated dynamically.
       • As a source assembly, the current, executing assembly is taken, so types are loaded from the same executable file.
       • Notice checking the base class of a type found in the assembly - only windows are interesting for us.
   • Add some images to the project.
     • Add a folder to the project (right click on the project in the Solution Explorer window / Add / New folder). Name the folder 'Images'.
     • Unpack images from this file to the Images folder.
     • Add these images to the project in Visual Studio (right click on the folder / Add / Existing item):
       
2. Example of content displayed in simple controls.
   • Add a new window to the project, name it 'ContentExampleWindow'.
   • Drag a ListBox control from the Toolbox window and drop it on the window:
     
     • Note that by default Visual Studio Designer positions controls absolutely using the Margin and Width properties.
   • Remove the ListBox control added from the toolbox and add another one - just type in the XAML editor:
     
   • Add items to the ListBox:
     • The first item should contain only a text and the second one only a rectangle:
       
     • The third item should contain both a text and a rectangle.
       • A try to simple add two elements between inside a ListBoxItem ends with error information from the Designer that there can be only one content in this element:
         
       • A solution is to use any other container placed in a ListBoxItem. This new container can contain a text and a rectangle, but the text must formalized as a TextBlock (or Label) item:
         
     • The fourth item should contain images with describing labels:
       
       • Notice that the ListBoxItem contains a WrapPanel which contains StackPanels allowing to position labels near images.
       • The problem is the WrapPanel does not wrap properly.
         
       • The reason is the WrapPanel is by default allowed to increase its width and the same for the ListBoxItem. Both these controls increase their width because the ListBox allows to do it by providing the horizontal scroll bar. The easiest solution is to disable this scroll bar in the ListBox:
         
         <Window x:Class="ControlsLayout.ContentExampleWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="ContentExampleWindow" Height="300" Width="300">
             <Grid>
                 <ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                     <ListBoxItem>Just a text</ListBoxItem>
                     <ListBoxItem>
                         <Rectangle Fill="Chocolate"
                                    Height="20" Width="100"
                                    Margin="5"/>
                     </ListBoxItem>
                     <ListBoxItem>
                         <WrapPanel>
                             <Rectangle Fill="Red"
                                    Height="20" Width="100"
                                    Margin="5"/>
                             <TextBlock>Text near a rectangle</TextBlock>
                         </WrapPanel>
                     </ListBoxItem>
                     <ListBoxItem>
                         <WrapPanel>
                             <StackPanel Orientation="Horizontal">
                                 <TextBlock>Fiona: </TextBlock>
                                 <Image Source="Images/Fiona.gif"></Image>
                             </StackPanel>
                             <StackPanel Orientation="Horizontal">
                                 <TextBlock>Lord:</TextBlock>
                                 <Image Source="Images/Lord.gif"></Image>
                             </StackPanel>
                             <StackPanel Orientation="Horizontal">
                                 <TextBlock>Shrek:</TextBlock>
                                 <Image Source="Images/Shrek.gif"></Image>
                             </StackPanel>
                         </WrapPanel>
                     </ListBoxItem>
                 </ListBox>
             </Grid>
         </Window>
3. Example of templates applied to buttons.
   • Add a new window to the project, name it 'TemplateExampleWindow'.
   • Define 2 rows and 2 columns in the grid:
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition />
             <RowDefinition />
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
             <ColumnDefinition />
             <ColumnDefinition />
         </Grid.ColumnDefinitions>
     </Grid>
   • Add a button to each cell of the grid:
     
     • Try to add a button by dragging from the Toolbox window, note automatic using of some properties allowing to position absolutely the button in the grid. When there is no need to position absolutely (like in this example - allow buttons to fit the grid's cells), it is easier to write XAML code manually.
     • Note the way in which controls can be added to the grid's cells - special Grid.Column and Grid.Row properties are available for controls placed inside a grid.
   • Lets try to modify the appearance of the second button to make it flat and apply a rounded rectangle as its border:
     • Add the Button.Template and the ControlTemplate element to the button. In the ControlTemplate element define a border with rounded corners:
       
     • Nothing is visible in the button's cell. To show the border we need to specify a brush which will be used to draw the border and also the border's thickness. To make it more visible, apply a margin to the button:
       
     • We can see the border now, but there is no content. When a new template is defined for a control, it completely overwrite the default template, so the new one must be complete. We need to add a place for content in our template. It can be done by adding a ContentPresenter. The ContentPresenter must be added inside the Border element, because Borders in WPF are responsible for drawing the whole control.
       
     • The ContentPresenter has many formatting options. Remember that most of them can be modified using the Properties window. For example, set the alignment to center:
       <Button Grid.Column="1" Margin="3">
           <Button.Template>
               <ControlTemplate TargetType="{x:Type Button}">
                   <Border CornerRadius="4" BorderThickness="1">
                       <Border.BorderBrush>
                           <SolidColorBrush Color="Black"/>
                       </Border.BorderBrush>
                       <ContentPresenter
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center" />
                   </Border>
               </ControlTemplate>
           </Button.Template>
           The second button
       </Button>
     • The button works, to prove it we can add a handler for its Click event to show information using a MessageBox. However, the button should visually respond to the user's actions. To accomplish this requirement, triggers can be used. For example, to change the background when the mouse enters the button, set a Trigger for the Button.IsMouseOver property:
       <Button Grid.Column="1" Margin="3" Click="Button_Click">
       <Button.Template>
           <ControlTemplate TargetType="{x:Type Button}">
               <Border Name="MyBorder"
                      CornerRadius="4"
                      BorderThickness="1">
                   <Border.BorderBrush>
                       <SolidColorBrush Color="Black"/>
                   </Border.BorderBrush>
                   <ContentPresenter
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center">
                   </ContentPresenter>
               </Border>
               <ControlTemplate.Triggers>
                   <Trigger Property="Button.IsMouseOver" Value="True">
                       <Setter TargetName="MyBorder"
                              Property="Border.Background"
                              Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}">
                       </Setter>
                   </Trigger>
               </ControlTemplate.Triggers>
           </ControlTemplate>
       </Button.Template>
       The second button
       </Button>
       • DynamicResource allow to dynamically use some data. It this case, the colour from the system's settings is taken. Because the DynamicResource is used (in opposite to the StaticResource), value of the colour is taken each time it is needed. Thus, when the user changes the system's colours, the button's appearance also changes.
     • When we also need to visually notify the user's about pressing the button, we need to add a trigger for the Button.IsPressed property.
       <Button Grid.Column="1" Margin="3" Click="Button_Click">
       <Button.Template>
           <ControlTemplate TargetType="{x:Type Button}">
               <Border Name="MyBorder"
                      CornerRadius="4"
                      BorderThickness="1">
                   <Border.BorderBrush>
                       <SolidColorBrush Color="Black"/>
                   </Border.BorderBrush>
                   <ContentPresenter
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center">
                   </ContentPresenter>
               </Border>
               <ControlTemplate.Triggers>
                   <Trigger Property="Button.IsMouseOver" Value="True">
                       <Setter TargetName="MyBorder"
                              Property="Border.Background"
                              Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}">
                       </Setter>
                   </Trigger>
                   <Trigger Property="Button.IsPressed" Value="True">
                       <Setter TargetName="MyBorder"
                              Property="Border.Background"
                              Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
                       </Setter>
                   </Trigger>
               </ControlTemplate.Triggers>
           </ControlTemplate>
       </Button.Template>
       The second button
       </Button>
       • Note that the order of defined triggers is important. Change the order and test the button to see the difference.
   • Templates can be shared and parametrized.
     • Add a ControlTemplate for Button controls as a resource attached to the window:
       <Window x:Class="ControlsLayout.TemplateExampleWindow"
               xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
               Title="TemplateExampleWindow" Height="150" Width="300">
         
          <Window.Resources>
             <ControlTemplate x:Key="SharedButtonTemplate"
                              TargetType="Button">
                 <Border CornerRadius="10"
                        Background="{TemplateBinding Property=Background}"
                        BorderThickness="{TemplateBinding Property=BorderThickness}"
                        BorderBrush="{TemplateBinding Property=BorderBrush}">
                     <ContentPresenter Margin="3"/>
                 </Border>
             </ControlTemplate>
         </Window.Resources>
       
     • Use the SharedButtonTemplate for the last 2 buttons:
       
4. Examples of styles.
   • Styles are an alternative way to change controls' appearance. While ControlTemplates define a visual tree which represents a control, Styles are used to set properties of controls to particular values. When there is no need to modify the structure of a control, it is easier to use styles.
   • Add a new window named 'StylesExampleWindow' to the project.
   • As in the previous example, define 2 rows and 2 columns in the grid and add a button to each cell:
     
   • The easiest way to change appearance of a control is just to change its properties, e.g.:
     
     • Notice that this time we don't have to bother about visual response for the user's actions. The behaviour of the button remains unchanged, we've just modified two appearance properties.
   • When we want to share the appearance between more buttons, using a style is the best choice.
     • Define a style for buttons in the window's resources:
       
     • Note that automatically appearance of all buttons changes. The style is applied automatically to all buttons only if there is no x:Key property defined for it. When we set this property, the target button must have the Style property set:
       
       • We use a StaticResource because the style is defined in the window's resources. The style never changes, so there is no need to use a DynamicResource (using the StaticResource is more efficient).
   • Multiple styles cannot be applied for a single control, but it is possible to inherit a style from an existing one, for example:
     <Window.Resources>
         <Style x:Key="NavyButton" TargetType="{x:Type Button}">
             <Setter Property="Background" Value="Navy"/>
             <Setter Property="Foreground" Value="White"/>
             <Setter Property="Margin" Value="2"/>
         </Style>
     
         <Style x:Key="ShadowedNavyButton"
                BasedOn="{StaticResource NavyButton}"
                TargetType="{x:Type Button}">
             <Setter Property="BitmapEffect">
                 <Setter.Value>
                     <DropShadowBitmapEffect Opacity ="0.5"/>
                 </Setter.Value>
             </Setter>
         </Style>
     </Window.Resources>
     
     
• Triggers can also be used in styles, for example:
  <Style x:Key="HoveredButton" TargetType="{x:Type Button}">
      <Style.Triggers>
          <Trigger Property="IsMouseOver" Value="True">
              <Setter Property="Foreground" Value="Red" />
          </Trigger>
      </Style.Triggers>
  </Style>
• It is also possible to create custom ControlTemplates in styles.
5. Layout examples.
   • There are a few built-in layouts in WPF. They are represented by controls which can be found on the Toolbox.
   • Canvas
     • Add to the project a new window named 'CanvasExampleWindow'.
     • Replace the Grid element with the Canvas element and add two simple Labels to the Canvas:
       <Window x:Class="ControlsLayout.CanvasExampleWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Title="CanvasExampleWindow" Height="300" Width="300">
           <Canvas>
               <Label>Label 1</Label>
               <Label>The second label</Label>
           </Canvas>
       </Window>
       • Note that both Labels are located in the same place. In the Canvas control all child controls must specify the position, otherwise the default (0, 0) is used.
     • Use the Canvas.Left and the Canvas.Top properties to set the position:
       <Canvas>
           <Label>Label 1</Label>
           <Label Canvas.Left="20" Canvas.Top="20">
               The second label
           </Label>
       </Canvas>
     • Add a Thumb control to the window (it is not included in the Toolbox):
       
     • A Thumb is an interesting control which has a built-in support for dragging. For example, to allow the user to drag the Thumb control, it is enough to process the DragDelta event:
       private void myThumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
       {
           Canvas.SetLeft(myThumb, Canvas.GetLeft(myThumb) + e.HorizontalChange);
           Canvas.SetTop(myThumb, Canvas.GetTop(myThumb) + e.VerticalChange);
       }
       • To work with a control in the source code, it must have a name, so be sure to set the Thumb's name ('myThumb').
   • StackPanel
     • Add to the project a new window named 'StackPanelExampleWindow'.
     • Replace the Grid with the StackPanel. Add a Button, a TextBox, and a TextBlock to the StackPanel:
       <StackPanel>
           <Button>The button</Button>
           <TextBox></TextBox>
           <TextBlock>To change</TextBlock>
       </StackPanel>
     • Note that by default, the StackPanel is oriented vertically. It can be changed by setting the Orientation property:
       
     • Set the TextBlock's text to the value from the TextBox control. It can easily done in the source code using the Click event of the button:
       private void MyButton_Click(object sender, RoutedEventArgs e)
       {
           FirstTextBlock.Text = MyTextBox.Text;
       }
       • Be sure to set names for controls used from the source code:
         <StackPanel Orientation="Vertical">
             <Button Click="MyButton_Click">
                 The button
             </Button>
             <TextBox Name="MyTextBox"/>
             <TextBlock Name="FirstTextBlock">To change</TextBlock>
         </StackPanel>
     • WPF offers also a very interesting feature of binding values of properties between elements. For example, add a second TextBlock control which should always display the value of the TextBox control:
       <TextBlock Text="{Binding ElementName=MyTextBox, Path=Text}"/>
   • DockPanel
     • Add to the project a new window named 'DockPanelExampleWindow'.
     • We want to create a window which displays an image chosen from a menu, a toolbar, or a list.
     • Replace the Grid with the DockPanel and add necessary controls to the window:
       <DockPanel>
           <Menu DockPanel.Dock="Top">
           </Menu>
           <ToolBarTray DockPanel.Dock="Top">
               <ToolBar >
               </ToolBar>
           </ToolBarTray>
           <ListView Name="list" DockPanel.Dock="Left"/>
           <Image Name="image"></Image>
       </DockPanel>
       • Notice that the DockPanel is excellent for this scenario - all elements are positioned as needed.
       • Notice also using the ToolBarTray and the ToolBar controls.
     • Define menu items:
       <Menu DockPanel.Dock="Top">
           <MenuItem Header="_Fiona">
               <MenuItem.Icon>
                   <Image Source="Images/Fiona.gif"
                          Width="16" Height="16"/>
               </MenuItem.Icon>
           </MenuItem>
           <MenuItem Header="_Lord">
               <MenuItem.Icon>
                   <Image Source="Images/Lord.gif"
                          Width="16" Height="16"/>
               </MenuItem.Icon>
           </MenuItem>
           <MenuItem Header="_Osiol">
               <MenuItem.Icon>
                   <Image Source="Images/Osiol.gif"
                          Width="16" Height="16"/>
               </MenuItem.Icon>
           </MenuItem>
           <MenuItem Header="_Shrek">
               <MenuItem.Icon>
                   <Image Source="Images/Shrek.gif"
                          Width="16" Height="16"/>
               </MenuItem.Icon>
           </MenuItem>
       </Menu>
     • Define buttons in the ToolBar:
       <ToolBarTray DockPanel.Dock="Top">
           <ToolBar>
               <Button>
                   <Image Source="Images/Fiona.gif"
                          Width="32" Height="32"/>
               </Button>
               <Button>
                   <Image Source="Images/Lord.gif"
                          Width="32" Height="32"/>
               </Button>
               <Button>
                   <Image Source="Images/Osiol.gif"
                          Width="32" Height="32"/>
               </Button>
               <Button>
                   <Image Source="Images/Shrek.gif"
                          Width="32" Height="32"/>
               </Button>
           </ToolBar>
       </ToolBarTray>
     • Define items in the list:
       <ListView Name="list" DockPanel.Dock="Left">
           <ListViewItem Margin="1">
               <StackPanel Orientation="Horizontal">
                   <Image Source="Images/Fiona.gif"
                          Width="16" Height="16"/>
                   <TextBlock Margin="3,0,3,0">Fiona</TextBlock>
               </StackPanel>
           </ListViewItem>
           <ListViewItem Margin="1">
               <StackPanel Orientation="Horizontal">
                   <Image Source="Images/Lord.gif"
                          Width="16" Height="16"/>
                   <TextBlock Margin="3,0,3,0">Lord</TextBlock>
               </StackPanel>
           </ListViewItem>
           <ListViewItem Margin="1">
               <StackPanel Orientation="Horizontal">
                   <Image Source="Images/Osiol.gif"
                          Width="16" Height="16"/>
                   <TextBlock Margin="3,0,3,0">Osiol</TextBlock>
               </StackPanel>
           </ListViewItem>
           <ListViewItem Margin="1">
               <StackPanel Orientation="Horizontal">
                   <Image Source="Images/Shrek.gif"
                          Width="16" Height="16"/>
                   <TextBlock Margin="3,0,3,0">Shrek</TextBlock>
               </StackPanel>
           </ListViewItem>
       </ListView>
     • It is time to add commands processing to the window. We will use a single command ('ChangedImageCommand') with a path to the image to show passed as a parameter. To manage commands we need:
       • One (usually static) object of the RoutedCommand class representing the command:
         public static RoutedCommand ChangeImageCommand = new RoutedCommand();
       • Definition of a method called when the command executes:
         private void ChangeImageCommand_Executed(object sender, ExecutedRoutedEventArgs e)
         {
             string filePath = e.Parameter as string;
             BitmapImage orgImage = new BitmapImage(
                 new Uri("pack://application:,,,/" + filePath, UriKind.Absolute));
         
             FormatConvertedBitmap grayscaledImage = new FormatConvertedBitmap();
             grayscaledImage.BeginInit();
             grayscaledImage.Source = orgImage;
             grayscaledImage.DestinationFormat = PixelFormats.Gray32Float;
             grayscaledImage.EndInit();
         
             image.Source = grayscaledImage;
         }
         • Note that the method receives an ExecutedRoutedEventArgs parameter which contains the parameter for the command passed from the source.
         • In this method we assume that the command's parameter contains a path to the file which should be displayed.
         • This method converts the image to grayscale image. It uses the FormatConvertedBitmap class to make this conversion efficiently. Unfortunately, the FormatConvertedBitmap class has a bug which unables using a simple path to the file (e.g. 'Images/Fiona.gif') and forces to use full Uri for a resource packed into an application ('pack://application:,,,/Images/Fiona.gif').
       • A CommandBinding declared for the command to define which method should be called when the command executes:
         <Window x:Class="ControlsLayout.DockPanelExampleWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:local="clr-namespace:ControlsLayout"
            Title="DockPanelExampleWindow" Height="250" Width="400">
         
             <Window.CommandBindings>
                 <CommandBinding Command="{x:Static local:DockPanelExampleWindow.ChangeImageCommand}"
                                 Executed="ChangeImageCommand_Executed"/>
             </Window.CommandBindings>
         • The CommandBindings collection can contain bindings for all commands used in a window. Such binding contains the command's object, the command's method for executing the command, and optionally the method for checking if the command can be executed.
         • Notice that we need to use the static object declared inside the DockPanelExampleWindow class. To easily use classes from a namespace, it is a good idea to declare this namespace using the xmlns attribute. Using this attribute the namespace can be specified using a simple name define in it ('local' in the above example). Notice also that when referring to a namespace defined in the source code, the 'clr-namespace' phrase can be used.
       • For each MenuItem, set the Command and the CommandParameter properties, e.g.:
         <MenuItem Header="_Fiona"
                  Command="{x:Static local:DockPanelExampleWindow.ChangeImageCommand}"
                  CommandParameter="Images/Fiona.gif">
             <MenuItem.Icon>
                 <Image Source="Images/Fiona.gif"
                        Width="16" Height="16"/>
             </MenuItem.Icon>
         </MenuItem>
       • The same properties must be defined for each Button placed in the ToolBar, e.g.:
         <Button Command="{x:Static local:DockPanelExampleWindow.ChangeImageCommand}"
                 CommandParameter="Images/Fiona.gif">
             <Image Source="Images/Fiona.gif"
                    Width="32" Height="32"/>
         </Button>
     • If we want to fire the command also when the ListView's selection changes, we need to do it manually:
     • Add a handler for the SelectionChanged event and be sure to set the Single value for the SelectionMode property:
       <ListView Name="list" DockPanel.Dock="Left"
                 SelectionChanged="list_SelectionChanged"
                 SelectionMode="Single">
     • In the event handler just execute the command:
       private void list_SelectionChanged(object sender, SelectionChangedEventArgs e)
       {
           if (list.SelectedItem != null)
           {
               string param = (list.SelectedItem as ListViewItem).Tag as string;
               ChangeImageCommand.Execute(param, this);
           }
       }
• We assume that each item in the ListView has a path to an image set in its Tag property, e.g.:
  <ListViewItem Margin="1" Tag="Images/Fiona.gif">
      <StackPanel Orientation="Horizontal">
          <Image Source="Images/Fiona.gif"
                 Width="16" Height="16"/>
          <TextBlock Margin="3,0,3,0">Fiona</TextBlock>
      </StackPanel>
  </ListViewItem>
• WrapPanel
  • Add to the project a new window named 'WrapPanelExampleWindow'.
  • Replace the Grid element with the WrapPanel and name it 'wrapPanel':
    <WrapPanel Name="wrapPanel">
    </WrapPanel>
  • In the window's constructor add 100 TextBlock controls to the WrapPanel:
    public WrapPanelExampleWindow()
    {
        InitializeComponent();
    
        for (int i = 1; i <= 100; i++)
        {
            TextBlock textBlock = new TextBlock();
            textBlock.Text = i.ToString();
            wrapPanel.Children.Add(textBlock);
        }
    }
  • Run the application and check how the WrapPanel works (be sure to resize the window):
    
  • Set the style for the TextBlock controls to improve appearance:
    <Window.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="Margin" Value="5"/>
            <Setter Property="BitmapEffect">
                <Setter.Value>
                    <OuterGlowBitmapEffect GlowColor="Chocolate" GlowSize="7"/>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    
    
• UniformGrid
  • The UniformGrid is a very useful control which allows to define a simple grid where each cell is the same size, and the locations of the items are determined simply by their order in the children collection.
  • Add to the project a new window named 'UniformGridExampleWindow'.
  • Add a ListBox to the Grid control placed in the window. Specify to use the ItemsPanel and the ItemsTemplate properties:
    <Grid>
        <ListBox Name="colorsListBox"
                 ItemsPanel="{StaticResource MyItemsPanelTemplate}"
                 ItemTemplate="{StaticResource MyDataTemplate}"/>
    </Grid>
  • Define resources with names used in the above code:
    <Window.Resources>
        <ItemsPanelTemplate x:Key="MyItemsPanelTemplate">
            <UniformGrid Columns="8"></UniformGrid>
        </ItemsPanelTemplate>
    
        <DataTemplate x:Key="MyDataTemplate">
            <Canvas Margin="2" Width="100" Height="30">
                <Border BorderBrush="Black" BorderThickness="1"
                       Background="{Binding Brush}"
                       Width="100" Height="30"/>
                <TextBlock Text="{Binding Name}"
                           TextAlignment="Center"
                           ToolTip="{Binding Brush.Color}"
                           Width="100" Height="30">
                    <TextBlock.BitmapEffect>
                        <OuterGlowBitmapEffect GlowColor="White" GlowSize="7"/>
                    </TextBlock.BitmapEffect>
                </TextBlock>
            </Canvas>
        </DataTemplate>
    </Window.Resources>
  • In this code we assume that objects of a class containing Brush and Name fields are used, so we have to fill the ListBox with such objects:
    public UniformGridExampleWindow()
    {
        InitializeComponent();
    
        colorsListBox.ItemsSource = typeof(Brushes)
            .GetProperties(BindingFlags.Static | BindingFlags.Public)
            .Select(x => new
            {
                Name = x.Name,
                Brush = x.GetValue(null, null)
            });
    }
    
    
• Grid
  • Add to the project a new window named 'GridExampleWindow'.
  • Add definitions of 3 rows to the Grid:
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
  • Add rectangles to rows, use different colours for them:
    <Rectangle Grid.Row="0" Fill="BlanchedAlmond"/>
    <Rectangle Grid.Row="1" Fill="BurlyWood"/>
    <Rectangle Grid.Row="2" Fill="Crimson"/>
    • Notice the way in which content controls can be added the Grid's to cells (using the Grid.Row and the Grid.Column properties).
  • Add a second Grid to the first row:
    <Rectangle Grid.Row="0" Fill="BlanchedAlmond"/>
    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>
        <Rectangle Grid.Column="0" Fill="YellowGreen"/>
        <GridSplitter Grid.Column="1" Width="5"
                     VerticalAlignment="Stretch"
                     HorizontalAlignment="Center" ShowsPreview="True" />
        <Rectangle Grid.Column="2" Fill="BlueViolet"/>
    </Grid>
    • Note the GridSplitter control which allows the user to change the grid cells' sizes.
    • Note also the width definitions: '1*' and '3*'. It means that the default horizontal split for cells is as 1 to 3.
  • Add a Button to the cell filled with YellowGreen colour:
    <Button Grid.Column="0" Margin="10, 10, 10, -10">Btn</Button>
    
    
    • The negative value for the bottom margin causes the Button to be placed partially outside its parent element. It is very interesting that by default WPF does not apply clipping. The button is not drawn on the BurlyWood rectangle because this rectangle is declared later. When we change the order, the Button appears entirely:
      

[Source code]