![](/img/trans.png)
[英]using resource dictionaries in expression blend to handle light/dark themes in WP7
[英]Load Images According To Dark And Light Theme in WP7
在我當前的Windows Phone 7應用程序中,我們要使用兩個主題:“黑暗與光明”,我們還在應用程序中使用了一些全景和樞軸控件。 每個控件對於每個黑暗和明亮主題都有不同的圖像。
為此,我在項目中制作了兩個單獨的主題。 但是,我無法加載該主題的圖像。 有人可以建議我如何根據主題是深色還是淺色從主題加載圖像?
如果僅顯示圖像,則可以創建一個ValueConverter來確定主題:
// Assumes a dark theme image is passed in the parameter variable
public class ImageThemeValueConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if(parameter == null) return null;
Visibility darkBackgroundVisibility =
(Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"];
if (darkBackgroundVisibility == Visibility.Visible)
{
return new Uri(parameter.ToString();
}
else
{
string path = parameter.ToString();
path = System.IO.Path.GetDirectoryName(path) + System.IO.Path.GetFileNameWithoutExtension(path) + ".light"+System.IO.Path.GetExtension(path);
return new Uri(path);
}
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
並在您的xaml中:
<Image Source="{Binding Converter={StaticResource ImageThemeValueConverter}, ConverterParameter=Images/ThemeImage.png}"/>
如果將圖像放在按鈕中,並且圖像僅使用背景色和前景色(黑色和白色),則可以使用一種可以更改顏色的樣式。
<Button Style="{StaticResource PhoneButton}">
<ImageBrush ImageSource="/Images/appbar.save.png" Stretch="None"/>
</Button>
和樣式:
<Style TargetType="Button" x:Key="PhoneButton">
<Setter Property="Width" Value="48"/>
<Setter Property="Height" Value="48"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Stretch</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<VerticalAlignment>Stretch</VerticalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Ellipse x:Name="Border" Fill="{TemplateBinding Background}" Canvas.Left="0" Stretch="Fill"
StrokeThickness="3" StrokeLineJoin="Round" Stroke="{TemplateBinding BorderBrush}"/>
<Grid x:Name="ContentContainer" OpacityMask="{TemplateBinding Content}" Background="{TemplateBinding Foreground}"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
您可以使用以下代碼片段確定主題,並相應地設置圖像。
if ((double)Application.Current.Resources["PhoneDarkThemeOpacity"] == 1)
{
//Dark Theme
}
else
{
//Light Theme
}
您也可以在這里查看更多詳細信息。
我猜更好的方法是將兩個單獨的主題分別設置為淺色和深色主題,然后按主題可見性位決定應用程序的加載。
在我們的主題中,我們可以像這樣加載圖像
<BitmapImage x:Key="SearchImage" UriSource="/Images/searchIcon.png" />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.