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: hub/apps/get-started/simple-photo-viewer-winui3.md
+4Lines changed: 4 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -963,3 +963,7 @@ The **Images** property value doesn't change at run-time for this particular app
963
963
## Conclusion
964
964
965
965
In this tutorial we walked through the process of using Visual Studio to build a simple WinUI 3 app that displays photos. Hopefully this tutorial has given you experience working in a WinUI 3 app with controls, layout panels, data-binding, and GridView UI optimization.
966
+
967
+
## See also
968
+
969
+
[Tutorial: Build a simple photo viewer that targets multiple platforms](uno-simple-photo-viewer.md)
Copy file name to clipboardExpand all lines: hub/apps/get-started/uno-simple-photo-viewer.md
+18-18Lines changed: 18 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,32 +11,32 @@ ms.localizationpriority: medium
11
11
12
12
# Tutorial: Build a simple photo viewer that targets multiple platforms
13
13
14
-
After you've [created](/hub/apps/get-started/simple-photo-viewer-winui3.md) a starter simple photo viewer WinUI 3 app, you might be wondering how to reach more users without having to rewrite your app. This tutorial uses [Uno Platform](https://platform.uno/) to expand the reach of your existing C# WinUI 3 application enabling reuse of the business logic and UI layer across native mobile, web, and desktop. With only minimal changes to the simple photo viewer app, we can run a pixel-perfect copy of the app ported to these platforms.
14
+
After you've [created](simple-photo-viewer-winui3.md) a starter simple photo viewer WinUI 3 app, you might be wondering how to reach more users without having to rewrite your app. This tutorial uses [Uno Platform](https://platform.uno/) to expand the reach of your existing C# WinUI 3 application enabling reuse of the business logic and UI layer across native mobile, web, and desktop. With only minimal changes to the simple photo viewer app, we can run a pixel-perfect copy of the app ported to these platforms.
15
15
16
-
:::image type="content" source="images/uno/screenshot1.png" alt-text="Screenshot of UnoSimplePhoto app targeting web and WinUI desktop":::
16
+
:::image type="content" source="images/uno/uno-simple-photo-viewer-apps.png" alt-text="Screenshot of UnoSimplePhoto app targeting web and WinUI desktop.":::
17
17
18
18
## Prerequisites
19
19
20
20
-[Visual Studio 2022 17.4 or later](https://visualstudio.microsoft.com/#vs-section)
21
21
-[Tools for Windows App SDK](../windows-app-sdk/set-up-your-development-environment.md)
22
22
- ASP.NET and web development workload (for WebAssembly development)
23
-
:::image type="content" source="../images/uno/uno-vs-install-web.png" alt-text="Web development workload in VS":::
23
+
:::image type="content" source="../images/uno/uno-vs-install-web.png" alt-text="Screenshot of the web development workload in Visual Studio.":::
24
24
- .NET Multi-platform App UI development installed (for iOS, Android, Mac Catalyst development).
25
-
:::image type="content" source="../images/uno/uno-vs-install-dotnet-mobile.png" alt-text="dotnet mobile workload in VS":::
25
+
:::image type="content" source="../images/uno/uno-vs-install-dotnet-mobile.png" alt-text="Screenshot of the dotnet mobile workload in Visual Studio.":::
26
26
- .NET desktop development installed (for Gtk, Wpf, and Linux Framebuffer development)
27
-
:::image type="content" source="../images/uno/uno-vs-install-dotnet.png" alt-text="dotnet desktop workload in VS":::
27
+
:::image type="content" source="../images/uno/uno-vs-install-dotnet.png" alt-text="Screenshot of the dotnet desktop workload in Visual Studio.":::
Launch Visual Studio, then click `Continue without code`. Click `Extensions` -> `Manage Extensions` from the Menu Bar.
34
34
35
-
:::image type="content" source="../images/uno/uno-manage-extensions.png" alt-text="Visual Studio Menu bar item that reads manage extensions":::
35
+
:::image type="content" source="../images/uno/uno-manage-extensions.png" alt-text="Screenshot of the Visual Studio Menu bar item that reads manage extensions.":::
36
36
37
37
In the Extension Manager expand the **Online** node and search for `Uno`, install the `Uno Platform` extension, or download and install it from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=unoplatform.uno-platform-addin-2022), then restart Visual Studio.
38
38
39
-
:::image type="content" source="../images/uno/uno-extensions.png" alt-text="Manage Extensions window in Visual Studio with Uno Platform extension as a search result":::
39
+
:::image type="content" source="../images/uno/uno-extensions.png" alt-text="Screenshot of the manage Extensions window in Visual Studio with Uno Platform extension as a search result.":::
40
40
41
41
## Create an application
42
42
@@ -46,38 +46,38 @@ Soon enough, you will be able to reap the benefits of this approach, as you can
46
46
47
47
Open Visual Studio and create a new project via `File` > `New` > `Project`:
48
48
49
-
:::image type="content" source="../images/uno/uno-create-project.png" alt-text="Create a new project":::
49
+
:::image type="content" source="../images/uno/uno-create-project.png" alt-text="Screenshot of the create a new project dialog.":::
50
50
51
51
Search for Uno and select the Uno Platform App project template:
:::image type="content" source="../images/uno/uno-new-project.png" alt-text="Screenshot of the create a new project dialog with Uno Platform app as the selected project type.":::
54
54
55
55
Create a new C# solution using the **Uno Platform App** type from Visual Studio's **Start Page**. To avoid conflicting with the code from the previous tutorial, we'll give this solution a different name, "UnoSimplePhotos". Specify the project name, solution name, and directory. In this example, our `UnoSimplePhotos` multi-platform project belongs to a `UnoSimplePhotos` solution, which will live in C:\Projects:
:::image type="content" source="images/uno/uno-configure-project.png" alt-text="Screenshot of specifying project details for the new Uno Platform project.":::
58
58
59
59
Now you'll choose a base template to take your Simple Photo gallery application multi-platform.
60
60
61
61
The Uno Platform App template comes with two preset options that allow you to quickly get started with either a **Blank** solution or the **Default** configuration which includes references to the Uno.Material and Uno.Toolkit libraries. The Default configuration also includes Uno.Extensions which is used for dependency injection, configuration, navigation, and logging. In addition, it uses MVUX in place of MVVM, making it a great starting point for rapidly building real-world applications.
62
62
63
-
:::image type="content" source="../images/uno/uno-vsix-new-project-options.png" alt-text="Uno solution template for project startup type":::
63
+
:::image type="content" source="../images/uno/uno-vsix-new-project-options.png" alt-text="Screenshot of the Uno solution template for project startup type.":::
64
64
65
65
To keep things simple, select the **Blank** preset. Then, click the **Create** button. Wait for the projects to be created and their dependencies to be restored.
66
66
67
67
A banner at the top of the editor may ask to reload projects, click **Reload projects**:
68
-
:::image type="content" source="../images/vs2022-project-reload.png" alt-text="Visual Studio banner offering to reload your projects to complete changes":::
68
+
:::image type="content" source="../images/visual-studio-2022-project-reload.png" alt-text="Screenshot of the Visual Studio banner offering to reload your projects to complete changes.":::
69
69
70
70
You should see the following default file structure in your **Solution Explorer**:
:::image type="content" source="images/uno/solution-explorer-new-uno-project.png" alt-text="Screenshot of the default file structure in Solution Explorer.":::
73
73
74
74
### Add image assets to the project
75
75
76
76
Your app will need some images to display. You can use the same images from the previous tutorial.
77
77
78
78
In the `UnoSimplePhotos` project, create a new folder named `Assets` and copy the JPG image files to a `Samples` subfolder. The `Assets` folder structure should now look like this:
79
79
80
-
:::image type="content" source="images/uno/screenshot3.png" alt-text="Solution explorer pane in Visual Studio":::
80
+
:::image type="content" source="images/uno/solution-explorer-uno-project-new-files.png" alt-text="Screenshot of the Solution Explorer pane in Visual Studio with the new files and folders added.":::
81
81
82
82
For more information on creating the `Assets` folder and adding images to it, see the Uno Platform documentation about [Assets and image display](https://platform.uno/docs/articles/features/working-with-assets.html).
83
83
@@ -87,7 +87,7 @@ Now that you've generated the functional starting point of your multi-platform W
87
87
88
88
### Copy the view
89
89
90
-
Because Uno Platform allows you to use the XAML flavor you're already familiar with, you can copy the same code over that you created in the [previous tutorial](/hub/apps/get-started/simple-photo-viewer-winui3.md).
90
+
Because Uno Platform allows you to use the XAML flavor you're already familiar with, you can copy the same code over that you created in the [previous tutorial](simple-photo-viewer-winui3.md).
91
91
92
92
Return to the **SimplePhotos** project from the previous tutorial. In the **Solution Explorer**, find the file named `MainWindow.xaml` and open it. Observe that the contents of the view are defined within a `Window` element rather than a `Page`. This is because the desktop project is a WinUI 3 application, which can use `Window` elements to define the contents of the view:
93
93
@@ -511,7 +511,7 @@ Similar to the `GetItemsAsync` method, this method now uses a preprocessor direc
511
511
512
512
Controls like `GridView` allow for **progressive loading** of updated item container content as they are scrolled into the viewport. This is done by using the `ContainerContentChanging` event. In the desktop project from the previous tutorial, the `ImageGridView_ContainerContentChanging` method uses this event to load the image files into the `GridView`. Because certain aspects of this event are not supported on all platforms, we'll need to make changes to this method to make it compatible with them.
513
513
514
-
:::image type="content" source="images/uno/xaml-attached-layout-realizationrect.png" alt-text="Diagram of collection control viewport":::
514
+
:::image type="content" source="images/uno/xaml-attached-layout-realization-rect.png" alt-text="Diagram of collection control viewport.":::
515
515
516
516
For instance, the `ContainerContentChangingEventArgs.Phase` property is currently unsupported on platforms other than Windows. We'll need to make changes to the `ImageGridView_ContainerContentChanging` method to accommodate this change. Replace the `ImageGridView_ContainerContentChanging` method in the `MainPage.xaml.cs` file with the following code:
517
517
@@ -917,7 +917,7 @@ You can now build and run your app on any of the supported platforms. To do so,
917
917
- Right-click on the `UnoSimplePhotos.Mobile` project, and select **Set as startup project**
918
918
- In the debug toolbar drop-down, select an active iOS device or the simulator. You'll need to be paired with a Mac for this to work.
919
919
920
-
:::image type="content" source="../images/uno/uno-mobile-debug.png" alt-text="Visual Studio dropdown to select a target framework to deploy":::
920
+
:::image type="content" source="../images/uno/uno-mobile-debug.png" alt-text="Screenshot of the Visual Studio dropdown to select a target framework to deploy.":::
921
921
922
922
- To debug for **Mac Catalyst**:
923
923
- Right-click on the `UnoSimplePhotos.Mobile` project, and select **Set as startup project**
@@ -934,4 +934,4 @@ You can now build and run your app on any of the supported platforms. To do so,
0 commit comments