WPF L01-Layouts, Controls, Styles and Templates

1,839 views
1,529 views

Published on

Published in: Software, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,839
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
143
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

WPF L01-Layouts, Controls, Styles and Templates

  1. 1. Mohammad Shaker mohammadshaker.com WPF Starter Course @ZGTRShaker 2011, 2012, 2013, 2014 WPF Showcase L01 – Layouts, Controls, Styles and Templates
  2. 2. WPF
  3. 3. WPF Windows Presentation Foundation
  4. 4. WPF with Expression Blend
  5. 5. WPF References
  6. 6. WPF Automata Project, withVB.NET
  7. 7. My 3rd Year Projects with.NET! WPF RFIDSystem withC#
  8. 8. Rich Content
  9. 9. Stand Alone Apps
  10. 10. Browser-Hosted Apps
  11. 11. WPF Overview
  12. 12. A lot of these WPF slides are ported from http://www.blackwasp.co.uk/
  13. 13. WPF Overview
  14. 14. WPF Overview
  15. 15. WPF Overview
  16. 16. WPF Overview
  17. 17. WPF Overview
  18. 18. Layouts
  19. 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. 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. 21. DockPanel
  22. 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. 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. 24. StackPanel
  25. 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. 26. Border
  27. 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. 28. Controls
  29. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 41. Expander
  42. 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. 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. 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. 45. Tooltip
  46. 46. Spell Checking!
  47. 47. Other Controls • ToolBarTray • Slider • DatePicker • Annotations
  48. 48. Dialogs
  49. 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. 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. 51. Media
  52. 52. Media
  53. 53. Media
  54. 54. Media
  55. 55. Resources
  56. 56. Resources • Reusable!
  57. 57. GPU-Accelerated Custom Effects for WPF
  58. 58. GPU-Accelerated Custom Effects for WPF Motion Blur
  59. 59. GPU-Accelerated Custom Effects for WPF
  60. 60. Using Custom Effect
  61. 61. Styles
  62. 62. Styles
  63. 63. Styles
  64. 64. WPF Control Templates, Heaven!
  65. 65. Control Templates
  66. 66. Control Templates
  67. 67. Data Template
  68. 68. Data Template • Without a Data Template
  69. 69. Data Template • Resources
  70. 70. Data Template
  71. 71. Data Template
  72. 72. Yet, More to come! Animation
  73. 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/

×