Skip to content

Commit d4426fa

Browse files
alvinashcraftalvinashcraft
committed
Freshen .NET MAUI windev topics
1 parent a79a6e6 commit d4426fa

File tree

2 files changed

+92
-90
lines changed

2 files changed

+92
-90
lines changed

‎hub/apps/windows-dotnet-maui/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ This [one-day live stream](https://www.youtube.com/playlist?list=PLdo4fOcmZ0oWeP
4949
### .NET MAUI blog posts
5050

5151
- [5 .NET MAUI Features for Building Great Desktop Apps](https://devblogs.microsoft.com/dotnet/5-dotnet-maui-desktop-features/)
52-
- [Build Your Own Podcast App with .NET 7, Blazor, and .NET MAUI](https://devblogs.microsoft.com/dotnet/build-your-own-podcast-app-with-dotnet-blazor-and-dotnet-maui/)
52+
- [Build Your Own Podcast App with .NET, Blazor, and .NET MAUI](https://devblogs.microsoft.com/dotnet/build-your-own-podcast-app-with-dotnet-blazor-and-dotnet-maui/)
5353

5454
### GitHub
5555

‎hub/apps/windows-dotnet-maui/walkthrough-first-app.md

Lines changed: 91 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
---
22
title: Build your first .NET MAUI app for Windows
33
description: Get hands-on with .NET MAUI by building your first cross-platform app on Windows.
4-
ms.topic: article
5-
ms.date: 08/15/2022
4+
ms.topic: how-to
5+
ms.date: 01/23/2025
66
keywords: windows win32, desktop development, Windows App SDK, .net maui
77
ms.localizationpriority: medium
8+
#Customer intent: As a Windows developer, I want to learn how to create and run my first .NET MAUI app for Windows in Visual Studio.
89
---
910

1011
# Build your first .NET MAUI app for Windows
@@ -23,29 +24,29 @@ If you haven't already set up your environment for .NET MAUI development, please
2324

2425
1. Launch Visual Studio, and in the start window click **Create a new project** to create a new project:
2526

26-
![Create a new project.](images/hello-maui-new-project.png)
27+
![Create a new project.](images/hello-maui-new-project.png)
2728

28-
2. In the **Create a new project** window, select **MAUI** in the All project types drop-down, select the **.NET MAUI App** template, and click the **Next** button:
29+
1. In the **Create a new project** window, select **MAUI** in the All project types drop-down, select the **.NET MAUI App** template, and click the **Next** button:
2930

30-
![.NET MAUI App template.](images/hello-maui-app-template.png)
31+
![.NET MAUI App template.](images/hello-maui-app-template.png)
3132

32-
3. In the **Configure your new project** window, give your project a name, choose a location for it, and click the **Next** button:
33+
1. In the **Configure your new project** window, give your project a name, choose a location for it, and click the **Next** button:
3334

34-
![Name the new project.](images/hello-maui-name-project.png)
35+
![Name the new project.](images/hello-maui-name-project.png)
3536

36-
4. In the **Additional information** window, click the **Create** button:
37+
1. In the **Additional information** window, click the **Create** button:
3738

38-
![Create new project.](images/hello-maui-addl-info-create.png)
39+
![Create new project.](images/hello-maui-addl-info-create.png)
3940

40-
5. Wait for the project to be created, and for its dependencies to be restored:
41+
1. Wait for the project to be created, and for its dependencies to be restored:
4142

42-
![Project is created.](images/hello-maui-project-created.png)
43+
![Project is created.](images/hello-maui-project-created.png)
4344

44-
6. In the Visual Studio toolbar, press the Windows Machine button to build and run the app.
45+
1. In the Visual Studio toolbar, press the Windows Machine button to build and run the app.
4546

46-
7. In the running app, press the **Click me** button several times and observe that the count of the number of button clicks is incremented:
47+
1. In the running app, press the **Click me** button several times and observe that the count of the number of button clicks is incremented:
4748

48-
![Run a MAUI app for the first time.](images/hello-maui-first-run-app.png)
49+
![Run a MAUI app for the first time.](images/hello-maui-first-run-app.png)
4950

5051
You just ran your first .NET MAUI app on Windows. In the next section, you'll learn how to add data binding and messaging features from the **MVVM Toolkit** to your app.
5152

@@ -59,116 +60,117 @@ Now that you have your first .NET MAUI app running on Windows, let's add some MV
5960

6061
1. Right-click the project in **Solution Explorer** and select **Manage NuGet Packages...** from the context menu.
6162

62-
2. In the **NuGet Package Manager** window, select the **Browse** tab and search for **CommunityToolkit.MVVM**:
63+
1. In the **NuGet Package Manager** window, select the **Browse** tab and search for **CommunityToolkit.MVVM**:
6364

64-
![CommunityToolkit.MVVM package.](images/hello-maui-mvvm-pkg.png)
65+
![CommunityToolkit.MVVM package.](images/hello-maui-mvvm-pkg.png)
6566

66-
3. Add the latest stable version of the **CommunityToolkit.MVVM** package (version 8.0.0 or later) to the project by clicking **Install**.
67+
1. Add the latest stable version of the **CommunityToolkit.MVVM** package (version 8.0.0 or later) to the project by clicking **Install**.
6768

68-
4. Close the **NuGet Package Manager** window after the new package has finished installing.
69+
1. Close the **NuGet Package Manager** window after the new package has finished installing.
6970

70-
5. Right-click the project again and select **Add | Class** from the context menu.
71+
1. Right-click the project again and select **Add | Class** from the context menu.
7172

72-
6. In the **Add New Item** window that appears, name the class `MainViewModel` and click **Add**:
73+
1. In the **Add New Item** window that appears, name the class `MainViewModel` and click **Add**:
7374

74-
![Add MainViewModel class.](images/hello-maui-add-vm.png)
75+
![Add MainViewModel class.](images/hello-maui-add-vm.png)
7576

76-
7. The `MainViewModel` class will be the data binding target for the `MainPage`. Update it to inherit from `ObservableObject` in the `CommunityToolkit.Mvvm.ComponentModel` namespace This will also require updating the class to be `public` and `partial`.
77+
1. The `MainViewModel` class will be the data binding target for the `MainPage`. Update it to inherit from `ObservableObject` in the `CommunityToolkit.Mvvm.ComponentModel` namespace This will also require updating the class to be `public` and `partial`.
7778

78-
8. The `MainViewModel` class will contain the following code. The `CountChangedMessage` record defines a message that is sent each time the Click me button is clicked, notifying the view of the change. The [ObservableProperty](/dotnet/communitytoolkit/mvvm/generators/observableproperty) and [RelayCommand](/dotnet/communitytoolkit/mvvm/generators/relaycommand) attributes added to the `message` and `IncrementCounter` members are source generators provided by the MVVM Toolkit to create the MVVM boilerplate code for `INotifyPropertyChanged` and `IRelayCommand` implementations. The `IncrementCounter` method's implementation contains the logic from `OnCounterClicked` in MainPage.xaml.cs, with a change to send a message with the new counter message. We will be removing that code-behind code later.
79+
1. The `MainViewModel` class will contain the following code. The `CountChangedMessage` record defines a message that is sent each time the Click me button is clicked, notifying the view of the change. The [ObservableProperty](/dotnet/communitytoolkit/mvvm/generators/observableproperty) and [RelayCommand](/dotnet/communitytoolkit/mvvm/generators/relaycommand) attributes added to the `message` and `IncrementCounter` members are source generators provided by the MVVM Toolkit to create the MVVM boilerplate code for `INotifyPropertyChanged` and `IRelayCommand` implementations. The `IncrementCounter` method's implementation contains the logic from `OnCounterClicked` in MainPage.xaml.cs, with a change to send a message with the new counter message. We will be removing that code-behind code later.
7980

80-
``` csharp
81-
using CommunityToolkit.Mvvm.ComponentModel;
82-
using CommunityToolkit.Mvvm.Input;
83-
using CommunityToolkit.Mvvm.Messaging;
84-
85-
namespace MauiOnWindows
86-
{
87-
public sealed record CountChangedMessage(string Text);
88-
89-
public partial class MainViewModel : ObservableObject
81+
``` csharp
82+
using CommunityToolkit.Mvvm.ComponentModel;
83+
using CommunityToolkit.Mvvm.Input;
84+
using CommunityToolkit.Mvvm.Messaging;
85+
86+
namespace MauiOnWindows
9087
{
91-
[ObservableProperty]
92-
private string message = "Click me";
93-
94-
private int count;
95-
96-
[RelayCommand]
97-
private void IncrementCounter()
88+
public sealed record CountChangedMessage(string Text);
89+
90+
public partial class MainViewModel : ObservableObject
9891
{
99-
count++;
100-
101-
if (count == 1)
92+
[ObservableProperty]
93+
private string message = "Click me";
94+
95+
private int count;
96+
97+
[RelayCommand]
98+
private void IncrementCounter()
99+
{
100+
count++;
101+
102102
message = $"Clicked {count} time";
103-
else
104-
message = $"Clicked {count} times";
105103

106-
WeakReferenceMessenger.Default.Send(new CountChangedMessage(message));
104+
// Pluralize the message if the count is greater than 1
105+
if (count > 1)
106+
message += "s";
107+
108+
WeakReferenceMessenger.Default.Send(new CountChangedMessage(message));
109+
}
107110
}
108111
}
109-
}
110-
```
112+
```
111113

112-
> [!NOTE]
113-
> You will need to update the namespace in the previous code to match the namespace in your project.
114+
> [!NOTE]
115+
> You will need to update the namespace in the previous code to match the namespace in your project.
114116

115-
9. Open the **MainPage.xaml.cs** file for editing and remove the `OnCounterClicked` method and the `count` field.
117+
1. Open the **MainPage.xaml.cs** file for editing and remove the `OnCounterClicked` method and the `count` field.
116118

117-
10. Add the following code to the `MainPage` constructor after the call to `InitializeComponenent()`. This code will receive the message sent by `IncrementCounter()` in the `MainViewModel` and will update the `CounterBtn.Text` property with the new message and announce the new text with the `SemanticScreenReader`:
119+
1. Add the following code to the `MainPage` constructor after the call to `InitializeComponenent()`. This code will receive the message sent by `IncrementCounter()` in the `MainViewModel` and will update the `CounterBtn.Text` property with the new message and announce the new text with the `SemanticScreenReader`:
118120

119-
``` csharp
120-
WeakReferenceMessenger.Default.Register<CountChangedMessage>(this, (r, m) =>
121-
{
122-
CounterBtn.Text = m.Text;
123-
SemanticScreenReader.Announce(m.Text);
124-
});
125-
```
121+
``` csharp
122+
WeakReferenceMessenger.Default.Register<CountChangedMessage>(this, (r, m) =>
123+
{
124+
CounterBtn.Text = m.Text;
125+
SemanticScreenReader.Announce(m.Text);
126+
});
127+
```
126128

127-
11. You will also need to add a `using` statement to the class:
129+
1. You will also need to add a `using` statement to the class:
128130

129-
``` csharp
130-
using CommunityToolkit.Mvvm.Messaging;
131-
```
131+
``` csharp
132+
using CommunityToolkit.Mvvm.Messaging;
133+
```
132134

133-
12. In `MainPage.xaml`, add a namespace declaration to the `ContentPage` so the `MainViewModel` class can be found:
135+
1. In `MainPage.xaml`, add a namespace declaration to the `ContentPage` so the `MainViewModel` class can be found:
134136

135-
``` xaml
136-
xmlns:local="clr-namespace:MauiOnWindows"
137-
```
137+
``` xaml
138+
xmlns:local="clr-namespace:MauiOnWindows"
139+
```
138140

139-
13. Add `MainViewModel` as the `BindingContext` for the `ContentPage`:
141+
1. Add `MainViewModel` as the `BindingContext` for the `ContentPage`:
140142

141-
``` xaml
142-
<ContentPage.BindingContext>
143-
<local:MainViewModel/>
144-
</ContentPage.BindingContext>
145-
```
143+
``` xaml
144+
<ContentPage.BindingContext>
145+
<local:MainViewModel/>
146+
</ContentPage.BindingContext>
147+
```
146148

147-
14. Update the `Button` on `MainPage` to use a `Command` instead of handling the `Clicked` event. The command will bind to the `IncrementCounterCommand` public property that is generated by the MVVM Toolkit's source generators:
149+
1. Update the `Button` on `MainPage` to use a `Command` instead of handling the `Clicked` event. The command will bind to the `IncrementCounterCommand` public property that is generated by the MVVM Toolkit's source generators:
148150

149-
``` xaml
150-
<Button
151-
x:Name="CounterBtn"
152-
Text="Click me"
153-
SemanticProperties.Hint="Counts the number of times you click"
154-
Command="{Binding Path=IncrementCounterCommand}"
155-
HorizontalOptions="Center" />
156-
```
151+
``` xaml
152+
<Button
153+
x:Name="CounterBtn"
154+
Text="Click me"
155+
SemanticProperties.Hint="Counts the number of times you click"
156+
Command="{Binding Path=IncrementCounterCommand}"
157+
HorizontalOptions="Center" />
158+
```
157159

158-
15. Run the project again and observe that the counter is still incremented when you click the button:
160+
1. Run the project again and observe that the counter is still incremented when you click the button:
159161

160-
![Click me button clicked three times.](images/hello-maui-mvvm-clicked-3-times.png)
162+
![Click me button clicked three times.](images/hello-maui-mvvm-clicked-3-times.png)
161163

162-
16. While the project is running, try updating the "Hello, World!" message in the first Label to read "Hello, Windows!" in **MainPage.xaml**. Save the file and notice that [XAML Hot Reload](/dotnet/maui/xaml/hot-reload) updates the UI while the app is still running:
164+
1. While the project is running, try updating the "Hello, World!" message in the first Label to read "Hello, Windows!" in **MainPage.xaml**. Save the file and notice that [XAML Hot Reload](/dotnet/maui/xaml/hot-reload) updates the UI while the app is still running:
163165

164-
![Hello World updated to Hello Windows with XAML Hot Reload.](images/hello-maui-xaml-hot-reload-edited.png)
166+
![Hello World updated to Hello Windows with XAML Hot Reload.](images/hello-maui-xaml-hot-reload-edited.png)
165167

166168
## Next steps
167169

168-
Learn to build an app that displays [Microsoft Graph](/graph/) data for a user by leveraging the [Graph SDK](/graph/sdks/sdks-overview) in a [.NET MAUI for Windows tutorial](./tutorial-graph-api.md).
170+
Learn to build an app that displays [Microsoft Graph](/graph/) data for a user by leveraging the [Graph SDK](/graph/sdks/sdks-overview) in a [.NET MAUI for Windows tutorial](tutorial-graph-api.md).
169171

170-
## Related topics
172+
## Related content
171173

172174
[Resources for learning .NET MAUI](/dotnet/maui/get-started/resources)
173175

174-
[Using the Microsoft Graph API with .NET MAUI on Windows](./tutorial-graph-api.md)
176+
[Using the Microsoft Graph API with .NET MAUI on Windows](tutorial-graph-api.md)

0 commit comments

Comments
 (0)