WPF L01-Layouts, Controls, Styles and Templates

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

WPF
Windows Presentation Foundation

WPF
Automata
Project,
withVB.NET

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

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

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>

UniformGrid
<Window x:Class="UniformGridDemo.MainWindow"
Title="UniformGrid Demo"
Height="200"
Width="250">
<UniformGrid>
<Button Content="Button 1"/>
</UniformGrid>
</Window>

WrapPanel
<Window x:Class="WrapPanelDemo.MainWindow"
Title="WrapPanel Demo"
Height="200"
Width="250">
<WrapPanel Margin="10" Background="Lavender">
<Button Content="Button 1" Width="100" Height="25" Margin="3"/>
</WrapPanel>
</Window>
Resized
Original Size

StackPanel
<Window x:Class="StackPanelDemo.MainWindow"
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>

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="03" Margin="1 1 10 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

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>

TextBox and Label
<Window x:Class="TextBoxDemo.MainWindow"
Title="TextBox Demo"
Height="200"
Width="250">
<Grid>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<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;
}

TextBox and Label
<Window x:Class="LabelDemo.MainWindow"
Title="Label Demo"
Width="250"
Height="150">
<Grid>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<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>

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.

ListBox
<Window x:Class="ListBoxDemo.MainWindow"
Title="ListBox Demo"
Height="200"
Width="200">
<Grid>
<RowDefinition />
<RowDefinition Height="25"/>
<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>
{
var selected = (ListBoxItem)MyList.SelectedItem;
string value = selected == null ? "No selection" : selected.Content.ToString();
MessageBox.Show(value);
}

ComboBox
<Window x:Class="ComboBoxDemo.MainWindow"
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>
</ComboBox>
<Button Height="25">OK</Button>
</StackPanel>
</Window>
{
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));
}

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>

CheckBox
<Window x:Class="CheckBoxDemo.MainWindow"
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;
}

GroupBox
<Window x:Class="GroupBoxDemo.MainWindow"
Title="GroupBox Demo"
Width="250"
Height="180">
<Grid>
<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>

Menu
<Window x:Class="MenuItemDemo.MainWindow"
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>
….

TabControl
<TabItem Header="Employee">
<Grid>
<ColumnDefinition/>
<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>
<ColumnDefinition/>
<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>

ToolBar
<Window x:Class="ToolBarDemo.MainWindow"
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>|

ScrollViewer
<ScrollViewer>
<Grid Margin="3,3,10,3">
...
...
<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>

StatusBar
<Window x:Class="StatusBarDemo.MainWindow"
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>

Popup
<Window x:Class="PopupDemo.MainWindow"
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;
}

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;
}

Other Controls
• ToolBarTray
• Slider
• DatePicker
• Annotations

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);
}

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

GPU-Accelerated Custom Effects
for WPF

GPU-Accelerated Custom Effects for WPF
Motion
Blur

GPU-Accelerated Custom Effects for WPF

WPF Control Templates, Heaven!

Data Template
• Without a Data Template

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/

WPF L01-Layouts, Controls, Styles and Templates

More Related Content

Viewers also liked (20)

Similar to WPF L01-Layouts, Controls, Styles and Templates (20)

More from Mohammad Shaker (20)

Recently uploaded (20)

WPF L01-Layouts, Controls, Styles and Templates