.NET MAUIとCleanArchitectureで簡単なアプリを作成してみる4～実装5～

[.NET MAUIとCleanArchitectureで簡単なアプリを作成してみる4～実装4～](https://qiita.com/GOROGOROMOGUMOGU/items/fd5a28e2f634f0574728)の続き
# MainPageのレイアウトを実装する
メイン画面のレイアウトはこんな感じ ※[アプリ構成図参照](https://qiita.com/GOROGOROMOGUMOGU/items/6b79aa9b1c83261957c3#%E3%82%A2%E3%83%97%E3%83%AA%E6%A7%8B%E6%88%90%E5%9B%B3)

![メイン画面.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3674221/eaa2b65f-d05d-055e-a3f5-cc1b046f8b18.png)

```xml:MainPage.xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Maui;assembly=LiveChartsCore.SkiaSharpView.Maui"
             xmlns:viewModels="clr-namespace:MauiApp1.ViewModels"
             x:Class="MauiApp1.Views.MainPage"
             Appearing="ContentPage_Appearing">
    
    <ContentPage.BindingContext>
        <viewModels:MainViewModel />
    </ContentPage.BindingContext>

    <ScrollView>
        <VerticalStackLayout
            Margin="0,20"
            Padding="10,0"
            Spacing="10">
            <Label Text="{Binding Health.RecordDate, StringFormat='{0:yyyy年MM月dd日(ddd)}'}"  
                   HorizontalOptions="Center" 
                   FontSize="20"/>

            <HorizontalStackLayout
                HorizontalOptions="Center">
                <Slider x:Name="slider"
                        WidthRequest="150"
                        Minimum="0" Maximum="5"
                        Value="{Binding Health.HeartNumber}"/>

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <Label Grid.Column="0" Style="{StaticResource LabelStyle}" IsVisible="{Binding Health.IsVisibleHeart1}"/>
                    <Label Grid.Column="1" Style="{StaticResource LabelStyle}" IsVisible="{Binding Health.IsVisibleHeart2}"/>
                    <Label Grid.Column="2" Style="{StaticResource LabelStyle}" IsVisible="{Binding Health.IsVisibleHeart3}"/>
                    <Label Grid.Column="3" Style="{StaticResource LabelStyle}" IsVisible="{Binding Health.IsVisibleHeart4}"/>
                    <Label Grid.Column="4" Style="{StaticResource LabelStyle}" IsVisible="{Binding Health.IsVisibleHeart5}"/>
                </Grid>
            </HorizontalStackLayout>

            <Button Text="OK" HorizontalOptions="End" 
                    Margin="100,0"
                    WidthRequest="80"
                    Command="{Binding SaveCommand}"/>

            <HorizontalStackLayout
                HorizontalOptions="Center">
                <DatePicker MinimumDate="2024/01/01"
                            MaximumDate="{Binding EndDate}"
                            Date="{Binding StartDate}"
                            Format="yyyy/MM/dd"
                            FlowDirection="LeftToRight" />

                <Label Text="～"  VerticalOptions="Center" />

                <DatePicker MinimumDate="2024/01/01"
                            MaximumDate="{Binding Health.RecordDate}"
                            Date="{Binding EndDate}"
                            Format="yyyy/MM/dd"
                            FlowDirection="LeftToRight" />
            </HorizontalStackLayout>

            <lvc:CartesianChart HorizontalOptions="Center"
                                WidthRequest="400"
                                HeightRequest="200"
                                Series="{Binding HealthGraph.Series}" 
                                XAxes="{Binding HealthGraph.XAxes}"/>
            
            <HorizontalStackLayout
                HorizontalOptions="Center"
                Spacing="5">
                <DatePicker MinimumDate="2024/01/01"
                            MaximumDate="{Binding Health.RecordDate}"
                            Date="{Binding SelectedDate}"
                            Format="yyyy/MM/dd"
                            FlowDirection="LeftToRight" />

                <Label Text="を変更する"  VerticalOptions="Center" />

                <Button Text="GO"
                        WidthRequest="80"
                        Command="{Binding EditCommand}"/>

            </HorizontalStackLayout>
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>
```

[画面読み込み時にLoadメソッドを呼ぶ](https://qiita.com/GOROGOROMOGUMOGU/items/fd5a28e2f634f0574728#%E3%83%A1%E3%82%A4%E3%83%B3%E7%94%BB%E9%9D%A2%E3%81%AEviewmodel%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B) について、Appearingイベントで呼び出すようにする
```diff_c:MainPage.xaml.cs
    public partial class MainPage : ContentPage
    {
        /// <summary>
        /// コンストラクタ
        /// </summary>
        public MainPage()
        {
            InitializeComponent();
        }

+        /// <summary>
+        /// Appearingイベント処理
+        /// </summary>
+        /// <param name="sender"></param>
+        /// <param name="e"></param>
+        private async void ContentPage_Appearing(object sender, EventArgs e)
+        {
+            if (BindingContext is MainViewModel viewModel)
+            {
+                await viewModel.Load();
+            }
+        }
+    }
```
# HealthEditPageのレイアウトを実装する
編集画面のレイアウトはこんな感じ ※[アプリ構成図参照](https://qiita.com/GOROGOROMOGUMOGU/items/6b79aa9b1c83261957c3#%E3%82%A2%E3%83%97%E3%83%AA%E6%A7%8B%E6%88%90%E5%9B%B3)

![編集画面.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3674221/da953f60-2fcc-5597-48ff-ac6d9cc456ce.png)
```xml:HealthEditPage.xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewModels="clr-namespace:MauiApp1.ViewModels"
             x:Class="MauiApp1.Views.HealthEditPage">
    
    <ContentPage.BindingContext>
        <viewModels:HealthEditViewModel />
    </ContentPage.BindingContext>

    <ScrollView>
        <VerticalStackLayout
            Margin="0,20"
            Padding="30,0"
            Spacing="25">
            <Label Text="{Binding SelectedDate, StringFormat='{0:yyyy年MM月dd日(ddd)}'}"  
                   HorizontalOptions="Center" 
                   FontSize="20"/>

            <HorizontalStackLayout
                HorizontalOptions="Center"
                Spacing="20">
                <Slider x:Name="slider"
                        WidthRequest="150"
                        Minimum="0" Maximum="5"
                        Value="{Binding Health.HeartNumber}"/>

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <Label Grid.Column="0" Style="{StaticResource LabelStyle}" IsVisible="{Binding Health.IsVisibleHeart1}"/>
                    <Label Grid.Column="1" Style="{StaticResource LabelStyle}" IsVisible="{Binding Health.IsVisibleHeart2}"/>
                    <Label Grid.Column="2" Style="{StaticResource LabelStyle}" IsVisible="{Binding Health.IsVisibleHeart3}"/>
                    <Label Grid.Column="3" Style="{StaticResource LabelStyle}" IsVisible="{Binding Health.IsVisibleHeart4}"/>
                    <Label Grid.Column="4" Style="{StaticResource LabelStyle}" IsVisible="{Binding Health.IsVisibleHeart5}"/>
                </Grid>
            </HorizontalStackLayout>

            <HorizontalStackLayout
                HorizontalOptions="Center"
                Spacing="20">
                <Button Text="OK" 
                    WidthRequest="80"
                    Command="{Binding SaveCommand}"/>

                <Button Text="戻る" 
                    WidthRequest="80"
                    Command="{Binding ReturnCommand}"/>

            </HorizontalStackLayout>
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>
```
# 共通スタイルを定義する
スライダー右横の💛のスタイルをStyles.xamlに追加する
※Styles.xamlは「MauiApp1\Resources\Styles」にあります。
```diff_xml:Styles.xaml
<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    ・・・省略・・・
+    <Style x:Key="LabelStyle" TargetType="Label">
+        <Setter Property="Text" Value="💛" />
+        <Setter Property="FontSize" Value="14" />
+        <Setter Property="VerticalOptions" Value="Center" />
+    </Style> 
</ResourceDictionary>
 ```

# 画面遷移できるようにする
HealthEditPageをAppShellに登録する
```diff_xml:AppShell.xaml
<Shell
    x:Class="MauiApp1.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp1.Views"
    Shell.FlyoutBehavior="Disabled"
    Title="MauiApp1">

    <ShellContent
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />
    
+    <ShellContent
+        ContentTemplate="{DataTemplate local:HealthEditPage}"
+        Route="HealthEditPage" />
</Shell>
```
```diff_c:AppShell.xaml.cs
    public AppShell()
    {
        InitializeComponent();
+       Routing.RegisterRoute("HealthEditPage", typeof(Views.HealthEditPage));
    }
```
# 参考にしたURL
[.NET MAUI チュートリアル](https://learn.microsoft.com/ja-jp/dotnet/maui/tutorials/notes-app/?view=net-maui-8.0)
[.NET MAUI コントロール](https://learn.microsoft.com/ja-jp/dotnet/maui/user-interface/controls/?view=net-maui-8.0)
[LiveCharts2を使ってグラフを表示する](https://marunaka-blog.com/net-maui-livecharts2/8173/)
# まとめ
今回はViewのレイアウトを実装しました。
最後にすべて繋げて動作させます。
[.NET MAUIとCleanArchitectureで簡単なアプリを作成してみる4～実装6～](https://qiita.com/GOROGOROMOGUMOGU/items/ff9df6f8f1c8eb41b2cb)