はじめに
こんにちは、@hiro128_777です。
とうとう iPhone 12 が発売されましたね。でも、Surface Duo も忘れないでください。Surface Duo 日本での発売はまだですが、すでに、エミュレーターで疑似体験することは可能です。
というわけで、10月27日(火)に、エミュレーターで Surface Duo 対応アプリを体験するオンラインハンズオンを開催いたします!
こちらは、簡単な Surface Duo のエミュレーターで動作するマルチスクリーン対応アプリを作って体験していただけるコンテンツになっていますので、ご興味がある方はぜひご参加下さい!
この記事は(3)ですので、最初から手順をお試しになる場合は下記の(1)からお願いします。
hiro128.hatenablog.jp
(2)は下記からお願いします。
hiro128.hatenablog.jp
今回やること
ViewModel と Service を紐づけてアプリを完成させます。
ViewModel と Service を紐づける
ViewModel と Service を紐づけるコードを追記していきます。
なお、このサンプルはコードをシンプルにし、Dual Screen の動作をわかりやすくするために、 DI などコードの量が増える手法はあえて省いています。
MasterDetailPage.xaml.cs を修正
// 追記
の部分を追記してください。
bool IsSpanned => DualScreenInfo.Current.SpanMode != TwoPaneViewMode.SinglePane; DetailsPage detailsPagePushed; MasterViewModel masterViewModel; // 追記 DetailsViewModel detailsViewModel; // 追記 public MasterDetailPage() { InitializeComponent(); NavigationPage.SetHasNavigationBar(this, IsSpanned); detailsPagePushed = new DetailsPage(); masterViewModel = masterPage.BindingContext as MasterViewModel; // 追記 masterViewModel.SetupViewsAction = () => SetupViews(); // 追記 detailsViewModel = masterViewModel.DetailsViewModel; // 追記 detailsPagePushed.BindingContext = detailsViewModel; // 追記 detailsPage.BindingContext = detailsViewModel; // 追記 }
Master.xaml.cs を修正
// 追記
の部分を追記してください。
public Master() { InitializeComponent(); BindingContext = new MasterViewModel(new DetailsViewModel()); // 追記 }
View から確認用の マークアップ を消去
<!-- 確認用(後ほど消去する)ここから -->
から<!-- 確認用(後ほど消去する)ここまで -->
の部分を消去してください。
<Picker Title="路線を選択して下さい" Margin="10" HeightRequest="60" FontSize="Large" HorizontalOptions="Fill" VerticalOptions="Fill" ItemsSource="{Binding LineItems}" SelectedItem="{Binding SelectedLineItem, Mode=TwoWay}" > </Picker> <!-- 確認用(後ほど消去する)ここから --> <Label FontSize="Title" TextColor="Coral" Text="Master" HorizontalOptions="CenterAndExpand"> </Label> <!-- 確認用(後ほど消去する)ここまで --> <CollectionView x:Name="Stations" ItemsSource="{Binding StationItems}" SelectionMode="Single" SelectedItem="{Binding SelectedStationItem, Mode=TwoWay}" SelectionChangedCommand="{Binding SelectStationCommand}" >
Details.xaml から確認用の マークアップ を消去
<!-- 確認用(後ほど消去する)ここから -->
から<!-- 確認用(後ほど消去する)ここまで -->
の部分を消去してください。
<Label BackgroundColor="White" FontSize="Title" Grid.Column="1" Grid.Row="1" Text="{Binding Name}" VerticalTextAlignment="Center" > </Label> </Grid> <!-- 確認用(後ほど消去する)ここから --> <Label FontSize="Title" TextColor="Coral" Text="Detail" HorizontalOptions="CenterAndExpand"> </Label> <!-- 確認用(後ほど消去する)ここまで --> <StackLayout BackgroundColor="White" Padding="5">
以上でコードは完成です。
デバッグ実行し、Dual Screen でアプリが動作するか確認する
Dual Screen で表示させるためには以下の動画の手順でアプリをスパンしてください。
Surface Duo Span 操作
youtu.be
上記の動画のように、路線と駅が選択でき、時刻が表示されればサンプルアプリは完成です。
今回は以上です。