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

投稿者: | 8月 22, 2011

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

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください