設定パネルは、パネルの奇跡の対応する「設定」ボタンによってアクティブになります。
ユーザーは、アプリケーション設定を制御するために、いつでもこのパネルにアクセスできます。 (たとえば、場所を特定する機能を無効にします)。
ユーザーにアプリケーション自体の設定を探す場所を考えさせずに、アプリケーションの設定を同じパネルに配置することはまったく論理的です。
この記事では、2つのトピックを検討します。
設定契約のサポートの追加
独自の設定パネルを追加します。
設定契約のサポートの追加
設定の統合の例は公式例にあります:
アプリ設定サンプル
できるだけ簡単に契約サポートを実装する方法を考えてみましょう。
OnNavigateToメソッドとOnNavigateFromメソッドのページで、設定リクエストイベントにサブスクライブし、ページを離れるときにイベントのサブスクライブを解除します。
protected override void OnNavigatedTo(NavigationEventArgs e) { SettingsPane.GetForCurrentView().CommandsRequested += Settings_CommandsRequested; } protected override void OnNavigatedFrom(NavigationEventArgs e) { SettingsPane.GetForCurrentView().CommandsRequested -= Settings_CommandsRequested; }
SettingsPaneはWindows.UI.ApplicationSettings名前空間にあるため、ページヘッダーには対応する名前空間宣言を含める必要があります。
using Windows.UI.ApplicationSettings;
ユーザーが奇跡パネルの設定パネルをアクティブにすると、CommandsRequestedイベントが発生します。 ユーザーに提供するコマンドのリストを返す必要があります。 たとえば、AboutとSay Hello!の2つのコマンドを追加します。最初のコマンドはAboutページにリダイレクトされ、2番目のコマンドはダイアログボックスを表示します。
void Settings_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args) { var viewAboutPage = new SettingsCommand("", "About", cmd => { (Window.Current.Content as Frame).Navigate(typeof (AboutPage)); }); args.Request.ApplicationCommands.Add(viewAboutPage); var sayHelloCommand = new SettingsCommand("", "Say Hello!", cmd => { new MessageDialog("Hello! World!").ShowAsync(); }); args.Request.ApplicationCommands.Add(sayHelloCommand); }
すべてを正しく行った場合、コマンドを含む次のパネルが表示されます。
この場合、Permissionsアイテムは常に使用可能であり、ユーザーはいつでもそこにアクセスしてセキュリティ設定を管理できます。
独自の設定パネルを追加する
多くの場合、複数のボタンが必要です。
おそらくパネルでは、ToggleSwitch、Slider、Combobox、またはその他のコントロールを使用します。
最も単純なバージョンでは、アプリケーション設定が含まれている別のページへの移行を整理できます。 ただし、ユーザーがこのページにとどまり、サイドカスタムパネルで適切な設定を行うだけの方が便利かもしれません。
そのようなパネルの例は、「Permissions」コマンドによってほとんどすべてのアプリケーションで見ることができます:
WinRT APIは既製のパネルを提供しませんが、独自のパネルの実装は非常に単純であり、いくつかのソリューションが見つかります。
特に、 ここで説明したソリューションを活用しました 。 実装が異なるという事実にもかかわらず、ソリューションの主なアイデアはそこから取られています。
まず、必要なすべての設定を含むUserControl(UC)を追加する必要があります。AppSettingsPanelと呼びましょう
UCでは、次のコードを実装します。
<UserControl .... Width="350"> <Grid Background="DarkGreen" Margin="0"> <Grid Margin="0" Height="78" VerticalAlignment="Top" Background="Green"> <Button HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Style="{StaticResource PreviousAppBarButtonStyle}" Click="ButtonGoBack_Click"/> </Grid> <ToggleSwitch Header="Enable details view" Margin="10,83,0,0" VerticalAlignment="Top" /> </Grid> </UserControl>
350の値は、設定パネルの幅にほぼ等しく選択されました。必要に応じて、希望の値を指定できます。
ハンドラーで、戻るボタンに次のコードを記述します。
private void ButtonGoBack_Click(object sender, RoutedEventArgs e) { if (this.Parent is Popup) { (this.Parent as Popup).IsOpen = false; } SettingsPane.Show(); }
ユーザーが「戻る」を押すと、現在のパネルが非表示になり、設定パネルが再び開きます
次に、プロジェクトに小さな補助クラスを追加します。
public class CustomPanelCommand { private readonly SettingsCommand command; public CustomPanelCommand(UserControl parentPage, string label, Type typeOfPanel) { command = new SettingsCommand("", label, (cmd) => { customSettingsPopup = new Popup() { IsLightDismissEnabled = true, Height = parentPage.ActualHeight }; customSettingsPopup.Closed += customSettingsPopup_Closed; Window.Current.Activated += Current_Activated; var panel = Activator.CreateInstance(typeOfPanel) as UserControl; panel.UpdateLayout(); customSettingsPopup.Width = panel.Width; customSettingsPopup.Height = panel.Height = parentPage.ActualHeight; customSettingsPopup.Child = panel; customSettingsPopup.SetValue(Canvas.LeftProperty, parentPage.ActualWidth - customSettingsPopup.Width); customSettingsPopup.IsOpen = true; }); } public SettingsCommand GetCommand() { return command; } private Popup customSettingsPopup; void customSettingsPopup_Closed(object sender, object e) { Window.Current.Activated -= Current_Activated; } void Current_Activated(object sender, Windows.UI.Core.WindowActivatedEventArgs e) { if (e.WindowActivationState == Windows.UI.Core.CoreWindowActivationState.Deactivated) { customSettingsPopup.IsOpen = false; } } }
さて、このヘルパークラスの助けを借りて、カスタムパネルまたはページごとに個別の設定パネルを持ついくつかのボタンを追加できます。
この補助クラスを使用して、「my custom settings」ボタンを使用してパネルを表示するコードをページに追加します
void Settings_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args) { var customCommand =new CustomPanelCommand(this, "My custom settings", typeof (AppSettingsPanel)).GetCommand(); args.Request.ApplicationCommands.Add(customCommand); }
ここで、設定を有効にして「カスタム設定」項目を選択すると、次のパネルが表示されます。
記事のソースコードはこちらからダウンロードできます。