UWP Development, Developing SimplePrismBlank App

Universal Windows Platform (UWP) development provides a way to create applications that can run on various Windows 10 devices. UWP is a powerful tool for developers that can provide rich and interactive user experiences. In this article, we will introduce how to create a simple UWP application using the Prism framework.

1. Introduction to UWP and Prism Framework

UWP is an app development platform designed for Microsoft’s Windows 10 operating system. UWP applications can run on PCs, tablets, Xbox, and other Windows 10 devices. This allows developers to deliver apps to users across a wide range of devices.

Prism is a popular MVVM (Model-View-ViewModel) framework that supports UWP application development. Using Prism improves code reusability, testability, and maintainability. Prism offers many features such as modularity, dependency injection, event-based communication, and the MVVM pattern.

2. Setting Up the Development Environment

To develop UWP applications and Prism, several tools and libraries are needed:

• Visual Studio 2019 or 2022
• Windows 10 SDK
• Prism library

After installing Visual Studio and selecting the required components, create a new UWP project.

3. Creating the SimplePrismBlank App

Now let’s create a simple Prism Blank UWP app. Follow the steps below.

3.1 Creating a New UWP Project

In Visual Studio, select “File” -> “New” -> “Project”. Choose “Blank App (Universal Windows)” and set the project name to “SimplePrismBlank”.

3.2 Installing Prism NuGet Packages

Right-click the project in Solution Explorer and select “Manage NuGet Packages”. Type “Prism” in the search box to find and install the Prism library. Make sure to include the Prism.Core and Prism.Uwp packages during installation.

3.3 Modifying the App.xaml.cs File

Next, modify the App.xaml.cs file to initialize Prism. Add the code below.

using Prism;
using Prism.Ioc;

namespace SimplePrismBlank
{
    sealed partial class App : Application
    {
        public App()
        {
            this.InitializeComponent();
            this.Suspending += OnSuspending;
        }

        protected override void OnLaunched(LaunchActivatedEventArgs e)
        {
            Frame rootFrame = Window.Current.Content as Frame;

            if (rootFrame == null)
            {
                rootFrame = new Frame();
                Window.Current.Content = rootFrame;
            }

            if (rootFrame.Content == null)
            {
                var prismApp = new PrismApplication();
                prismApp.RegisterTypes((container) =>
                {
                    // Add mapping of pages and view models here
                    container.RegisterType();
                });
                prismApp.OnInitialized();
            }

            Window.Current.Activate();
        }

        private void OnSuspending(object sender, SuspendingEventArgs e)
        {
            var deferral = e.SuspendingOperation.GetDeferral();
            // TODO: Save all state here
            deferral.Complete();
        }
    }
}

3.4 Creating MainPage and ViewModel

Next, create the MainPage.xaml file and build the user interface. The MainPage.xaml file should look like this:

<Page
    x:Class="SimplePrismBlank.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SimplePrismBlank.Views"
    xmlns:vm="using:SimplePrismBlank.ViewModels"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="{Binding Greeting}" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Button Content="Click me!" Command="{Binding GreetCommand}" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,50"/>
    </Grid>
</Page>

Then create the ViewModel. Create a MainPageViewModel.cs file and add the code below:

using Prism.Commands;
using Prism.Mvvm;

namespace SimplePrismBlank.ViewModels
{
    public class MainPageViewModel : BindableBase
    {
        private string _greeting;
        public string Greeting
        {
            get { return _greeting; }
            set { SetProperty(ref _greeting, value); }
        }

        public DelegateCommand GreetCommand { get; private set; }

        public MainPageViewModel()
        {
            Greeting = "Hello, UWP with Prism!";
            GreetCommand = new DelegateCommand(OnGreet);
        }

        private void OnGreet()
        {
            Greeting = "You clicked the button!";
        }
    }
}

4. Running the App

After writing all the above code, build and run the solution. When the app runs, you can click the button, and you will see the message change upon clicking it.

4.1 Enhancing the User Interface

You can now further enhance the user interface. You can add styles and controls in the XAML code to create a more attractive UI. For example, you can change colors or add animation effects when the button is pressed.

5. Conclusion

We explored how to develop UWP apps and utilize the Prism framework. Through this tutorial, we created a simple UWP application and applied the MVVM pattern to improve code reusability and maintainability.

As a next step, consider implementing more complex app functionalities or expanding features through database and API communication. Enjoy the experience of developing appealing and interactive applications for various Windows 10 devices using UWP and Prism!

6. Additional Resources

• Official UWP Documentation
• Official Prism Documentation
• Understanding the MVVM Pattern

If you have gained a basic knowledge of UWP development through this tutorial, take on more projects!