EP 27: MockData come back with UI design in TopStore App

Hello, 各位 iT邦帮忙 的粉丝们大家好~~~

本篇是 Re: 从零开始用 Xamarin 技术来复刻过去开发的一个 App: TopStore 系列文的 EP27。

上一篇 EP26 谈到把 MockData 跟 DbService 透过 IDbService 的介面来完成做展示资料与实际资料作切换，不知是否有朋友想知道如何运用结合在 App 的实际操作上呢?

本篇 EP27 就来介绍介绍罗!

首先，来打开 SettingsPage.xaml 来编辑一下相关的 XAML 标记。

改成一个 Grid 为页面的 RootLayout，并在 Grid 第一列设计 Frame 於其中显示。

接着放了一个 Switch 并且将其 x:Name 命名为 dataChoiceSwitch，也针对其 Toggled 事件设定了其事件处理常式。

另外，再针对 Frame 的标记当中设计部分画面格式的标记。

在其 Frame 的标记中所使用的 Label 文字显示，有运用到先前 EP12、EP17 等，介绍 XAML 标记的有关 Binding(系结) 的特殊处理的部分。

其用意是让 Label 的文字显示上能呼应使用者在 switch 的 "开/关" 操作时，让其显示的文字更加准确，若有兴趣的捧友可以再回顾一下唷!

这里稍微注意一下，前面的 XAML 编辑中有设定 Switch 的 Toggled 事件的事件处理常式，所以理论上在 SettingPage.xaml.cs 要看到这个事件处理常式的撰写。

再针对 SettingsPage 覆写其 OnAppearing 方法。

首先针对 OnAppearing 方法撰写如下程序。

再针对先前的 DataSwitch_Toggled 的事件处理常式撰写如下程序。

而因为 DisplayAlert 是非同步方法，所以要再加上 async/await 的关键字的运用。

最後，打开 App.xaml.cs 将原本 App 建构式当中的程序改成如下。

接下来就可以在双平台 (iOS、Android) 当中执行看看!

第一次执行起 App 时由於 Preferences 记录上的值会为 "false"，所以会读取到原本 MockData 设计的假资料。

在 App 当中切换到 SettingsPage。

将其中的 switch 作切换到 "开"。

点选 "确定"，进行切换 Data 来源。(若点选取消，会回到原本的设定)

Alert 提醒使用者需 "手动" 重新启动 App。

将 App 从背景执行中移除。

再次启动 App 回到 SQLite DB 的资料载入到 App 当中。(在 EP26 中所建立的资料)

这样 EP27 的介绍就大功告成罗~~~

有兴趣的朋友，可以在 App 中再切到 SettingsPage 当中把 swtich 的设定改回 "关"，然後再次重新开启 App (记得也要把 App 从背景执行移除)。

再次打开 App 就会看到 MockData 的资料又载入回来罗!

下一篇 EP28 见罗!

嘛砂优枷~~~