wpf l01-layouts, controls, styles and templates

Mohammad Shakermohammadshaker.com

WPF Starter Course@ZGTRShaker

2011, 2012, 2013, 2014

WPF ShowcaseL01 – Layouts, Controls, Styles and Templates

WPFWindows Presentation Foundation

WPF with Expression Blend

WPF References

WPFAutomataProject,with VB.NET

My 3rd Year Projects with.NET!

WPFRFID Systemwith C#

Rich Content

Stand Alone Apps

Browser-Hosted Apps

WPF Overview

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

WPF Overview

Layouts

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"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>

DockPanel

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"/>




</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>

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

• <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>

Controls

TextBox and Label<Window x:Class="TextBoxDemo.MainWindow"



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;

}

TextBox and Label<Window x:Class="LabelDemo.MainWindow"



Title="Label Demo"

Width="250"

Height="150">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition/>

</Grid.ColumnDefinitions>


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

RichTextBoxcontrol 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.

http://www.blackwasp.co.uk/WPFTextBox.aspx

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>

Expander

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;

}

Tooltip

Spell Checking!

Other Controls

• ToolBarTray

• Slider

• DatePicker

• Annotations

Dialogs

SaveFileDialogprivate 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

Resources

Resources

• Reusable!

GPU-Accelerated Custom Effects for WPF


Motion Blur

Using Custom Effect

Styles

WPF Control Templates, Heaven!

Control Templates

Data Template

Data Template

• Without a Data Template

Data Template

• Resources

Data Template

Yet, More to come!

Animation

http://www.mohammadshaker.com

[email protected]

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/

http://www.mohammadshaker.com/

https://twitter.com/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

Software

private void setprogresstext

wpf overview

private void hide

private void increment

hidehide private void

private void decrement

clickobject sender

routedeventargs e