.NET MAUIとCleanArchitectureで簡単なアプリを作成してみる4～実装4～の続き
MainPageのレイアウトを実装する
メイン画面のレイアウトはこんな感じ ※アプリ構成図参照
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のレイアウトを実装する
編集画面のレイアウトはこんな感じ ※アプリ構成図参照
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～