Windows8のC#で設定チャーム(Settings charm)の実装をし調べたのでメモです。Windows Phoneのように画面全体のPageで作ると思っていたのですが、チャーム(Charm)で表現する必要があるようですね。でも、標準で用意されているチャームのコントロールが見つからないのです。。。
では、どうしたらよいのかと思い探していると、自作のユーザコントロールで設定チャームを実装している例がありました。基本はこのような実装になるんですね。
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh872190.aspx
更に調べてみるとチャームをCharmFlyoutライブラリのコントロールで実装している例もありました。今回はこのCharmFlyoutを使用して設定チャームをアプリに実装してみます。
http://code.msdn.microsoft.com/windowsapps/CharmFlyout-A-Metro-Flyout-25fe53b6
http://w8isms.blogspot.jp/2012/08/charmflyout-supporting-sub-flyouts.html
VisualStudioでProjectを作成
今回は簡単にサンプルとして作成しますので、Blank Appを選びます。
![Capture Capture](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijvS9jkOWw8tj6Yqis7Jz1kTRAoOZ4kKGfKqAILEPg1LQJPutbJN7Uf1Guso9pL2HY3zx_fGrf65PDxpxZDYJjYyUYxqaTUw0EDo8X1wyA5O-SbobmEMvcHCnnBBa2S9-SgQuPa2VMS0g/?imgmax=800)
VisualStudioのNuGetでCharmFlyoutをインストール
VisualStudioの「Project」メニューから「Manage NuGet Packages」を選択します。
![Capture02 Capture02](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL3-wRLiAiMKdmOVM3y_xNz0aDpla1OrLZiGqeblNWSAR4Ch3Eb9kPKvog1NEeL76EjAmausNyNzEGdvsQC9T57_H9IgRbDpHwyMFC_zwVVO-yar9TnfcZ_zgg_4L6RgxRCUhyphenhyphenOtmXJ9M/?imgmax=800)
左上から「Online」を選択し、右上の検索ボックスから「CharmFlyout」を入力して、CharmFlyoutライブラリを探します。ライブラリが見つかったら「Install」をクリックしてインストールします。
![Capture04 Capture04](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiWNvKBeLmEvcB6UZfowNdf60JUM4HImQZ8_PZdKC4TYMCh7hNa3dZpVzV6gVbTDvhL5l8k3fT86kRzmcImVdaZux0LgEsdVLrs-A4Pl_DPdC8wSqa8UBOLLrqpSeo5pg-GxXo9VnrDGk/?imgmax=800)
Blendでチャーム作成
インストールが完了したら、MainPage.xamlをBlendで編集します。Blendが起動したら、左上の検索ボックスから「CharmFlyout」を見つけて「[Grid]」の中にCharmFlyoutを持っていきます。
CharmFlyoutコントロールの名前を「OptionsCharm」に変えて、右上の「HeadingBackgroundBrush」でチャームの色を決めます。「Width」「Height」はAuto、「HorizontalAlignment」「VerticalAlignment」は一番右を選択。
![Capture07 Capture07](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVSA-cGiAr2Y7qQJOusDETxu9lXrwUWf4Sdifky-2eciBVcOiH0MWqSiKvI3j3AB6om69sSNrtUxku3yNxT-WcHiMVCcJj_1AcytxqqmAoPICmp7jT_tvLSkq3fZmpI3cyIX4Fubmm_UA/?imgmax=800)
右下の「Heading」にはチャームのタイトル名「Options」を設定します。
![Capture08 Capture08](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaeD3XXO8aX_nEdgoUDuM6fMHYv_mHy3tEkVRyg-aD43KGodMjuu5P747HjjhgPoRmzCNDVhAbDUblTknmmiZhBXBbHgGmLLqsrDHDzHVNo-bmHr3C7oEfEW8u6C1qwNJN2ocrq3jDayU/?imgmax=800)
CharmFlyoutにStackPanelを入れてTextBlockとかを入れてみます。
![Capture09 Capture09](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqHAYVPmxIy29PzzZc1qNxf97dx3rCTqp1A1ixeR5CtZwTAmvzI7QQbhzWTbbzihpm3zDvhEJeJrxdNtLgoqEWlZ3bpnK4WUGVlbpoP-NaclBNpJ-Wc9cyIKojpOSKFsJSi4kBn3glkzQ/?imgmax=800)
MainPage.xamlは以下のような感じになりました。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CharmFlyoutSample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:CharmFlyoutLibrary="using:CharmFlyoutLibrary"
x:Class="CharmFlyoutSample.MainPage"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<CharmFlyoutLibrary:CharmFlyout x:Name="OptionsCharm" Heading="Options" HeadingBackgroundBrush="#FFFF8000">
<StackPanel>
<TextBlock TextWrapping="Wrap" Text="TextBlock"/>
<TextBlock TextWrapping="Wrap" Text="TextBlock"/>
</StackPanel>
</CharmFlyoutLibrary:CharmFlyout>
</Grid>
</Page>
VisualStudioでチャームの動作を書く
設定チャームへの登録や、チャームのフライアウトを行うMainPage.xaml.csは以下のようになります。
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.ApplicationSettings;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace CharmFlyoutSample
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
SettingsPane.GetForCurrentView().CommandsRequested += MainPage_CommandsRequested;
}
void MainPage_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
{
args.Request.ApplicationCommands.Add(new SettingsCommand("options", "Options", (p) => { OptionsCharm.IsOpen = true; }));
}
/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name="e">Event data that describes how this page was reached. The Parameter
/// property is typically used to configure the page.</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
}
}
動作確認
Optionsが登録さてていることを確認します。
![Capture10 Capture10](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT-P7RYRrjm7aAfbQjlJE3wAEC9dAAU_5B0ONCruT9V2tK-rfS5aM86vADquu2GMM2uh4tPqy8nEaKrX0tIPpR2Uf9cE3QiIlt_PAOm8XvqEWdKUX2VRlqOdawoiGtIqW-zT2mF4YhFnA/?imgmax=800)
Optionsを選択すると今回作成したチャームが表示されます。
![Capture11 Capture11](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje1I0_0Jt394KcW-brEdRxjLGF7M1BriPQu-mi0ACsKCo6-JDV__kLTOt9hF8oyEplBBdWqht8NUONib4F9GzbIDk4s4Kbpxj3TlP4GlvyYEwDcW67x0RLOCjPaQIuY9kO1lnFm54Yejw/?imgmax=800)
CharmFlyoutを使うと簡単にチャームを作ることができますね。