Lightテーマ/Darkテーマ用にPanoramaの背景画像をコードで切り替える方法

Theme aware panorama background in windows phone 7 | Jayway Team Blog – Sharing Experienceで紹介されている方法をざっくりと紹介。

Windows Phone 7 のパノラマコントロールの背景画像を、Lightテーマ、Darkテーマそれぞれに切り替えられるようにする方法が紹介されていました。

ViewModels/MainViewModel.csに以下のコードを追加。

public bool LightThemeEnabled
{
    get
    {
        return (Visibility)Application.Current.Resources["PhoneLightThemeVisibility"] == Visibility.Visible;
    }
}
public ImageBrush PanoramaBackgroundImage
{
    get
    {
        var url = LightThemeEnabled ? "Assets/PanoramaBackground_light.jpg" : "Assets/PanoramaBackground_dark.jpg";
        var brush = new ImageBrush
        {
            ImageSource = new BitmapImage(new Uri(url, UriKind.RelativeOrAbsolute))
        };
        return brush;
    }
}
public BitmapImage PageTitleImage
{
    get
    {
        var url = LightThemeEnabled ?
                  "/Assets/logo_on_light.png" :
                  "/Assets/logo_on_dark.png";
        return new BitmapImage(new Uri(url, UriKind.RelativeOrAbsolute));
    }
}

MainPage.xamlを以下のように修正。

<Grid x:Name="LayoutRoot"
   Background="Transparent"
   d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}">
 
     <!–Panorama control–>
     <controls:Panorama Background="{Binding PanoramaBackgroundImage}" Title="My Application">

Expression Blend対応の為に、SampleData/MainViewModelSampleData.xamlに以下のコードを追加。

<local:MainViewModel.PanoramaBackgroundImage>
    <ImageBrush ImageSource="/Assets/PanoramaBackground_dark.jpg" />
</local:MainViewModel.PanoramaBackgroundImage>

これで、Darkテーマか、Lightテーマかによって背景画像を切り替えられるようになりました。

Windows Phone 7のDatePickerのメニューバーの画像

元記事は、「31 Days of Windows Phone | Day #21: Silverlight Toolkit for Windows Phone « Blankenblog」を参照してください。

Silverlight Toolkitを使用すれば、Windows Phone 7で日付選択コントロールを簡単に使用できます。

<toolkit:DatePicker />

と記述すれば、テキストボックスを設置できます。
テキストボックスを選択すると次のような日付入力画面を表示できます。

image

赤印で囲んだ部分のように、画像が表示されていないことがわかります。
ここに画像を表示させるためには、次の手順を実行します。

  1. Toolkit.Content ディレクトリを作成します。
  2. そのディレクトリに2つの画像を配置します。
    ApplicationBar.Cancel.pngApplicationBar.Cancel
    ApplicationBar.Check.pngApplicationBar.Check
  3. Build Actionを「Content」に、Copy to Output Directoryを「Copy if newer」に変更します。
    properties

配置すると、次のように画像が表示されました。

datepickerfinal

Windows Phone 7 HTC Trophyを購入

Windows Phone 7 HTC Trophyを発注した日に、裏口情報を頂いた。
Windows Phone 7 HTC Trophyを受け取る2時間前に、8月末にAUから富士通製のWindows Phone 7端末が発売されることを聞いた。
そんな、残念な気分になりそうな中、手に入れたのがWindows Phone7 Trophy。

Windows Phone 7を手にし、開発準備を進めるために参考にさせていただいた2つのBlogを備忘録でメモ。
AUから発売されると事情が変わるだろうけどね。

落とし穴がちょくちょくあるので、手探りで取り組まずに参考にさせていただくのがベスト。