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

.NET 6、7 時代の
デスクトップアプリケーション開発 Part I
.NETラボ勉強会 2022年4月
23rd April 2022
Fujio Kojima

アジェンダ
本日はこの辺まで?

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

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

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

UWP (Universal Windows Platform)
XAML
WinRT API
9

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

.NET/WPF
11
Windows Presentation Foundation
XAML

Microsoft Silverlight - Wikipedia
XAML
Silverlight
12

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

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

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

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

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

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

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

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

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

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

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?" />

.NET MAUI Release Candidate - Ready for cross-platform app development - .NET Blog (microsoft.com)
【参考】 .NET MAUI Release Candidate
33

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

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

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

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

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

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

46
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
47

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

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)
参考文献
50

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

Recommended

Recommended

More Related Content

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

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

More from Fujio Kojima

More from Fujio Kojima (20)

Recently uploaded

Recently uploaded (14)