🎉

.NET MAUI Preview 14 を試してみた

2022/03/27に公開

.NET

MAUI

tech

はじめに

2022年3月16日に MAUI Preview 14 が公開されたので、試してみました。ブログ内では "File Picker" について紹介されていたので、これを実装します。

準備

実行環境

MAUI pre 14 は Visual Studio 2022 の 17.2 pre 2 以上で利用できるみたいなので、忘れずに更新しておきましょう。

Windows 10 21H2
Visual Stduio 2022 Preview 17.2.0 Preview 2.1
Android Emulator (Pixel 5, API 31)

プロジェクト作成

今回は VS から作成しました。

ソリューションとプロジェクトは同じディレクトリに配置して作成します。

念の為、ビルド＆実行ができるか確認しておきます。

デフォルトのデザインを色々いじるのも面白いのですが、一度全部削除します。

実装

画面デザイン

File Picker はどうやら Jpeg や Png といった画像だけでなく Pdf や Video もいけるようなので、それぞれを開くためのページを作ってみます。

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="MyMauiApp.MainPage"
            xmlns:local="clr-namespace:MyMauiApp"
            BarTextColor="White"
            BarBackground="{DynamicResource PrimaryColor}">
    <local:ImgPage Title="Image"/>
    <local:PdfPage Title="PDF"/>
    <local:VideoPage Title="Video"/>
</TabbedPage>

プロジェクト作成直後は MainPage のコードビハインドで ContentPage を継承しているので、UI コントロールに合わせて継承するクラスも変更します。

MainPage.xaml.cs

namespace MyMauiApp;

public partial class MainPage : TabbedPage
{
	public MainPage()
	{
		InitializeComponent();
	}
}

また、ページを追加する際には MAUI 用のページテンプレートを選択してください。通常のページは Xamarin 用になっているのでビルド時にエラーが発生します。

ImgView.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.ImgPage"
             Title="ImgPage"
             BackgroundColor="{DynamicResource SecondaryColor}">
    
    <StackLayout>
        <Label  Text="This is image page!"
                FontSize="18"
                TextColor="Black"
                Padding="10"
                HorizontalOptions="Center" />
        <Button Text="ファイルを開く" 
                MaximumWidthRequest="200"
                BackgroundColor="DodgerBlue"
                Clicked="Button_Clicked"/>
        <Label Text="file name here."
               TextColor="Black"
               HorizontalOptions="Center"
               x:Name="FilePathLabel"/>
        <ScrollView VerticalOptions="FillAndExpand">
            <Image x:Name="Image"
               Margin="20"
               HorizontalOptions="Center"
               VerticalOptions="Center"/>
        </ScrollView>
    </StackLayout>
 
</ContentPage>

こんな感じにページをいくつかに分けて、MainPage.xaml のタブページに含めます。他のページについても同様に、記述していきます。

コードビハインド

ブログの書き方をちょっと変えただけです。

ImgPage.xaml.cs

namespace MyMauiApp;

public partial class ImgPage : ContentPage
{
	public ImgPage()
	{
		InitializeComponent();
	}

	private async Task<FileResult> PickFile(PickOptions options)
    {
        try
        {
            var result = await FilePicker.PickAsync(options);
            if(result != null)
            {
                FilePathLabel.Text = $"File Name : {result.FullPath}";
                if (result.FileName.EndsWith("jpg", StringComparison.OrdinalIgnoreCase) || result.FileName.EndsWith("png", StringComparison.OrdinalIgnoreCase))
                {
                    var stream = await result.OpenReadAsync();
                    Image.Source = ImageSource.FromStream(() => stream);
                }
            }
            return result;
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex);
        }
        return null;
    }

    private async void Button_Clicked(object sender, EventArgs e)
    {
        var result = await PickFile(PickOptions.Default);
    }
        
}

例外処理として、エラーをデバッグコンソールに表示させるようにしてみました。

実行結果

Mac を持っていないので Android と Windows アプリのみでの結果です。

画像は表示できましたが、PDF と Video が表示できませんでした。ファイルパスは参照できているので、あとは UI コントロールが正しくないのかもしれません。（Image コントロールで Video もいけると思ってた。）

【Windows】

【Android】

Xamarin のときは Xamarin Community Toolkit の MediaElement コントロールで PDF や Video が表示できていたはずですので、MAUI でもできるようになるのかも？

MediaElement についてはまだまだ議論の段階のようですが。。。

久々にモバイルアプリを動かしてみたのですが、MAUI良きです🎈