atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

その18:Searchパネルから値を取得する

Metro Style AppsにはShareの他にSearch機能があります。
Searchを使えば、アプリケーション外からアプリケーションに値を投げることができます。
挙動はこんなかんじ。

Shareと同じように、Searchパネルを表示するトグルボタンも作れます。

検索バーが出るので、テキストを入力してEnter
値がアプリ内のTextBlockに入ります。

もちろん、他のアプリケーションを開いているときでも検索できます。
Searchパネルでは検索したいアプリを選択して、検索できます。


では、実装しましょう。これも簡単です。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;

//Searchパネルを使いたい時にUsing
using Windows.ApplicationModel.Search;

namespace Application24
{
    partial class MainPage
    {
        SearchPane searchPane;

        public MainPage()
        {
            InitializeComponent();

            //Searchパネルのオブジェクトを作成
            this.searchPane = SearchPane.GetForCurrentView();
            
            //検索があった時のイベントを登録
            this.searchPane.QuerySubmitted += new TypedEventHandler<SearchPane, SearchPaneQuerySubmittedEventArgs>(this.OnQuerySubmitted);

        }

        public void OnQuerySubmitted(object sender, SearchPaneQuerySubmittedEventArgs args)
        {
            //引数で降ってくるテキストを取得
            tb.Text = args.QueryText;
        }

        private void Button_Tapped(object sender, Windows.UI.Xaml.Input.TappedEventArgs e)
        {
            //Searchパネルを表示非表示するボタン
            this.searchPane.Show();
        }
    }
}
<UserControl x:Class="Application24.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="768" d:DesignWidth="1366">
    
    <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button Tapped="Button_Tapped" Content="Show SeachPanel" Width="288" Height="100" HorizontalAlignment="Center" FontSize="30"></Button>
            <TextBlock Text="Seach Text" x:Name="tb" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="72"></TextBlock>
        </StackPanel>
    </Grid>
    
</UserControl>

最後に、Package.appmanifestのDeclarationsから、Searchパネルの利用を許可します。
これがないとビルドが通りません。

ところで、なんで形名がSearchPaneなんやろう。。。
これ絶対たいぽやとおもうねんけど(


追記:これペインってよむんだって!ありがとうございます!

http://eow.alc.co.jp/search?q=pane&ref=sa
英語よわいんがばれる。。。。!