XAML Basics




Content "filtered", Please subscribe for FULL access.


Chapter 5 : XAML Basics



What is XAML? arrow_upward


  • XAML is a declarative XML based language created by Microsoft.
  • It is used for initializing structured values and objects.
  • XAML is a declarative markup language.
  • Declarative programming is a programming paradigm that expresses the logic of a computation without describing its flow control.
  • Declarative program simply refers to a program that describes what computation should be performed and not how to compute it.
  • Declarative programming describes what the program should accomplish, rather than describing how to accomplish it.
  • XAML simplifies creating a user interface (UI) for a .NET Framework application.
  • We can create visible UI elements in the declarative XAML markup.
  • For a good application its User Interface (UI) should be well designed.

  • Uses of XAML arrow_upward


  • XAML is used extensively in .NET Framework 3.0 & .NET Framework 4.0 technologies, particularly for
    • Windows Presentation Foundation (WPF)
    • Silverlight
    • Windows Workflow Foundation (WF)
  • XAML is the language used by Silverlight to describe what the UI should look like.
  • XAML provides a well-defined interface between the look of an application and its behavior.
  • It separates application behavior with its graphic design.
    • There is no need for the programmer to give the designer their code files since they are separate from the design.
  • XAML is described as a declarative language.
    • It is designed to be understood by humans.
  • When an application is built the XAML file is converted into a file containing low level instructions.
    • That creates the actual display components when the program runs.
  • XML based languages are extensible in that we can invent new words and phrases that fit within the rules of the language.
  • In WPF, XAML forms a user interface markup language to define UI elements, data binding, event handling, and other features.
  • XAML files can be created and edited with visual design tools like,
    • Microsoft Expression Blend
    • Microsoft Visual Studio
    • Host-able Windows Workflow Foundation visual designer
  • They can also be created and edited with a standard text editor, a code editor like XAML-Pad, or a graphical editor like Vector Architect.
  • A key aspect of the technology is the reduced complexity needed for tools to process XAML, because it is based on XML.
  • As XAML is simply based on XML, developers and designers are able to share and edit content freely.
  • The .NET framework provides a way by which a program can save an object as a formatted XML document.
  • The Visual Studio solution file is also stored as an XML document.

  • Page Design and XAML arrow_upward


  • A file of XAML can describe a complete page of the Windows Phone display.
  • When we create a brand new Windows Phone project we get a page that just contains a few elements.
  • As you put more onto the page the file grows as each description is added.
  • The XAML code can also contain the descriptions of animations and transitions.
  • XAML has no concept of hierarchy.
  • It is not possible to create a XAML element which is derived from another.
  • XAML elements are independent. Some elements work as containers which mean that they can hold other components.

  • Example of XAML arrow_upward


  • We can create visible UI elements in the declarative XAML markup.
    • Then separate the UI definition from the run-time logic by using code-behind files, joined to the markup through partial class definitions.
  • The below example shows how we can create vertically arranged rectangles as part of a UI
  • <Grid x:Name="ContentPanel"  Margin="12,0,12,10" Grid.Row="1" >
                      <StackPanel x:Name="ColorStackPanel" Orientation="Vertical"  >
                        <Rectangle  Fill="red" Width="450" Height="80" Margin="20,20,20,10" />
                        <Rectangle Fill="Blue" Width="450" Height="80" Margin="20,10,20,10"  />
                        <Rectangle Fill="Yellow" Width="450" Height="80" Margin="20,10,20,10" />
                        <Rectangle Fill="Green"  Width="450" Height="80" Margin="20,10,20,10" />
                        <Rectangle x:Name="Black" Fill="Pink"  Width="450" Height="80" Margin="20,10,20,10" />
                    </StackPanel>
                      </Grid>
    
    Output:


    XAML Object Elements arrow_upward


  • An object element typically declares an instance of a type.
  • That type is defined in the assemblies that provide the backing types for a technology that uses XAML as a language.
  • Object element syntax always starts with an opening angle bracket (<).
  • This is followed by the name of the type where we want to create an instance.
  • We can optionally declare attributes on the object element.
  • To complete the object element tag, end with a closing angle bracket (>).

  • XAML Templates arrow_upward


  • XAML uses a specific way to define the look and feel called templates, differing from cascading style sheet syntax.
  • Example:
  • This Windows Presentation Foundation example shows the text "Hello World!" in the top-level XAML container called Canvas.
  •   <Canvas xmlns:x = http://schemas.microsoft.com
    /winfx/2006/xaml">
             <TextBlock> Hello World!</TextBlock>
             </Canvas>
    
  • The schema (the xmlns="http://schemas.microsoft.com ..." part) may have to be changed to work on our computer.
  • Using the above schema that Microsoft recommends, looks like as shown below:
  • Example:
     <Canvas xmlns = "http://schemas.microsoft.com
    /winfx/2006/xaml/presentation">
                    <TextBlock> Hello World!
                    </TextBlock>
                </Canvas>
    


    Thank You from Kimavi arrow_upward


  • Please email us at Admin@Kimavi.com and help us improve this tutorial.


  • Mark as Complete => Receive a Certificate in Windows-Phone-Programming

    Kimavi Logo

    Terms and conditions, privacy and cookie policy

    Kimavi @ YouTube | Email Admin @ Kimavi | Visit TheCodex.Me

    Beautiful Educational Videos for School, College, Languages & Encyclopedia


    Learn Python with 500,000 students


    Created with Love