.NET 6 時代のデスクトップアプリケーション開発

.NET 6、7 時代の
デスクトップアプリケーション開発
25th March 2022
Fujio Kojima

1. マイクロソフト技術による
デスクトップアプリケーション開発の歴史
4

5
1. マイクロソフト技術による
デスクトップアプリケーション開発の歴史

C++/MFC
C++/WTL
.NET/Windows Forms
Win32 API
6

UWP (Universal Windows Platform)
XAML
WinRT API
8

C++/CX
C++/WinRT
WinRT API Application 開発環境
9

.NET/WPF
10
Windows Presentation Foundation
XAML

Microsoft Silverlight - Wikipedia
XAML
Silverlight
11

Extensible Application Markup Language
XAML の概要 - WPF .NET | Microsoft Docs
XAML
12

Xamarin Forms
WinUI
XAML の方言
13
XAML Standard は
どうなったのか

Windows UI ライブラリ (WinUI) - Windows apps | Microsoft Docs
Windows UI ライブラリ (WinUI) 2 - Windows apps | Microsoft Docs
Fluent Design System
Win UI
15

microsoft-ui-xaml/roadmap.md at main · microsoft/microsoft-ui-xaml · GitHub
Win UI 3
17

Win UI 3
20
Visual Studio 拡張機能
「Windows App SDK」

Win UI 3 (C#)
21
[Experimental]
WinUI 3 App

Win UI 3 (C++/WinRT)
22
[Experimental]
WinUI 3 App

Microsoft インターフェイス定義言語 3.0 の概要 - Windows UWP applications | Microsoft Docs
Win UI 3 アプリケーション (C++/WinRT)
23

.NET MAUI とは - .NET MAUI | Microsoft Docs
3. MAUI
24

• dotnet/maui | GitHub
• クロスプラットフォーム、
ネイティブ UI
• シングルプロジェクト、
シングルコードベース
• モバイルやデスクトップなど
マルチデバイスへのデプロイ
• 2022年春頃 GA 予定
MAUI (Multi-platform App UI)
25

26
The Future of Native Apps Development in .NET 6 - YouTube

27
The Future of Native Apps Development in .NET 6 - YouTube

Visual Studio Preview (microsoft.com)
Visual Studio Preview
28

.NET MAUI App
.NET MAUI Blazor App
29

30

31
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="HelloMaui.MainPage"
BackgroundColor="{DynamicResource SecondaryColor}">
<ScrollView>
<Grid RowSpacing="25" RowDefinitions="Auto,Auto,Auto,Auto,*"
Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">
<Label
Text="Hello, World!"
Grid.Row="0"
SemanticProperties.HeadingLevel="Level1"
FontSize="32"
HorizontalOptions="Center" />
<Label
Text="Welcome to .NET Multi-platform App UI"
Grid.Row="1"
SemanticProperties.HeadingLevel="Level1"
SemanticProperties.Description="Welcome to dot net Multi platform App U I"
FontSize="18"
<Label
Text="Current count: 0"
Grid.Row="2"
FontSize="18"
FontAttributes="Bold"
x:Name="CounterLabel"
<Button
Text="Click me"
FontAttributes="Bold"
Grid.Row="3"
SemanticProperties.Hint="Counts the number of times you click"
Clicked="OnCounterClicked"
<Image Grid.Row="4"
Source="dotnet_bot.png"
SemanticProperties.Description="Cute dot net bot waving hi to you!"
WidthRequest="250"
HeightRequest="310"
</Grid>
</ScrollView>
</ContentPage>
.NET MAUI App (Preview)

32
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:b="clr-
namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspN
etCore.Components.WebView.Maui"
xmlns:local="clr-namespace:HelloMauiBlazor"
x:Class="HelloMauiBlazor.MainPage"
BackgroundColor="{DynamicResource PageBackgroundColor}">
<b:BlazorWebView HostPage="wwwroot/index.html">
<b:BlazorWebView.RootComponents>
<b:RootComponent Selector="#app" ComponentType="{x:Type
local:Main}" />
</b:BlazorWebView.RootComponents>
</b:BlazorWebView>
</ContentPage>
.NET MAUI Blazor App
(Preview)
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />

Mobile Blazor Bindings App (Experimental)
Blazor の種類
38

Blazor の種類
39
ASP.NET Community Standup - Blazor .NET 7 Roadmap - YouTube

Blazor Hybrid (Experimental)
40
ASP.NET Community Standup - Blazor .NET 7 Roadmap - YouTube

Hybrid apps with Blazor & .NET MAUI
Blazor Hybrid (Experimental)
41
• ネイティブと Web の UI コンポーネントの再利用
• .NET MAUI 上に構築
• ネイティブアプリコンテナーと埋め込みコントロール
• 2022年春頃に GA 予定

NuGet Gallery | Microsoft.MobileBlazorBindings.Templates 0.5.50-preview
Blazor Desktop Apps と Blazor Hybrid の開発環境
42
プロジェクトのテンプレート
をインストール

44
Blazor Desktop Apps
(Experimental)
<ContentView>
<StackLayout Margin="new Thickness(20)">
<Label Text="Hello, World!"
FontSize="40" />
<Counter />
</StackLayout>
</ContentView>

45
Blazor Hybrid
(Experimental)
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
@inject CounterState CounterState
<ContentView>
<StackLayout>
<StackLayout Margin="new Thickness(20)" Orientation="StackOrientation.Horizontal">
<Label Text="@($"Hello, World! {CounterState.CurrentCount}")" FontSize="40"
HorizontalOptions="LayoutOptions.StartAndExpand" />
<Button Text="Increment" OnClick="@CounterState.IncrementCount" VerticalOptions="LayoutOptions.Center"
Padding="10" />
</StackLayout>
<BlazorWebView VerticalOptions="LayoutOptions.FillAndExpand">
<HelloBlazorBindingHybrid.WebUI.App />
</BlazorWebView>
</StackLayout>
</ContentView>
@code {
protected override void OnInitialized()
{
CounterState.StateChanged += StateHasChanged;
}
public void Dispose()
{
CounterState.StateChanged -= StateHasChanged;
}
}

• 毎年11月にメジャーリリース予定
• LTS は奇数年リリース
• 2021年11月 ― .NET 6 (LTS) リリース
• 予定リリース以外に必要であればマイナーリリースあり
• LTS サポートは3年
【参考】 .NET Roadmap
46

Announcing .NET 7 Preview 2 - The New, 'New' Experience - .NET Blog (microsoft.com)
【参考】 .NET 7
47

microsoft-ui-xaml/roadmap.md at main · microsoft/microsoft-ui-xaml · GitHub
Windows UI ライブラリ (WinUI) - Windows apps | Microsoft Docs
Fluent Design System
Microsoft インターフェイス定義言語 3.0 の概要 - Windows UWP applications | Microsoft
Docs
Visual Studio Preview (microsoft.com)
参考文献
49

.NET 6 時代のデスクトップアプリケーション開発

More Related Content

What's hot (20)

Similar to .NET 6 時代のデスクトップアプリケーション開発 (20)

More from Fujio Kojima (20)