[応用編]RSSリーダーWindows Phoneアプリの作り方：Silverlightベースで作るWP7アプリ開発入門（6）（3/5 ページ）

[泉本優輝，WP Arch] PC用表示関連情報

LINE

Hatena

前のページへ | 次のページへ

WPToolkitのWrapPanel、HubTile、TiltEfectを使う

　使用するコントロールは「WrapPanel」「HubTile」「TiltEfect」です。

「WrapPanel」「HubTile」コントロール

　まずは、1つ目のPanoramaItemにHubTileを表示させます。

　WPToolkitをダウンロードし、Microsoft.Phone.Controls.Toolkit.dllを参照に追加します。

　1番目の「PanoramaItem (home)」の中にあるListBoxを削除し、WrapPanelに変更します。

　WrapPanelの中にHubTileを2つ置きます。すると、このようになります。

HubTileの作成

　HubTileのTitleプロパティを設定しましょう。WPToolkitにあるコントールの中には、Expression Blendのパネルに表示されないプロパティを持っているコントロールがあります。HubTileも、その1つです。

　Expression BlendのXAMLエディタから、HubTileのTileプロパティをBindingで取得するよう追記します。

<controls:PanoramaItem Header="home">
   <toolkit:WrapPanel>
      <toolkit:HubTile Title="{Binding Header,ElementName = smartsocial}" Height="Auto" Width="Auto"/>
      <toolkit:HubTile Title="{Binding Header,ElementName = core}" Height="Auto" Width="Auto"/>
   </toolkit:WrapPanel>
</controls:PanoramaItem>

　次に、用意した画像をSourceプロパティに設定します。

sumaso.png

core.png

　すると、アニメーション付きのタイルが表示されるようになりました。

画像とタイトルを適用したHubTile

　今回は、このHubTileをToggleButtonとして扱い、CheckedのときはPanoramaItemsの表示を、そうでない場合は非表示となるように作成します。そのため、ButtonコントロールのContentをTextBlockにしたように、ToggleButtonの中にHubTileを置き、レイアウトを整えました。

HubTileのToggleButton

「TiltEfect」コントロール

　最後に、TiltEfectを有効化します。今回は、TiltEfectに適応し、アプリ内にあるすべてのコントロールにTiltEfectを掛けるので、PhoneApplicationPageにTiltEfectを有効化します。

<phone:PhoneApplicationPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
  d:DesignWidth="480" d:DesignHeight="800" 
    x:Class="atItRSS.MainPage"
    d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
    mc:Ignorable="d"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="False"
    toolkit:TiltEffect.IsTiltEnabled="True">