LoginSignup
1
1
@GOROGOROMOGUMOGU(GOROGORO MOGUMOGU)

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

Last updated at Posted at 2024-01-22

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

MainPageのレイアウトを実装する

メイン画面のレイアウトはこんな感じ ※アプリ構成図参照

メイン画面.PNG

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メソッドを呼ぶ について、Appearingイベントで呼び出すようにする

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のレイアウトを実装する

編集画面のレイアウトはこんな感じ ※アプリ構成図参照

編集画面.PNG

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」にあります。

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に登録する

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>
AppShell.xaml.cs
    public AppShell()
    {
        InitializeComponent();
+       Routing.RegisterRoute("HealthEditPage", typeof(Views.HealthEditPage));
    }

参考にしたURL

.NET MAUI チュートリアル
.NET MAUI コントロール
LiveCharts2を使ってグラフを表示する

まとめ

今回はViewのレイアウトを実装しました。
最後にすべて繋げて動作させます。
.NET MAUIとCleanArchitectureで簡単なアプリを作成してみる4～実装6～

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1