February 2014 – garicchi.com

アプリに設定を追加するには

2014-02-20
技術資料

SettingsFlyout

Windows8.1からSettingsFlyoutが追加できるようになりました。

プロジェクトを右クリック→追加→新しい項目を選択します。

Windowsストアの項目からポップアップの設定を選択し、追加を押します。

呼び出し方はShowメソッドか、ShowIndependentメソッドをよびだします。前者はFlyoutのバックボタンを押した時に設定チャームを表示し、後者は表示しません。

SettingsFlyout1 flyout = new SettingsFlyout1();
            flyout.ShowIndependent();

1 2	SettingsFlyout1 flyout = new SettingsFlyout1(); flyout.ShowIndependent();

設定チャームから呼び出す

チャームの設定の項目から呼び出すこともできます。

App.xaml.cs内のOnLaunchedメソッド内のif(rootFrame==null){}内に以下の文を追加します。

SettingsCommand command = new SettingsCommand("command1", "setting", (args) =>
{
    SettingsFlyout1 flyout = new SettingsFlyout1();
    flyout.Show();
});

SettingsPane.GetForCurrentView().CommandsRequested+=(s,ee)=>
{
    ee.Request.ApplicationCommands.Add(command);
};

SettingsCommand command = new SettingsCommand("command1", "setting", (args) =>

{

SettingsFlyout1 flyout = new SettingsFlyout1();

flyout.Show();

});

SettingsPane.GetForCurrentView().CommandsRequested+=(s,ee)=>

{

ee.Request.ApplicationCommands.Add(command);

};

チャームから設定項目を呼び出すと、先ほど作ったコマンドが追加されています。

アプリ内検索をするには

2014-02-20
技術資料

SearchBox

Windows8ではチャームから検索を行っていましたがWindows8.1からはSearchBoxというコントロールが登場し、このコントロールを使用することで検索を行います。

ツールボックスからSearchBoxをドラッグアンドドロップします。

FocusOnKeyboardInputをTrueにすることでキーボードから入力をした瞬間にSrearchBoxにフォーカスが入ります。

<SearchBox x:Name="searchBox" FocusOnKeyboardInput="True"  Margin="393,256,743,474" QuerySubmitted="searchBox_QuerySubmitted"/>

1	<SearchBox x:Name="searchBox" FocusOnKeyboardInput="True" Margin="393,256,743,474" QuerySubmitted="searchBox_QuerySubmitted"/>

QuerySubmittedイベントを処理することによってどのような検索ワードが入力されたのかを受け取ることができます。

private void searchBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args)
{
    string query = args.QueryText;
}

private void searchBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args)

{

string query = args.QueryText;

}

SemanticZoomを行うには

2014-02-20
技術資料

SemanticZoomとは

セマンティックズームとは複数項目を表示するListViewやGridView、Hubにおいてピンチイン、ピンチアウトのジェスチャをすることで項目の表示範囲を変えることができる機能のことです。

Windows8でもスタート画面にセマンティックズームが使われています。

ズームイン時

ズームアウト時

SemanticZoomの実装方法

SemanticZoomは、ISemanticZoomInformationインターフェースを実装しているコントロールでないとできません。

WindowsRuntimeでは、ListViewと、GridView、そしてHubが対応しています。

SematicZoomコントロール内の

ZoomInViewプロパティ内にズームイン時の表示方法を、

ZoomOutViewプロパティ内にズームアウト時の表示方法を記述します。

今回はZoomIn時はGridViewを、ZoomOut時はListViewを表示させるようにしてみましょう。

<SemanticZoom>
    <SemanticZoom.ZoomedInView>
        <GridView x:Name="gridView">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Button Content="{Binding}" Width="200" Height="200" Foreground="Red" />
                </DataTemplate>
             </GridView.ItemTemplate>
        </GridView>
    </SemanticZoom.ZoomedInView>
    <SemanticZoom.ZoomedOutView>
        <ListView x:Name="listView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Button Content="{Binding}" Width="200" Height="100" Foreground="#FF00FF68" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </SemanticZoom.ZoomedOutView>
</SemanticZoom>

<SemanticZoom.ZoomedInView>

<GridView.ItemTemplate>

</DataTemplate>

</GridView.ItemTemplate>

</GridView>

</SemanticZoom.ZoomedInView>

<SemanticZoom.ZoomedOutView>

<ListView.ItemTemplate>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</SemanticZoom.ZoomedOutView>

</SemanticZoom>

ズームイン時とズームアウト時に同一のコンテンツを表示するためにListViewとGridViewの両方のItemsSourceプロパティに同一のコレクションを指定します。

List<string> ItemList = new List<string>() {"あ","い","う","え","お" };
public MainPage()
{
    this.InitializeComponent();
    this.gridView.ItemsSource = ItemList;
    this.listView.ItemsSource = ItemList;
}

List<string> ItemList = new List<string>() {"あ","い","う","え","お" };

public MainPage()

{

this.InitializeComponent();

this.gridView.ItemsSource = ItemList;

this.listView.ItemsSource = ItemList;

}

アプリバーにトグルボタンを設置するには

AppBarToggleButton

OnかOffの状態を記憶するトグルボタンをアプリバーに置くことができます。ツールボックスからアプリバーにAppBarToggleButtonをドラッグアンドドロップします。

OnかOffかを取得、設定する

OnかOffかを取得または設定するにはIsChecked.Valueで取得できます。

IsChecked自体はnull許容型bool?なのでValueで中身を取り出す必要があります。

if (this.appbarToggle.IsChecked.Value)
{

}

if (this.appbarToggle.IsChecked.Value)

{

}

アプリバーに複数の項目を追加するには

2014-02-20
技術資料

StackPanelを追加する

複数の項目を表示するにはPanelを継承するコントロールの上でないと複数項目を置くことができません。

アプリバーを選択した状態でツールボックスからStackPanelをドラッグアンドドロップします。

StackPanelのOrientationプロパティをHorizontalにしましょう。

<AppBar>

<StackPanel Orientation="Horizontal">

</StackPanel>

</AppBar>

</StackPanel>

</AppBar>

あとは同じようにAppBarButtonなどをドラッグアンドドロップすれば複数項目を表示することができます。

セパレータで区切る

AppBarSeparatorを追加するとそこで項目を視覚的に区切ることが可能です。

<AppBarButton HorizontalAlignment="Stretch" Label="AppBarButton" VerticalAlignment="Stretch">
<AppBarButton.Icon>
<SymbolIcon/>
</AppBarButton.Icon>

</AppBarButton>
<AppBarSeparator Height="100" Width="100"/>
<AppBarButton HorizontalAlignment="Stretch" Label="AppBarButton" VerticalAlignment="Stretch">
<AppBarButton.Icon>
<SymbolIcon/>
</AppBarButton.Icon>
</AppBarButton>

<AppBarButton.Icon>

</AppBarButton.Icon>

</AppBarButton>

<AppBarButton.Icon>

</AppBarButton.Icon>

</AppBarButton>

garicchi.com

Blog

アプリに設定を追加するには

SettingsFlyout

設定チャームから呼び出す

アプリ内検索をするには

SearchBox

SemanticZoomを行うには

SemanticZoomとは

SemanticZoomの実装方法

アプリバーにトグルボタンを設置するには

AppBarToggleButton

OnかOffかを取得、設定する

アプリバーに複数の項目を追加するには

StackPanelを追加する

セパレータで区切る

Recent Posts

Tags