1. Mohammad Shaker
mohammadshaker.com
WPF Starter Course
@ZGTRShaker
2011, 2012, 2013, 2014
WPF Showcase
L01 – Layouts, Controls, Styles and
Templates

2. WPF

3. WPF
Windows Presentation Foundation

4. WPF
with Expression Blend

5. WPF References

6. WPF
Automata
Project,
withVB.NET

7. My 3rd Year Projects with.NET!
WPF
RFIDSystem
withC#

8. Rich Content

9. Stand Alone Apps

10. Browser-Hosted Apps

11. WPF Overview

12. A lot of these WPF slides are ported from
http://www.blackwasp.co.uk/

13. WPF Overview

14. WPF Overview

15. WPF Overview

16. WPF Overview

17. WPF Overview

18. Layouts

19. Grid
<Window x:Class="GridDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Grid Demo"
Height="200"
Width="250">
<Grid>
<Button Content="Click Me!"/>
</Grid>
</Window>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Content="Click Me!"/>
</Grid>

20. UniformGrid
<Window x:Class="UniformGridDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="UniformGrid Demo"
Height="200"
Width="250">
<UniformGrid>
<Button Content="Button 1"/>
<Button Content="Button 2"/>
<Button Content="Button 3"/>
<Button Content="Button 4"/>
</UniformGrid>
</Window>

21. DockPanel

22. WrapPanel
<Window x:Class="WrapPanelDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WrapPanel Demo"
Height="200"
Width="250">
<WrapPanel Margin="10" Background="Lavender">
<Button Content="Button 1" Width="100" Height="25" Margin="3"/>
<Button Content="Button 2" Width="100" Height="25" Margin="3"/>
<Button Content="Button 3" Width="100" Height="25" Margin="3"/>
<Button Content="Button 4" Width="100" Height="25" Margin="3"/>
</WrapPanel>
</Window>
Resized
Original Size

23. StackPanel
<Window x:Class="StackPanelDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="StackPanel Demo"
Height="200"
Width="250">
<StackPanel Background="Orange">
<Label Content="First Name" />
<TextBox x:Name="FirstName"/>
<Label Content="Last Name"/>
<TextBox x:Name="LastName"/>
<Button Content="OK"/>
<Button Content="Cancel"/>
</StackPanel>
</Window>
<StackPanel Background="Orange">
<Label Content="First Name" />
<TextBox x:Name="FirstName"/>
<Label Content="Last Name"/>
<TextBox x:Name="LastName"/>
<StackPanel Orientation="Horizontal" Background="Yellow">
<Button Content="OK"/>
<Button Content="Cancel"/>
</StackPanel>
</StackPanel>

24. StackPanel

25. ViewBox – Change Elements Sizes When Resized
<Viewbox>
<DockPanel Width="250" Height="200">
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top" Background="LightBlue">
<Button Content="01" Margin="1"/>
<Button Content="02" Margin="1"/>
<Button Content="03" Margin="1 1 10 1"/>
<Button Content="04" Margin="1"/>
<Button Content="05" Margin="1"/>
<Button Content="06" Margin="1"/>
</StackPanel>
<StackPanel Orientation="Horizontal"
DockPanel.Dock="Bottom"
Background="Lightblue"
Height="25">
<TextBlock VerticalAlignment="Center">Processing</TextBlock>
<ProgressBar Value="75" Width="100" Margin="4"/>
</StackPanel>
<Grid>
<TextBlock>Content area</TextBlock>
</Grid>
</DockPanel>
</Viewbox>
Resized
Original Size

26. Border

27. Border
• <Border Margin="5" Padding="5" Background="LightYellow"
• BorderBrush="SteelBlue" BorderThickness="3,5,3,5" CornerRadius="3"
• VerticalAlignment="Top">
– <StackPanel>
• <Button Margin="3">One</Button>
• <Button Margin="3">Two</Button>
• <Button Margin="3">Three</Button>
– </StackPanel>
• </Border>

28. Controls

29. TextBox and Label
<Window x:Class="TextBoxDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TextBox Demo"
Height="200"
Width="250">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Content="Enter some text" Margin="5"/>
<TextBox Grid.Row="1" Name="MyTextBox" Margin="5"/>
<Button Grid.Row="2" Content="OK" Margin="5"/>
<Label Grid.Row="3" Name="MyLabel" Margin="5"/>
</Grid>
</Window>
private void Button_Click(object sender, RoutedEventArgs e)
{
MyLabel.Content = MyTextBox.Text;
}

30. TextBox and Label
<Window x:Class="LabelDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Label Demo"
Width="250"
Height="150">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Content="First Name" Margin="4"/>
<TextBox Grid.Column="1" x:Name="FirstName" Margin="4"/>
<Label Grid.Row="1" Content="Last Name" Margin="4"/>
<TextBox Grid.Row="1" Grid.Column="1" x:Name="LastName" Margin="4"/>
<StackPanel Grid.Row="2" Grid.ColumnSpan="2"
Orientation="Horizontal"
HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Button Content="OK" Width="60" Margin="4"/>
<Button Content="Cancel" Width="60" Margin="4"/>
</StackPanel>
</Grid>
</Window>

31. RichTextBox
control has a similar appearance to a standard TextBox. However, where TextBoxes only permit you to edit plain
text, RichTextBoxes allow you to create complex documents with font and paragraph formatting, page layout
options and inserted elements, such as images.

32. ListBox
<Window x:Class="ListBoxDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ListBox Demo"
Height="200"
Width="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<ListBox Name="MyList">
<ListBoxItem>Red</ListBoxItem>
<ListBoxItem>Orange</ListBoxItem>
<ListBoxItem>Yellow</ListBoxItem>
<ListBoxItem>Green</ListBoxItem>
<ListBoxItem>Blue</ListBoxItem>
<ListBoxItem>Indigo</ListBoxItem>
<ListBoxItem>Violet</ListBoxItem>
</ListBox>
<Button Grid.Row="1">OK</Button>
</Grid>
</Window>
private void Button_Click(object sender, RoutedEventArgs e)
{
var selected = (ListBoxItem)MyList.SelectedItem;
string value = selected == null ? "No selection" : selected.Content.ToString();
MessageBox.Show(value);
}

33. ComboBox
<Window x:Class="ComboBoxDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ComboBox Demo"
Height="110"
Width="200">
<StackPanel>
<ComboBox Name="ProcessorBox">
<ComboBoxItem>Intel</ComboBoxItem>
<ComboBoxItem>AMD</ComboBoxItem>
<ComboBoxItem>Other</ComboBoxItem>
</ComboBox>
<ComboBox Name="RamBox">
<ComboBoxItem>16GB</ComboBoxItem>
<ComboBoxItem>32GB</ComboBoxItem>
<ComboBoxItem>64GB</ComboBoxItem>
</ComboBox>
<Button Height="25">OK</Button>
</StackPanel>
</Window>
private void Button_Click(object sender, RoutedEventArgs e)
{
var processorItem = (ComboBoxItem)ProcessorBox.SelectedItem;
var ramItem = (ComboBoxItem)RamBox.SelectedItem;
var processor = processorItem == null ? "No processor" : processorItem.Content;
var ram = ramItem == null ? "No RAM" : ramItem.Content;
MessageBox.Show(string.Format("{0} {1}", processor, ram));
}

34. RadioButton Groups
• To group a set of RadioButton controls, you set the GroupName property to
a string value. All of the radio buttons with the same group name are linked but
are not connected to controls in other groups.
<RadioButton Grid.Row="0" GroupName="Handed">Left Handed</RadioButton>
<RadioButton Grid.Row="1" GroupName="Handed" IsChecked="True">Right Handed</RadioButton>
<RadioButton Grid.Row="2" GroupName="Speed" IsChecked="True">Fast Double-Click</RadioButton>
<RadioButton Grid.Row="3" GroupName="Speed">Slow Double-Click</RadioButton>

35. CheckBox
<Window x:Class="CheckBoxDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="CheckBox Demo"
Height="100"
Width="300">
<StackPanel>
<CheckBox Margin="5">Please send me emails about your products</CheckBox>
<CheckBox Margin="5">Please sell my details to third parties</CheckBox>
</StackPanel>
</Window>
private void CheckBox_Checked(object sender, RoutedEventArgs e)
{
((CheckBox)sender).Foreground = Brushes.Green;
}
private void CheckBox_Unchecked(object sender, RoutedEventArgs e)
{
((CheckBox)sender).Foreground = Brushes.Red;
}
private void CheckBox_Indeterminate(object sender, RoutedEventArgs e)
{
((CheckBox)sender).Foreground = Brushes.Black;
}

36. GroupBox
<Window x:Class="GroupBoxDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GroupBox Demo"
Width="250"
Height="180">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<GroupBox Header="Mouse Handedness">
<StackPanel>
<RadioButton Content="Left-Handed" Margin="5"/>
<RadioButton Content="Right-Handed" Margin="5" IsChecked="True"/>
</StackPanel>
</GroupBox>
<GroupBox Grid.Row="1" Header="Double Click Speed">
<Slider Margin="5" />
</GroupBox>
</Grid>
</Window>

37. Menu
<Window x:Class="MenuItemDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Not Notepad"
Height="250"
Width="350">
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="File">
<MenuItem Header="New"/>
<MenuItem Header="Open..."/>
<MenuItem Header="Save"/>
<MenuItem Header="Save As"/>
<Separator />
<MenuItem Header="Page Setup..."/>
<MenuItem Header="Print..."/>
<Separator />
<MenuItem Header="Exit"/>
</MenuItem>
….

38. TabControl
<TabItem Header="Employee">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Margin="5">First Name</Label>
<TextBox Grid.Column="1" Margin="5"/>
<Label Grid.Row="1" Margin="5">Last Name</Label>
<TextBox Grid.Row="1" Grid.Column="1" Margin="5"/>
</Grid>
</TabItem>
<TabItem Header="Salary">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Margin="5">Schedule</Label>
<ComboBox Grid.Column="1" Margin="5">
<ComboBox.Items>
<ComboBoxItem>Annually</ComboBoxItem>
<ComboBoxItem>Monthly</ComboBoxItem>
</ComboBox.Items>
</ComboBox>
<Label Grid.Row="1" Margin="5">Amount</Label>
<TextBox Grid.Row="1" Grid.Column="1" Margin="5"/>
</Grid>
</TabItem>

39. ToolBar
<Window x:Class="ToolBarDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ToolBar Demo"
Height="200"
Width="450">
<DockPanel Background="Gray">
<ToolBar DockPanel.Dock="Top" Height="28">
<Button><Image Source="/Icons/New.png"/></Button>
<Button><Image Source="/Icons/Open.png"/></Button>
<Button><Image Source="/Icons/Save.png"/></Button>
<Button><Image Source="/Icons/Print.png"/></Button>
<Button><Image Source="/Icons/Email.png"/></Button>
<Button><Image Source="/Icons/Cut.png"/></Button>
<Button><Image Source="/Icons/Copy.png"/></Button>
<Button><Image Source="/Icons/Paste.png"/></Button>
<ToggleButton Width="20" FontWeight="Bold">B</ToggleButton>
<ToggleButton Width="20" FontStyle="Italic">I</ToggleButton>
<Button><Image Source="/Icons/Left.png"/></Button>
<Button><Image Source="/Icons/Centre.png"/></Button>
<Button><Image Source="/Icons/Right.png"/></Button>
<Button><Image Source="/Icons/FullScreen.png"/></Button>
<Button><Image Source="/Icons/Help.png"/></Button>
</ToolBar>
<TextBox TextWrapping="Wrap"/>
</DockPanel>
</Window>|

40. ScrollViewer
<ScrollViewer>
<Grid Margin="3,3,10,3">
<Grid.RowDefinitions>
...
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
...
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Margin="3"
VerticalAlignment="Center">Home:</Label>
<TextBox Grid.Row="0" Grid.Column="1" Margin="3"
Height="Auto" VerticalAlignment="Center"></TextBox>
<Button Grid.Row="0" Grid.Column="2" Margin="3" Padding="2">
Browse</Button>
...
</Grid>
</ScrollViewer>

41. Expander

42. StatusBar
<Window x:Class="StatusBarDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="StatusBar Demo"
Width="250"
Height="200">
<DockPanel>
<StatusBar DockPanel.Dock="Bottom">
Loading...
</StatusBar>
<Label>StatusBar Example</Label>
</DockPanel>
</Window>
<StatusBar DockPanel.Dock="Bottom">
<TextBlock>Loading...</TextBlock>
<ProgressBar Width="100" Height="15" Value="67" />
</StatusBar>

43. Popup
<Window x:Class="PopupDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ToolTip Demo"
Height="200"
Width="250">
<Grid Margin="10">
<Button Width="100" Height="25" Click="Show_Click">Show Popup</Button>
<Popup Name="MyPopup" Placement="Mouse">
<StackPanel Background="PaleGreen">
<Label HorizontalAlignment="Center">Click to hide</Label>
<Button Click="Hide_Click" Margin="10">Hide</Button>
</StackPanel>
</Popup>
</Grid>
</Window>
private void Show_Click(object sender, RoutedEventArgs e)
{
MyPopup.IsOpen = true;
}
private void Hide_Click(object sender, RoutedEventArgs e)
{
MyPopup.IsOpen = false;
}

44. ProgressBar
< Button Width="25" Height="25">-</ Button >
< Button Width="25" Height="25" Grid.Column="1">+</ Button >
<Button Width="25" Height="25" Grid.Column="2">?</Button>
<ProgressBar Name="Progress"
Grid.Row="1"
Grid.ColumnSpan="3"
Height="25"/>
<Label Name="ProgressText"
Content="0"
HorizontalAlignment="Center"
Grid.Row="1"
Grid.Column="1"/>
private void Decrement_Click(object sender, RoutedEventArgs e)
{
if (Progress.Value > 0)
{
Progress.Value--;
}
SetProgressText();
}
private void Increment_Click(object sender, RoutedEventArgs e)
{
if (Progress.Value < 100)
{
Progress.Value++;
}
SetProgressText();
}
private void SetProgressText()
{
ProgressText.Content = Progress.Value;
}

45. Tooltip

46. Spell Checking!

47. Other Controls
• ToolBarTray
• Slider
• DatePicker
• Annotations

48. Dialogs

49. SaveFileDialog
private void SaveButton_Click(object sender, EventArgs e)
{
using (SaveFileDialog sfd = new SaveFileDialog())
{
if (sfd.ShowDialog() == DialogResult.OK)
{
SaveFile(sfd);
}
}
}
private void SaveFile(SaveFileDialog sfd)
{
string path = sfd.FileName;
File.WriteAllText(path, TextInput.Text);
}

50. OpenFileDialog
private void OpenButton_Click(object sender, EventArgs e)
{
using (OpenFileDialog ofd = new OpenFileDialog())
{
if (ofd.ShowDialog() == DialogResult.OK)
{
ShowFileDetails(ofd);
}
}
}
private void ShowFileDetails(OpenFileDialog ofd)
{
FileList.Items.Clear();
FileList.Items.Add(ofd.FileName);
}
private void SaveButton_Click(object sender, EventArgs e)
{
using (SaveFileDialog sfd = new SaveFileDialog())
{
if (sfd.ShowDialog() == DialogResult.OK)
{
SaveFile(sfd);
}
}
}
private void SaveFile(SaveFileDialog sfd)
{
string path = sfd.FileName;
File.WriteAllText(path, TextInput.Text);
}
SaveFileDialog OpenFileDialog

51. Media

52. Media

53. Media

54. Media

55. Resources

56. Resources
• Reusable!

57. GPU-Accelerated Custom Effects
for WPF

58. GPU-Accelerated Custom Effects for WPF
Motion
Blur

59. GPU-Accelerated Custom Effects for WPF

60. Using Custom Effect

61. Styles

62. Styles

63. Styles

64. WPF Control Templates, Heaven!

65. Control Templates

66. Control Templates

67. Data Template

68. Data Template
• Without a Data Template

69. Data Template
• Resources

70. Data Template

71. Data Template

72. Yet, More to come!
Animation

73. http://www.mohammadshaker.com
mohammadshakergtr@gmail.com
https://twitter.com/ZGTRShaker @ZGTRShaker
https://de.linkedin.com/pub/mohammad-shaker/30/122/128/
http://www.slideshare.net/ZGTRZGTR
https://www.goodreads.com/user/show/11193121-mohammad-shaker
https://plus.google.com/u/0/+MohammadShaker/
https://www.youtube.com/channel/UCvJUfadMoEaZNWdagdMyCRA
http://mohammadshakergtr.wordpress.com/