View
663
Download
6
Category
Tags:
Preview:
Citation preview
Mohammad Shakermohammadshaker.com
WPF Starter Course@ZGTRShaker
2011, 2012, 2013, 2014
WPF ShowcaseL01 – Layouts, Controls, Styles and Templates
WPF
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
WPF Overview
WPF Overview
WPF Overview
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"/>
<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
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>
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="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
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"
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;
}
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>
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.
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);
}
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));
}
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"
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;
}
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>
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>
….
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>
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>|
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>
Expander
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>
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;
}
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
Media
Media
Media
Media
Resources
Resources
• Reusable!
GPU-Accelerated Custom Effects for WPF
GPU-Accelerated Custom Effects for WPF
Motion Blur
GPU-Accelerated Custom Effects for WPF
Using Custom Effect
Styles
Styles
Styles
WPF Control Templates, Heaven!
Control Templates
Control Templates
Data Template
Data Template
• Without a Data Template
Data Template
• Resources
Data Template
Data Template
Yet, More to come!
Animation
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/
Recommended