kazuakix の日記

Windows Phone とか好きです

Windows Phone でユーザーコントロールを作ってみる (1)

Windows Phone

Windows Phone でユーザーコントロールを作る方法を確認しておきます。

題材は昨日のコイツ。

f:id:kazuakix:20140905234514j:plain,w240

TitleText プロパティにセットされたテキストを表示するだけのパネルです。

var popup = new Popup();
var panel = new PopupPanel() { TitleText = "Popup " + (this._popups.Count + 1) };
popup.Child = panel;

　

ユーザーコントロールの作成

何はともあれユーザーコントロールを作ります。

f:id:kazuakix:20140906000655j:plain,w400

今回は安直に PopupPanel.xaml としました。
　

プロパティの作成

コードを開いて PopupPanel クラスの中に TitleText プロパティを作っていきます。TitleText プロパティは内容が変更されたときに変更を画面にも反映したいので普通のプロパティではなく依存関係プロパティというものを作ります。

VS で propdp と入力して TAB を 2 回押すと依存関係プロパティのひな形が出てきます。正直、イチから書く気にはなれない内容ですが VS を使う事でお手軽に作ることができるようになっています。

f:id:kazuakix:20140906000702j:plain
f:id:kazuakix:20140906000707j:plain
　
まずはプロパティの型を string にします。型は何か所かに出てきますが、先頭の型を直すだけですべて同じ型に変更されます。

f:id:kazuakix:20140906000712j:plain

TAB を押してプロパティの名前に移ります。名前についていも何か所かに出てきますが、型と同じく先頭を直すだけで残りにも反映されます。

f:id:kazuakix:20140906000717j:plain
　
もう一度 TAB を押すと、ownerclass という項目の上で止まります。ここではこのプロパティを登録するクラスを指定しますので、自分自身である PopupPanel を指定します。

f:id:kazuakix:20140906000725j:plain
　
TAB 連打はこれで終わりですが、最後にもうひとつ。PropertyMetadata メソッドの引数で このプロパティのデフォルト値を指定しておきます。

f:id:kazuakix:20140906000730j:plain

このプロパティの型は string なので "" を指定しておきました。

コントロールのデザイン

ユーザーコントロールのデザインを作っていきます。例は TextBlock を Border で囲んだだけの単純なものです。

    <Border BorderBrush="{ThemeResource AppBarItemForegroundThemeBrush}" BorderThickness="1" Background="{ThemeResource AppBarItemForegroundThemeBrush}">
        <TextBlock Style="{StaticResource TitleTextBlockStyle}" Margin="12" FontFamily="Global User Interface" Foreground="{ThemeResource AppBarBackgroundThemeBrush}" />
    </Border>

　
デザインができたら最上位の UserContorol のプロパティで DataContext の右端の □ ボタンから「データバインディング の作成」を選んでバインディングの種類を RelativeSource Self (自分自身) に指定します。

f:id:kazuakix:20140906004022j:plain,w363
f:id:kazuakix:20140906004034j:plain,w363

これによりこのコントロール全体で自分自身のプロパティをデータソースに指定できるようになります。

　
続けて TextBlock の Text プロパティに対してもデータバインディングを作成します。
バインドの種類を データコンテキストにして、パスに TitleText と直接入力します。

f:id:kazuakix:20140906004049j:plain,w363

でも、どうせ入力するなら直接 XAML に書いた方がはやいかもしれませんね。

<TextBlock Text="{Binding TitleText}" ...

　
出来上がった XANL はこんな感じ。

<UserControl
    x:Class="App8.PopupPanel"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App8"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="80"
    d:DesignWidth="200" 
    DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}">

    <Border BorderBrush="{ThemeResource AppBarItemForegroundThemeBrush}" BorderThickness="1" Background="{ThemeResource AppBarItemForegroundThemeBrush}">
        <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="{Binding TitleText}" Margin="12" FontFamily="Global User Interface" Foreground="{ThemeResource AppBarBackgroundThemeBrush}" />
    </Border>
</UserControl>


これを冒頭のコードのような形で呼び出して使えるようになりました。