Windows Presentation Foundation

1. Windows Presentation Foundation (WPF)

2. Introduction • Separates appearance of user interface from behavior • Appearance usually specified by XAML • Behavior implemented in C# or VB • Known as "managed languages" • Linked by "data binding" & events • XML can be created with graphical tools • "Controls" can be combined ("composed") • Image & text in a button <Button> <StackPanel Orientation="Vertical"> <Image Source="speaker.png" Stretch="Uniform"/> <TextBlock Text="Play " /> </StackPanel> </Button>

3. XAML language • Includes language-level features to associate code files with markup files, from the markup file side. • Defines the language features • x:Class Directive • x:Subclass Directive • x:ClassModifier Directive. • Does NOT specify • how the code should be produced • how to integrate markup and code, • It is left up to frameworks such as WPF to determine how to integrate the code, how to use XAML in the application and programming models, and the build actions or other support that all this requires.

4. Intro - 2 • Controls are therefore customizable • Create "skins" for an interface using "styles" • Similar to CSS • "Code Behind" • the code that is joined with markup-defined objects, when a XAML page is markup-compiled • Avoid or limit the use of inline code (inside XAML) • Your event handlers in the Code Behind • must be instance methods • cannot be static methods • must be defined by the partial class within the CLR namespace identified by x:Class.

5. A button & its properties Button code added by VS

6. Adding an event handler 1. Click the "lightning" icon on the Properties tab, to get this list of handlers 2. Double-Click the gray square to get the code added

7. Code added for my form private void Button_Click(object sender, RoutedEventArgs e) { MessageBoxResult result = MessageBox.Show("button clicked"); Application.Current.Shutdown(); // terminates the program } private void CheckBox_Checked(object sender, RoutedEventArgs e) { // here you can add code to save the setting of the checkbox } • object sender– which control caused the interrupt • RoutedEventArgs e – what the control did • DialogResult result = Form1().ShowDialog(); is any content from the control

8. XAML & WPF • XAML element corresponds to a WPF class • Element's attributes have corresponding property/event in the class. • Example, <Button Background="Red"> No </Button> • Or use C#: Button btn = new Button(); btn.Background= Brushes.Red; btn.Content= "No";

9. WPF example – part 1 <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation " xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="SDKSample.MyWindow" Title="Window with Button" Width="250" Height="100"> <!-- Add button to window --> <Button Name="button1" Click="button_Click">Click Me! </Button> </Window> • The x:Class associates these 2 elements of the project: • XAML def'n of window (above) • code-behind class (MyWindow) on next slide • This example (parts 1 & 2) is from: http://msdn.microsoft.com/en-us/library/aa970268(v=vs.110).aspx Same as main window Same as namespace

10. WPF example –part 2 using System.Windows; // Window, RoutedEventArgs, MessageBox namespace SDKSample { public partial class MyWindow: Window { public MyWindow() { // InitializeComponent call is required to merge the UI  // that is defined in markup with this class, including   // setting properties and registering event handlers InitializeComponent(); } void button1_Click(object sender, RoutedEventArgs e) { // Show message box when button is clicked MessageBox.Show("Hello, from WPF app!"); } } }

11. Events • WPF events are "routed" • May traverse a hierarchy of handlers • May be handled by more than 1 handler • Last "desired" handler sets the "handled" property to "true" • Stops all further handling • "Source" property saves origin of event • 3 types: • Direct events – similar to Windows Forms events – no hierarchy traversal • Bubbling events – start at the Source and travel UP the hierarchy to the Window • Tunneling events - start at the Window and travel DOWN the hierarchy • Prefixed with "Preview" (e.g.; PreviewMouseLeftButton) • An event handler can handle events for > 1 control • To specify this: • Select the control • Use the Events tab in the Properties window • Reference: http://bit.ly/RoutedEvents

12. Commands • Provide alternate ways of creating events • Similar to MFC and Win32API • Menu bars provide "labels" for actions • Allows synch between command and program "state" • "copy" can only be done if something is "selected" • Invalid commands can be greyed-out • Many standard commands built-in • Copy, Cut, Paste • Open, Save, Close, New • ToggleBold, ToggleItalic, ToggleUnderline • Play, Stop, Rewind

13. Resources • Describe the objects your project uses • Provides means to "bind" resources to code • Two types of Resources • Static • Dynamic • Two types of Resource Files: • Linked • External files • .resx file includes only a relative path • Embedded • Inside the .resx file of the project

14. Adding Resources • Right-click the Properties node under the project in Solution Explorer • Click "Open" • Click Add Resource button • (top of the Resources page in Project Designer)

15. Sample text to Datagrid Data source is created using an ObservableCollection of a custom class in the window’s code-behind script This is not always the best approach to take – you will usually be using DataAdapters and DataTables to retrieve information from a database, or external files Setting the grid’s ItemSource property to inherit from the data context creates the binding between grid & data. After the collection is populated, set Grid.DataContext = collection_name;causes the user interface to update and display the grid content.

16. XAML & Code-behind <DataGrid Name="myGrid" CanUserResizeColumns="True" CanUserAddRows="False" CanUserSortColumns="True" IsReadOnly="True" ItemsSource="{Binding}"/> using System; using System.Collections.ObjectModel; using System.Windows; namespace Wpf_userlist { public class User //our observable collection class { private String _n; private int _n1; public String name // "name" will be bound to collection { get { return _n; } set { _n = value; } // value is set on next slide }   public int int1 // "int1" will be bound to collection { get { return _n1; } set { _n1 = value; } } }

17. Create Observable Collection public partial class MainWindow : Window { public ObservableCollectionUser= new ObservableCollection();   public MainWindow() { InitializeComponent(); // next 2 lines to be replaced by file reading data.Add(new User() {Name="Foreman", int1=1}); data.Add(new User() {Name ="Smith", int1=2}); myGrid.DataContext= User; } } // end of partial class MainWindow } // end of program

18. Read a file // Read a file and display it line by line. System.IO.StreamReadermyFile= new System.IO.StreamReader("c:\\test.txt"); while((line = file.ReadLine()) != null) { process_line(line); // move line into data array } OR string[] lines = System.IO.File.ReadAllLines(@"C:\Users\test.txt"); myFile.Close();

19. Using a datagrid • Here’s a really good tutorial on getting data into a datagrid. http://www.c-sharpcorner.com/uploadfile/mahesh/datagrid-in-wpf/ But it uses "predefined" data. You need a file-read. • Here’s a short example (lots of details omitted) from my own code: private void process_line(String x) { string thename; String[] ints; ints = x.Substring(position of 2ndquote+2).Split(','); csvlist.Add (new csvrow() { name = thename, int1 = ints[0], int2=ints[1] }); // MessageBox.Show("name="+ csvlist[0].name); } • csvlistis a List of type csvrow, where csvrowis a C# class that specifies the names of the columns of the datagrid. • Split is a member that separates-out the elements of a string • Process_lineis called after each whole line of input is obtained • Remember to instantiate everything: • csvlist = new List<csvrow>(); • datagrid Userdata_DG1 = new DataGrid();