■ WINUI 3 단일 배포 앱을 만드는 방법을 보여준다. (UNPACKAGED)
1. 비주얼 스튜디오 2022를 실행한다.
2. 아래 화면에서 [새 프로젝트 만들기] 버튼을 클릭한다.
3. 아래 화면에서 [빈 앱, 패키지됨(데스크톱의 WinUI 3) 프로젝트 템플리트를 선택하고 [다음] 버튼을 클릭한다.
4. 아래 화면에서 [프로젝트 이름], [위치], [솔루션 이름] 항목을 입력하고 [만들기] 버튼을 클릭한다.
5. 아래와 같이 소스 코드를 구성한다.
▶ TestProject.csproj
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup> <OutputType>WinExe</OutputType> <TargetFramework>net8.0-windows10.0.19041.0</TargetFramework> <TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion> <RootNamespace>TestProject</RootNamespace> <ApplicationManifest>app.manifest</ApplicationManifest> <Platforms>x86;x64;ARM64</Platforms> <RuntimeIdentifiers Condition="$([MSBuild]::GetTargetFrameworkVersion('$(TargetFramework)')) >= 8">win-x86;win-x64;win-arm64</RuntimeIdentifiers> <RuntimeIdentifiers Condition="$([MSBuild]::GetTargetFrameworkVersion('$(TargetFramework)')) < 8">win10-x86;win10-x64;win10-arm64</RuntimeIdentifiers> <PublishProfile>win-$(Platform).pubxml</PublishProfile> <UseWinUI>true</UseWinUI> <EnableMsixTooling>true</EnableMsixTooling> <WindowsPackageType>None</WindowsPackageType> <!-- 추가 --> <PublishSingleFile>true</PublishSingleFile> <!-- 추가 --> <SelfContained>true</SelfContained> <!-- 추가 --> <WindowsAppSDKSelfContained>true</WindowsAppSDKSelfContained> <!-- 추가 --> </PropertyGroup> <ItemGroup> <Content Include="Assets\SplashScreen.scale-200.png" /> <Content Include="Assets\LockScreenLogo.scale-200.png" /> <Content Include="Assets\Square150x150Logo.scale-200.png" /> <Content Include="Assets\Square44x44Logo.scale-200.png" /> <Content Include="Assets\Square44x44Logo.targetsize-24_altform-unplated.png" /> <Content Include="Assets\StoreLogo.png" /> <Content Include="Assets\Wide310x150Logo.scale-200.png" /> </ItemGroup> <ItemGroup> <PackageReference Include="Microsoft.Windows.SDK.BuildTools" Version="10.0.22621.756" /> <PackageReference Include="Microsoft.WindowsAppSDK" Version="1.5.240607001" /> <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Markdown" Version="7.1.2" /> <Manifest Include="$(ApplicationManifest)" /> </ItemGroup> <!-- Defining the "Msix" ProjectCapability here allows the Single-project MSIX Packaging Tools extension to be activated for this project even if the Windows App SDK Nuget package has not yet been restored. --> <ItemGroup Condition="'$(DisableMsixProjectCapabilityAddedByProject)'!='true' and '$(EnableMsixTooling)'=='true'"> <ProjectCapability Include="Msix" /> </ItemGroup> <!-- Defining the "HasPackageAndPublishMenuAddedByProject" property here allows the Solution Explorer "Package and Publish" context menu entry to be enabled for this project even if the Windows App SDK Nuget package has not yet been restored. --> <PropertyGroup Condition="'$(DisableHasPackageAndPublishMenuAddedByProject)'!='true' and '$(EnableMsixTooling)'=='true'"> <HasPackageAndPublishMenu>true</HasPackageAndPublishMenu> </PropertyGroup> </Project> |
▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?xml version="1.0" encoding="utf-8"?> <Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:toolkit="using:CommunityToolkit.WinUI.UI.Controls" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid Margin="10" Background="DarkGray"> <toolkit:MarkdownTextBlock Name="markdownTextBlock" Background="White" Padding="10" /> <Button Name="changeTextButton" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="10" Width="100" Height="30" Content="텍스트 변경" /> </Grid> </Page> |
▶ MainPage.xaml.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
using Windows.Foundation; using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Controls; using CommunityToolkit.WinUI.UI.Controls; namespace TestProject; /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 마크다운 컨텐트 1 /// </summary> private string markdownContent1 = @" # 제목 이것은 **Markdown** 문서입니다. - 목록 항목 1 - 목록 항목 2 - 목록 항목 3 ```csharp // 코드 블록 예제 Console.WriteLine(""Hello, World!""); ``` "; /// <summary> /// 마크다운 컨텐트 2 /// </summary> private string markdownContent2 = @" "; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); this.markdownTextBlock.MarkdownRendered += markdownTextBlock_MarkdownRendered; this.changeTextButton.Click += changeTextButton_Click; this.markdownTextBlock.Text = markdownContent1; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region 마크다운 텍스트 블럭 마크다운 렌더링시 처리하기 - markdownTextBlock_MarkdownRendered(sender, e) /// <summary> /// 마크다운 텍스트 블럭 마크다운 렌더링시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void markdownTextBlock_MarkdownRendered(object sender, MarkdownRenderedEventArgs e) { SetMarkdownTextBlockSize(); } #endregion #region 텍스트 변경 버튼 클릭시 처리하기 - changeTextButton_Click(sender, e) /// <summary> /// 텍스트 변경 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void changeTextButton_Click(object sender, RoutedEventArgs e) { if(this.markdownTextBlock.Text == this.markdownContent1) { this.markdownTextBlock.Text = this.markdownContent2; } else { this.markdownTextBlock.Text = this.markdownContent1; } } #endregion //////////////////////////////////////////////////////////////////////////////// Function #region 마크다운 텍스브 블럭 크기 설정하기 - SetMarkdownTextBlockSize() /// <summary> /// 마크다운 텍스브 블럭 크기 설정하기 /// </summary> private void SetMarkdownTextBlockSize() { if(string.IsNullOrWhiteSpace(this.markdownTextBlock.Text)) { this.markdownTextBlock.Width = 200; this.markdownTextBlock.Height = 50; } else { this.markdownTextBlock.Width = double.NaN; this.markdownTextBlock.Height = double.NaN; this.markdownTextBlock.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity)); this.markdownTextBlock.Width = this.markdownTextBlock.DesiredSize.Width + 20; this.markdownTextBlock.Height = this.markdownTextBlock.DesiredSize.Height; } } #endregion } |
▶ MainWindow.xaml
|
1 2 3 4 5 6 7 8 9 |
<?xml version="1.0" encoding="utf-8"?> <Window x:Class="TestProject.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="TestProject"> <Frame Name="frame" /> </Window> |
▶ MainWindow.xaml.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
using Microsoft.UI.Xaml; namespace TestProject; /// <summary> /// 메인 윈도우 /// </summary> public sealed partial class MainWindow : Window { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainWindow() /// <summary> /// 생성자 /// </summary> public MainWindow() { InitializeComponent(); } #endregion } |
▶ App.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0" encoding="utf-8"?> <Application x:Class="TestProject.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application> |
▶ App.xaml.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
using Windows.Graphics; using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Controls; namespace TestProject; /// <summary> /// 앱 /// </summary> public partial class App : Application { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 윈도우 /// </summary> private Window window; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - App() /// <summary> /// 생성자 /// </summary> public App() { InitializeComponent(); } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Protected #region 시작시 처리하기 - OnLaunched(args) /// <summary> /// 시작시 처리하기 /// </summary> /// <param name="args">이벤트 인자</param> protected override void OnLaunched(LaunchActivatedEventArgs args) { this.window = new MainWindow(); Frame frame = this.window.Content as Frame; frame.Content = new MainPage(); this.window.AppWindow.Resize(new SizeInt32(800, 600)); this.window.Activate(); } #endregion } |
6. [명령 프롬프트]를 실행한다.
7. 아래와 같이 명령을 실행해 WinUI 3 앱을 게시한다.
▶ 실행 명령
|
1 2 3 |
dotnet publish -c Release -p:Platform=x64 -o .\bin\publish |
8. 아래와 같이 단일 배포 앱이 만들어진 것을 확인할 수 있다.
9. TestProject.exe를 실행하면 아래와 같이 앱이 실행된다.
