Skip to content

Latest commit

 

History

History
171 lines (116 loc) · 6.56 KB

get-started-counter-xaml-mvux.md

File metadata and controls

171 lines (116 loc) · 6.56 KB
uid
Uno.Workshop.Counter.XAML.MVUX

Counter App using XAML and MVUX

Download the complete XAML + MVUX sample

[!INCLUDE Intro]

In this tutorial you will learn how to:

  • Create a new Project with Uno Platform using Visual Studio Template Wizard or the dotnet new command
  • Add elements to the XAML file to define the layout of the application
  • Add code to the C# file to implement the application logic using the Model-View-Update-eXtended (MVUX) pattern
  • Use data binding to connect the UI to the application logic

To complete this tutorial you don't need any prior knowledge of the Uno Platform, XAML, or C#.

[!INCLUDE VS]

Visual Studio

Note

If you don't have the Uno Platform Extension for Visual Studio installed, follow these instructions.

  • Launch Visual Studio and click on Create new project on the Start Window. Alternatively, if you're already in Visual Studio, click New, Project from the File menu.

  • Type Uno Platform in the search box

  • Click Uno Platform App, then Next

  • Name the project Counter and click Create

At this point you'll enter the Uno Platform Template Wizard, giving you options to customize the generated application. For this tutorial, we're only going to configure the markup language and the presentation framework.

  • Select Blank and click Customize

  • Select the Presentation tab and choose MVUX

  • Select the Markup tab and choose XAML

Before completing the wizard, take a look through each of the sections and see what other options are available. You can always come back and create a new project with different options later. For more information on all the template options, see Using the Uno Platform Template.

  • Click Create to complete the wizard

The template will create a new solution with a number of projects. The main project is a class library called Counter which contains the application code. The other projects are platform-specific heads that contain the platform-specific code required to run the application on each platform.

Command Line

Note

If you don't have the Uno Platform dotnet new templates installed, follow dotnet new templates for Uno Platform.

From the command line, run the following command:

dotnet new unoapp -preset blank -presentation mvux -markup xaml -o Counter

This will create a new folder called Counter containing the new application.

If you want to discover all the options available in the unoapp template, run the following command:

dotnet new unoapp -h

Also, for more information on all the template options, see Using the Uno Platform Template.

[!INCLUDE Counter Solution]

Counter Solution

[!INCLUDE Main Window]

[!INCLUDE Main Page - XAML]

[!INCLUDE Main Page - Layout]

[!INCLUDE Main Page - Image]

[!INCLUDE Main Page - Change Layout]

[!INCLUDE Main Page - Other Elements]

[!INCLUDE View Model]

Data Binding

Now that we have the BindableMainModel class, we can update the MainPage to use data binding to connect the UI to the application logic.

  • Add a DataContext element to the Page element in the MainPage.xaml file.

    <Page.DataContext>
    <local:BindableMainModel />
</Page.DataContext>

  • Update the TextBlock by removing the Text attribute, replacing it with two Run elements, and binding the Text property of the second Run element to the Count property of the BindableMainModel.

    <TextBlock Margin="12"
           HorizontalAlignment="Center"
           TextAlignment="Center">
    <Run Text="Counter: " /><Run Text="{Binding Count}" />
</TextBlock>

  • Update the TextBox by binding the Text property to the Step property of the BindableMainModel. The Mode of the binding is set to TwoWay so that the Step property is updated when the user changes the value in the TextBox.

    <TextBox Margin="12"
         HorizontalAlignment="Center"
         PlaceholderText="Step Size"
         Text="{Binding Step, Mode=TwoWay}"
         TextAlignment="Center" />

  • Update the Button to add a Command attribute that is bound to the IncrementCommand property of the BindableMainModel.

    <Button Margin="12"
        HorizontalAlignment="Center"
        Command="{Binding IncrementCommand}"
        Content="Increment Counter by Step Size" />

The final code for MainPage.xaml should look like this:

<Page x:Class="Counter.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:Counter"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Page.DataContext>
    <local:BindableMainModel />
  </Page.DataContext>
  <StackPanel VerticalAlignment="Center">
    <Image Width="150"
           Height="150"
           Margin="12"
           HorizontalAlignment="Center"
           Source="Assets/logo.png" />

    <TextBox Margin="12"
             HorizontalAlignment="Center"
             PlaceholderText="Step Size"
             Text="{Binding Step, Mode=TwoWay}"
             TextAlignment="Center" />

    <TextBlock Margin="12"
               HorizontalAlignment="Center"
               TextAlignment="Center">
        <Run Text="Counter: " /><Run Text="{Binding Count}" />
    </TextBlock>

    <Button Margin="12"
            HorizontalAlignment="Center"
            Command="{Binding IncrementCommand}"
            Content="Increment Counter by Step Size" />
  </StackPanel>
</Page>

[!INCLUDE View Model]

If you want to see the completed application, you can download the source code from GitHub.