XAML Extensible Application Markup Separate the renzo/cs585/WPF-XAML.pdf · XAML XAML, properties,

  • View

  • Download

Embed Size (px)

Text of XAML Extensible Application Markup Separate the renzo/cs585/WPF-XAML.pdf · XAML XAML, properties,

  • XAML XAML, properties, events 1

    XAML Extensible Application Markup

    Separate the graphical portion from the underlying code

    XAML documents define the panels, buttons, and controls that make up

    the windows in a WPF application

    XAML graphical design tools

    Expression Blend graphic designer (non-coder)

    Microsoft Visual Studio developer / designer

    WPF XAML all the XAML's subsets:

    XPS XAML electronic document formatting

    Silverlight cross-platform browser plug-in for rich web content:

    2D graphics, animation, audio and video.

    WF XAML Windows Workflow Foundation

    WPF source compiled BAML (binary application markup lang)

    embedded in DLL or EXE assembly (tokenized for size)

  • XAML Namespaces XAML, properties, events 2

    The XAML parser also needs to know the .NET namespace where this

    class is located.

    Standard Microsoft namespaces

    core WPF


    XAML utilities


    Other system / API namespaces



    // AssemblyName does not have ".dll" extension


    Code behind class for event handlers // application class x:Class="attractor.MainWindow"

    Application specific namespaces (xmls:local=...),

    Types defined in project's additional classes


  • XAML, properties, events 3

    // MainWindow.xaml file

  • Partial classes, InitializeComponent() XAML, properties, events 4

    C# Partial class allows XAML (design) and Class (code) to be separate

    sources compiled into a single class.

    // MainWindow.xaml.cs file

    namespace attactor {

    public partial class MainWindow : Window {

    public MainWindow() {

    InitializeComponent(); // must be first line





    Build/compile sequence

    MainWindow.xaml clr (common language runtime) type that is

    merged with MainWindow.xaml.cs (code behind).

    InitializeComponent() is generated by compiler.

    InitializeComponent() extracts BAML from assembly for user interface.

  • Names XAML, properties, events 5

    In XAML an element has "attributes" these are type converted to

    properties in the code-behind by the XAML parser.

    Naming elements in XAML allows code to get/set properties of element.

    // MainWindow.xaml file


    Button named "runBtn" has attribute IsEnabled initially false.

    In code the corresponding property could be set true....

    runBtn.IsEnabled = true;


  • Complex properties XAML, properties, events 6

    Some properties are full-fledged objects with their own set of properties.

    e.g., Background property has Brush properties.

    XAML has a property-element syntax for complex properties nested


  • XAML Markup extensions XAML, properties, events 7

    Consider setting a property value to an object that already exists.

    Or setting a property value dynamically by binding it to a property in

    another control.

    Markup extensions use "{"..."}" syntax

    Refer to a Static property in another class

    Code equivalent

    cmdAnswer.Foreground = SystemColors.ActiveCaptionBrush;


  • Attached properties XAML, properties, events 8

    Attached properties may apply to several controls but are defined in a

    different class.

    Attached properties have a two-part name in this form:


    Defining type is Grid and Property name is Row




    This code implies that the row number is stored in the Grid object.

    However, the row number is actually stored in the object that it applies

    toin this case, the TextBox or Button objects.

    Attached properties are an all-purpose extensibility system.

    By defining the Row property as an attached property, its usable with

    another control.


  • event handler XAML, properties, events 9

    Button named "runBtn" has event handler "runClicked" that responds to a

    Click mouse event w/in the button.

    The code behind for runClicked is in the *.xaml.cs file.

    private void runClicked(object sender, RoutedEventArgs e){

    // cast the sender object as a Button, or a

    // FrameworkElement, to set properties.

    Button srcButton = sender as Button; // or e.Source

    ... // code for runBtn's behavior here


    Object the source of the event

    RoutedEventArgs args describing the event

    Handled Present state of routed event as it travels the route.

    OriginalSource Gets the original reporting source before

    adjustments by a parent class.

    RoutedEvent RoutedEvent type for this RoutedEventArgs

    Source object that raised the event.


  • Routed events XAML, properties, events 10

    WPF routed events can tunnel down or bubble up the element tree and

    be processed by event handlers along the way.

    Usually attach an event handler by adding an event attribute to your

    XAML markup (or property to the class, with Designer).

    Connect an event with code img.MouseUp += new MouseButtonEventHandler(img_MouseUp);

    Naming convention is ElementName_EventName or a meaningful alias

    for ElementName.


    Only code can detach an event handler

    img.MouseUp -= img_MouseUp;


  • Event routing XAML, properties, events 11

    3 Routed events:

    Direct events originate in one element and dont pass to any other.

    MouseEnter fires when Mouse moves over element

    Bubbling events travel up the containment hierarchy

    MouseDown raised first by the element that is clicked.

    Next, its raised by that elements parent, then by that elements

    parent, , to top of the element tree.

    Tunneling events travel down the containment hierarchy, can preview

    (and stop) event before it reaches the appropriate control.

    PreviewKeyDown can intercept a key press, first at the window level

    and then in increasingly more-specific containers

    until you reach the element that had focus when the key was pressed.

  • Tunneling & bubbling event paths XAML, properties, events 12

  • XAML bubbling event XAML, properties, events 13

  • Code bubbling event XAML, properties, events 14

    The SomethingClicked() method examines the properties of the

    RoutedEventArgs object and adds a message to the list box:

    protected int eventCounter = 0;

    private void SomethingClicked(object sender,

    RoutedEventArgs e)



    string message = "#" +

    eventCounter.ToString() + ":\r\n" +

    " Sender: " + sender.ToString() + "\r\n" +

    " Original Source: " + e.OriginalSource + "\r\n" +

    " is Handled: " + e. Handled;


    RoutedEventArgs.Handled property to true to stop the event bubbling

    sequence the first time an event occurs.

  • example bubble up XAML, properties, events 15

  • Attached event XAML, properties, events 16

    Consider a stack of buttons in a StackPanel and you want to handle all

    the button clicks in one event handler.

    One approach is to have the Click event of each button use the same

    event handler.

    The Click event is bubbling, handle all the events in the StackPanel; but

    StackPanel doesn't have a Click event!

    Use an attached event

    Command 1

    Command 2

    Command 3


  • Which button ? XAML, properties, events 17

    The Click event is defined in ButtonBase class and inherited by the

    Button class.

    Attach an event handler to ButtonBase.Click and that event handler can

    be used by any ButtonBase-derived control {Button, RadioButton, and


    To add the handler to the StackPanel, assume its name is buttonPanel.

    Can't use += operator technique, need to use UIElement.AddHandler()


    new RoutedEventHandler(DoSomething));

    How does DoSomething() know which button was Clicked?

    Look at the source (could also set a property tag in XAML)

    private void DoSomething(object sender, RoutedEventArgs e){

    if (e.Source == cmd1){ ... }

    else if (e.Source == cmd2){ ... }

    else if (e.Source == cmd3){ ... }


  • 5 WPF event categories XAML, properties, events 18

    Lifetime events: occur when the element is initialized, loaded, or


    Mouse events: are the result of mouse actions.

    Keyboard events: are the result of keyboard actions

    (such as key presses).

    Stylus events: These events are the result of using the pen-like stylus,

    which takes the place of a mouse on a Tablet PC.

    Multitouch events: These events result from touching down with one

    or more fingers on a multitouch screen; supported only in

    Windows 7 and Windows 8.

    Mouse, keyboard, stylus, and multitouch are known as input events.

  • Input Events XAML, properties, events 19


  • Keyboard input XAML, properties, events 20

    Name Routing Description