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テーマかによって背景画像を切り替えられるようになりました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です