XAML for WPF and rege/dnet_fs19/dnet2_3.pdf XAML for WPF and UWP Programming WPF/UWP application with

  • View
    2

  • Download
    0

Embed Size (px)

Text of XAML for WPF and rege/dnet_fs19/dnet2_3.pdf XAML for WPF and UWP Programming WPF/UWP application...

  • XAML for WPF and UWP

    ■ Programming WPF/UWP application with XAML and C#

    ■ The structure and purpose of XAML and C# code (behind)

    ■ Layouts and Styles in XAML

    ■ Data Binding and Events

    ■ MVVM and Commands

  • 2 von 171School of Engineering © K. Rege, ZHAW

    WPF Basics

  • 3 von 171School of Engineering © K. Rege, ZHAW

    Differences between Forms and WPF

    Difference of thinking and execution

    WinForms

    ■ The Forms and UI Objects are the

    application

    WPF/MVVM

    ■ The application data objects are in the

    center

    ■ The GUI is merely an access layer to these objects

    ■ Separation of Presentation and

    Logic/Date by design

    © Rachel Lim's Bloghttps://www.tutorialspoint.com/mvvm/mvvm_wpf_data_templates.htm

  • 4 von 171School of Engineering © K. Rege, ZHAW

    WPF – Features

    ■ XAML/WPF has a set of "nice" features

    https://www.tutorialspoint.com/wpf/wpf_quick_guide.htm

  • 5 von 171School of Engineering © K. Rege, ZHAW

    Hello XAML/WPF

  • 6 von 171School of Engineering © K. Rege, ZHAW

    Hello WPF

    ■ Project Setup with Visual Studio

    ■ Choose WPF App

  • 7 von 171School of Engineering © K. Rege, ZHAW

    … Hello WPF

  • 8 von 171School of Engineering © K. Rege, ZHAW

    … Hello WPF

    ■ Visual Studio generates a set of files App.xaml

    App.xaml.cs

    MainWindow.xaml

    MainWindow.xaml.cs

    ■ The two App.* files contain the code for

    the setup (resources) and start of the application

    ■ The two MainWindow.* files contain the

    code for the main window of the

    application

  • 9 von 171School of Engineering © K. Rege, ZHAW

    Involved Files in Overview and Context

    FirstWPF.exeFirstWPF.exe

    class Appclass App

    App.g.csApp.g.cs MainWindow. Baml

    MainWindow. Baml

    MainWindow. g.i.cs

    MainWindow. g.i.cs

    App.xamlApp.xaml App.xaml

    .cs

    App.xaml .cs

    MainWindow .xaml

    MainWindow .xaml

    MainWindow .xaml.cs

    MainWindow .xaml.cs

    class MainWindow

    class MainWindow

  • 10 von 171School of Engineering © K. Rege, ZHAW

    Content of the App.xaml.* Files

    ■ The two files App.xaml App.xaml.cs contain the intialization

    ■ Start-Window (MainWindow.xaml)

    © Dr. Beatrice Amrhein

    namespace WpfApp {

    public partial class App : Application {

    } }

  • 11 von 171School of Engineering © K. Rege, ZHAW

    Content of the generated App.xaml.cs File

    ■ The Main method is hidden in an also

    generated partial class App.xaml.cs

    ■ should not be modified

    class WpfApp : Application {

    public static void Main() {

    WpfApp.App app = new

    WpfApp.App();

    app.InitializeComponent();

    app.Run();

    }

    }

    ■ InitializesComponent() Initialize the content of the main window

    ■ Main() start the application

    © Dr. Beatrice Amrhein

  • 12 von 171School of Engineering © K. Rege, ZHAW

    Hello XAML

    ■ The two files MainWindow.xaml MainWindow.xaml.cd contain the main

    Window code: enter the Label Hello Word as shown below

    Hallo World

    public partial class MainWindow : Window { public MainWindow () {

    InitializeComponent(); }

    }

  • 13 von 171School of Engineering © K. Rege, ZHAW

    The Application Object

  • 14 von 171School of Engineering © K. Rege, ZHAW

    The Application Object

    ■ Every WPF application is represented by an instance of Windows.UI.Xaml.Application

    or Windows.Application

    ■ A singleton

    ■ The static property Application.Current returns that instance

    ■ The Visual Studio wizard creates a XAML file for the application

    ■ Useful for application level resources

    ■ Also can set the StartupUri property to indicate which window to show on

    startup

    © Pavel Yosifovich

  • 15 von 171School of Engineering © K. Rege, ZHAW

    … Application Events

    ■ Startup ■ Called after Application.Run is called before the main window is shown ■ Can access command line arguments through the StartupEventArgs.Args property ■ Can also be used to create a window explicitly (and calling Window.Show) without relying on the

    StartupUri property

    ■ Exit

    ■ Application is being shutdown (for whatever reason) ■ Can set the exit code that is returned to the OS ■ Cannot cancel the shutdown process

    © Pavel Yosifovich

  • 16 von 171School of Engineering © K. Rege, ZHAW

    … Application Events

    ■ SessionEnding

    ■ Windows session is ending (e.g. log off or shutdown)

    ■ Can cancel the shutdown by setting SessionEndingCancelEventArgs.Cancel to true (otherwise WPF calls Application.Shutdown)

    ■ Activated

    ■ Occurs when a top level window in the application is activated when the user switches from another application

    ■ Also occurs the first time a window is shown

    ■ Deactivated

    ■ Occurs when the user switches to another application

    © Pavel Yosifovich

  • 17 von 171School of Engineering © K. Rege, ZHAW

    … Application Events

    ■ DispatcherUnhandledException

    ■ Occurs when an unhandled exception is about to terminate the application ■ Only on the current (UI) thread

    ■ Can be used to log the error, show a nice dialog to the user, etc. ■ Can also “cancel” the exception and continue running by setting the property

    DispatcherUnhandledExceptionEventArgs.Handled to true

    ■ Must be careful – difficult to guarantee the application is in a valid state to continue

    © Pavel Yosifovich

  • 18 von 171School of Engineering © K. Rege, ZHAW

    Application Shutdown

    ■ Application shutdown is controlled by the ShutdownMode property ■ OnLastWindowClose (default) – application shuts down when the last top level window is closed

    ■ OnMainWindowClose – application shuts down when the main window closes

    ■ OnExplicitShutdown – the application does not shut down even if all windows are gone

    ■ Calling Application.Shutdown must be used

    ■ This call can be used regardless of the setting of the ShutdownMode property

    © Pavel Yosifovich

  • 19 von 171School of Engineering © K. Rege, ZHAW

    UI Designer and XAML Fundamentals

    © Alon Fliess

  • 20 von 171School of Engineering © K. Rege, ZHAW

    UI Designer and XAML Fundamentals

    ■ Visual Studio ■ UI Designer

    ■ Toolbox

    ■ Document Outline

    ■ Properties View

    ■ What is XAML?

    ■ Basic XAML

    ■ Type Converters

    ■ Markup Extensions

    ■ Naming Elements

    ■ XAML Rules

    ■ Summary

    © Alon Fliess

  • 21 von 171School of Engineering © K. Rege, ZHAW

    Visual Studio

    © Alon Fliess

  • 22 von 171School of Engineering © K. Rege, ZHAW

    UI Designer

    ■ Visual Studio UI Designer provides quick

    and easy way to produce rich UI

    interface

    ■ Drag and drop UI controls from the toolbox into the designer

    ■ The UI designer provides an easy way to

    select, resize, align, transform and more,

    using only the mouse

    ■ The UI designer generates XAML and automatically updated when XAML

    changes

    © Alon Fliess

  • 23 von 171School of Engineering © K. Rege, ZHAW

    Toolbox

    ■ The toolbox groups UI controls available

    at design time

    ■ 3rd party and custom controls are also

    available from the toolbox

    ■ Simple drag and drop a control from the toolbox to the designer canvas

    ■ Element from the toolbox can be also

    drag and drop directly into XAML

    ■ Controls can be searched within the

    search box and can be sorted

    ■ Additional groups can be created

    © Alon Fliess

  • 24 von 171School of Engineering © K. Rege, ZHAW

    Document Outline

    ■ The document outline view displays the logical tree of UI elements, each element name or type and an icon of the element’s type

    ■ Each element in the hierarchy can be design-time locked and hidden

    ■ The document outline is very useful to navigate between UI elements, especially in complex XAML files

    © Alon Fliess

    view other windows Document Outline

  • 25 von 171School of Engineering © K. Rege, ZHAW

    Properties View

    ■ The properties view provides an easy a rapid way to:

    ■ Search for an element’s property by its name ■ Set simple property value using plain text ■ Set complex property value using designers ■ Easily select color brushes, styles, font size,

    transformations