You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: learn-pr/windows/winui-101/includes/11-summary.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,14 +1,14 @@
1
1
You completed this module and build a strong foundation for Windows development skills.
2
2
3
-
Here's what you achieve in this module:
3
+
Here's what you achieved in this module:
4
4
5
5
- You understand the role of the Windows App SDK and WinUI in creating modern and high-performance Windows applications.
6
6
- You set up the development environment by enabling Developer Mode and installing Visual Studio.
7
-
- You create a WinUI project, update essential packages, and organize the project by following best practices.
8
-
- You use XAML for UI design and learn about the purpose of code-behind files.
7
+
- You created a WinUI project, update essential packages, and organize the project by following best practices.
8
+
- You used XAML for UI design and learned about the purpose of code-behind files.
9
9
- You implemented two ways of binding data (`{x:Bind}` and `{Binding}`).
10
10
- You understand how to use resource dictionaries for styling.
11
-
- You can dynamically add data or update images to the View.
11
+
- You added dynamically add data or updated images to the View.
12
12
- You set up navigation in your future apps.
13
13
14
14
These skills help you as you continue to develop Windows applications. Keep practicing and exploring new features. The world of Windows development offers many opportunities, and you're ready to learn more
Copy file name to clipboardExpand all lines: learn-pr/windows/winui-101/includes/2-dev-set-up.md
+44-44Lines changed: 44 additions & 44 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ Windows has a special mode for developers that adjusts security settings to let
7
7
To enable Developer Mode:
8
8
9
9
1. Open Windows Settings and navigate to the **System** > **For developers** page.
10
-
2. Toggle the Developer Mode switch to **On** and confirm your choice in the confirmation dialog.
10
+
1. Toggle the Developer Mode switch to **On** and confirm your choice in the confirmation dialog.
11
11
12
12
## Install Visual Studio
13
13
@@ -16,16 +16,16 @@ You use [Visual Studio](https://github.com/MicrosoftDocs/windows-dev-docs/blob/d
16
16
> [!NOTE]
17
17
> Before installing these tools, ensure your development computer meets the [system requirements for Windows app development](https://github.com/MicrosoftDocs/windows-dev-docs/blob/docs/hub/apps/windows-app-sdk/system-requirements.md).
18
18
19
-
3. Go to the Visual Studio page to download and install the latest Visual Studio. You can use the free Visual Studio Community Edition.
19
+
1. Go to the Visual Studio page to download and install the latest Visual Studio. You can use the free Visual Studio Community Edition.
20
20
21
-
> [!NOTE]
22
-
> The installer guides you through the steps, but if you need detailed instructions, see [Install Visual Studio](https://github.com/MicrosoftDocs/windows-dev-docs/blob/docs/visualstudio/install/install-visual-studio).
21
+
> [!NOTE]
22
+
> The installer guides you through the steps, but if you need detailed instructions, see [Install Visual Studio](https://github.com/MicrosoftDocs/windows-dev-docs/blob/docs/visualstudio/install/install-visual-studio).
23
23
24
-
While installing Visual Studio, you need to install the workloads and components required for developing with WinUI and the Windows App SDK.
24
+
While installing Visual Studio, you need to install the workloads and components required for developing with WinUI and the Windows App SDK.
25
25
26
-
4. Open the Visual Studio Installer app
27
-
5. Select **Modify** to add workloads and components.
28
-
6. On the **Workloads** tab of the Visual Studio Installer app, select the following workloads and components:
26
+
1. Open the Visual Studio Installer app
27
+
1. Select **Modify** to add workloads and components.
28
+
1. On the **Workloads** tab of the Visual Studio Installer app, select the following workloads and components:
29
29
30
30
-[Visual Studio 2022 version 17.10 and later](https://github.com/MicrosoftDocs/windows-dev-docs/blob/docs/hub/apps/get-started/start-here.md#tab/vs-2022-17-10)
31
31
@@ -41,15 +41,15 @@ While installing Visual Studio, you need to install the workloads and components
41
41
42
42
To create a new project using the WinUI C# Blank App project template:
43
43
44
-
7. Open Visual Studio and select **Create a new project** from the launch page. (If Visual Studio is already open to the editor, select **File** > **New**> **Project**)
45
-
8. Search for **WinUI** and select the **Blank App, Packaged (WinUI 3 in Desktop)** project template
46
-
9. Click **Next**
47
-
10. Name your project: **SnowPal**
44
+
1. Open Visual Studio and select **Create a new project** from the launch page. (If Visual Studio is already open to the editor, select **File** > **New**> **Project**)
45
+
1. Search for **WinUI** and select the **Blank App, Packaged (WinUI 3 in Desktop)** project template
46
+
1. Click **Next**
47
+
1. Name your project: **SnowPal**
48
48
49
-
> [!IMPORTANT]
50
-
> The Project Name and Solution Name must be SnowPal. Visual Studio creates namespaces using this information. If it's something different, the code you copy and paste from this tutorial can cause build errors.
49
+
> [!IMPORTANT]
50
+
> The Project Name and Solution Name must be SnowPal. Visual Studio creates namespaces using this information. If it's something different, the code you copy and paste from this tutorial can cause build errors.
51
51
52
-
11. Select **Create**.
52
+
1. Select **Create**.
53
53
54
54
## Update & Install Packages
55
55
@@ -60,25 +60,25 @@ The Windows App SDK (including WinUI) and tools like the Community Toolkit are d
60
60
61
61
To update the Windows App SDK NuGet package for your project:
62
62
63
-
12. In Visual Studio, with your project loaded, select **Tools** > **NuGet Package Manager** > **Manage NuGet Packages for Solution....**
63
+
1. In Visual Studio, with your project loaded, select **Tools** > **NuGet Package Manager** > **Manage NuGet Packages for Solution....**
64
64
65
-
> [!IMPORTANT]
66
-
> Projects must not be running in order to access the "Manage Nuget packages" option in the drop-down
65
+
> [!IMPORTANT]
66
+
> Projects must not be running in order to access the "Manage Nuget packages" option in the drop-down
67
67
68
-
:::image type="content" source="../media/2-dev-set-up/package-source.png" alt-text="Screenshot of Visual Studio.":::
68
+
:::image type="content" source="../media/2-dev-set-up/package-source.png" alt-text="Screenshot of Visual Studio.":::
69
69
70
-
13. Confirm that it's set to `nuget.org`
70
+
1. Confirm that it's set to `nuget.org`
71
71
- if it isn't, follow [these](/nuget/consume-packages/install-use-packages-visual-studio#package-sources) instructions.
72
-
14. Click on the **Installed** tab.
73
-
15. Click on **Microsoft.WindowsAppSDK**
74
-
16. Select the **Checkbox** to Include prelease
75
-
17. On the right panel:
72
+
1. Click on the **Installed** tab.
73
+
1. Click on **Microsoft.WindowsAppSDK**
74
+
1. Select the **Checkbox** to Include prelease
75
+
1. On the right panel:
76
76
1. select the **checkbox** of the **Project**
77
-
1. Select from the dropdown **1.7.250401001**
77
+
1. Select from the dropdown **1.7.250401001**
78
78
1. Click **install**
79
79
1. On the Preview Changes Popup, **Click Apply**.
80
80
1. On the License Acceptance Popup, **Click I Accept**.
81
-
18. To install the CommunityToolkit NuGet package for your project:
81
+
1. To install the CommunityToolkit NuGet package for your project:
82
82
1. Still in the Manage NuGet Packages for Solution, Click on the **Browse** tab.
83
83
1. Enter **`CommunityToolkit.Mvvm`** in the search bar
84
84
1.**Click to select**`CommunityToolkit.Mvvm`
@@ -88,22 +88,22 @@ To update the Windows App SDK NuGet package for your project:
88
88
1. Click **Install**.
89
89
1. On the Preview Changes Popup, **Click Apply**.
90
90
1. On the License Acceptance Popup, **Click I Accept**.
91
-
19.**Close** the NuGet Package Manager
91
+
1.**Close** the NuGet Package Manager
92
92
93
-
The Community Toolkit.Mvvm uses features that are ahead of the standard C# language version that your project is configured to use by default. You need to update the project's configuration:
93
+
The Community Toolkit.Mvvm uses features that are ahead of the standard C# language version that your project is configured to use by default. You need to update the project's configuration:
94
94
95
-
20. If Solution Explorer isn't already open, you can open it by selecting **View** > **Solution Explorer** from the top menu.
96
-
21. In the Solution Explorer, you see a tree structure representing your solution and its projects. Look for the project node named **SnowPal**. This node is usually a folder icon with the project name next to it.
97
-
22.**Right-click** on the project node (**SnowPal**) and select **Edit Project File**. This action opens the .csproj file in the editor.
95
+
1. If Solution Explorer isn't already open, you can open it by selecting **View** > **Solution Explorer** from the top menu.
96
+
1. In the Solution Explorer, you see a tree structure representing your solution and its projects. Look for the project node named **SnowPal**. This node is usually a folder icon with the project name next to it.
97
+
1.**Right-click** on the project node (**SnowPal**) and select **Edit Project File**. This action opens the .csproj file in the editor.
98
98
99
-
:::image type="content" source="../media/2-dev-set-up/edit-project-file.png" alt-text="Screenshot of Edit Project.":::
99
+
:::image type="content" source="../media/2-dev-set-up/edit-project-file.png" alt-text="Screenshot of Edit Project.":::
100
100
101
-
23.**Locate** the first `PropertyGroup` element in the file
102
-
24.**Add**`<LangVersion>preview</LangVersion>`
101
+
1.**Locate** the first `PropertyGroup` element in the file
102
+
1.**Add**`<LangVersion>preview</LangVersion>`
103
103
104
-
:::image type="content" source="../media/2-dev-set-up/language-version.png" alt-text="Screenshot of file with added LangVersion element.":::
104
+
:::image type="content" source="../media/2-dev-set-up/language-version.png" alt-text="Screenshot of file with added LangVersion element.":::
105
105
106
-
25.**Save and Close** the file
106
+
1.**Save and Close** the file
107
107
108
108
Adding Preview is a way to unlock experimental language features required by advanced tools like Community Toolkit.Mvvm, enabling developers to use cutting-edge capabilities in their projects.
109
109
@@ -113,11 +113,11 @@ Now your project is using the latest WinUI features that are available.
113
113
114
114
You can run this blank project:
115
115
116
-
26. On the title bar, **Click** on **Debug** > **Start Debugging** OR on your keyboard press **F5** key
116
+
1. On the title bar, **Click** on **Debug** > **Start Debugging** OR on your keyboard press **F5** key
117
117
118
-
:::image type="content" source="../media/2-dev-set-up/start-debug.png" alt-text="Screenshot of visual studio's Debug.":::
118
+
:::image type="content" source="../media/2-dev-set-up/start-debug.png" alt-text="Screenshot of visual studio's Debug.":::
119
119
120
-
27. To stop debugging, **Close** the app window, or **Click** the debug "Stop" button in Visual Studio.
120
+
1. To stop debugging, **Close** the app window, or **Click** the debug "Stop" button in Visual Studio.
121
121
122
122
## The project's file structure
123
123
@@ -136,13 +136,13 @@ To improve maintainability, you create two new folders for organizing your proje
136
136
137
137
### Steps to Create Folders
138
138
139
-
28. In Solution Explorer, **right-click** on your project.
140
-
29. Select **Add** > **New Folder**.
139
+
1. In Solution Explorer, **right-click** on your project.
140
+
1. Select **Add** > **New Folder**.
141
141
142
-
:::image type="content" source="../media/2-dev-set-up/add-new-folder.png" alt-text="Screenshot of visual studio's add new folder.":::
142
+
:::image type="content" source="../media/2-dev-set-up/add-new-folder.png" alt-text="Screenshot of visual studio's add new folder.":::
143
143
144
-
30. Name the new folder `Models`.
145
-
31. Repeat steps 1–3 and name the second folder `Pages`.
144
+
1. Name the new folder `Models`.
145
+
1. Repeat steps 1–3 and name the second folder `Pages`.
0 commit comments