WP7其他地方自动图标着色的应用栏样式？答案

【问题标题】：Application bar-style of automatic icon coloring elsewhere in WP7?WP7其他地方自动图标着色的应用栏样式？
【发布时间】：2012-02-27 03:31:12
【问题描述】：

当我将图标按钮添加到应用程序栏时，如果正在使用深色主题，系统会负责将图标显示为白色，如果正在使用浅色主题，则将图标显示为黑色。我可以在我的应用程序的其他地方使用这种自动着色吗？我想从 SDK 目录中获取一个图标图像并在普通按钮上使用它，如果我能让系统根据主题显示白色或黑色，那就太好了。现在我正在使用转换器手动执行此操作，但如果有一种自动执行此操作的方法会更清洁。有人知道方法吗？

【问题讨论】：

标签： windows-phone-7

【解决方案1】：

<Button Background="{StaticResource PhoneContrastBackgroundBrush}" >
   <Button.OpacityMask>
      <ImageBrush ImageSource="/Images/icon.png"/>
   </Button.OpacityMask>
</Button>

icon.png 必须是白色的

[编辑]

或（在它们周围画一个圆圈）使用 SDK 图像 (appbar.basecircle.rest.png)

<Style x:Key="FlatStyle" TargetType="Button">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
            <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
            <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
            <Setter Property="Padding" Value="10,3,10,5"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
                                <Grid>
                                    <Canvas Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                                        <Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{StaticResource PhoneForegroundBrush}">
                                            <Rectangle.OpacityMask>
                                                <ImageBrush ImageSource="/appbar.basecircle.rest.png"/>
                                            </Rectangle.OpacityMask>
                                        </Rectangle>
                                        <Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{StaticResource PhoneForegroundBrush}" OpacityMask="{TemplateBinding BorderBrush}"/>
                                    </Canvas>
                                    <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Grid>

                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

用法：

<Button Style="{StaticResource FlatStyle}" BorderThickness="0" Width="48" Height="48">
                <Button.BorderBrush>
                    <ImageBrush ImageSource="/appbar.favs.rest.png"/>
                </Button.BorderBrush>
            </Button>

【讨论】：

太棒了，谢谢。有什么想法可以在仍然使用这种技术的同时将 2 个图像叠加在一起吗？我正在使用 SDK 附带的检查和取消图像，我想在它们周围画一个圆圈（使用的是 SDK 附带的圆形图像）。
处理每张图片的Visible属性
您必须声明按钮样式并使用它们。请查看我的帖子更改
感谢 ebattulga，这真是太棒了。
不确定是否是模拟器问题，但 Pressed 动画不适合我。查看代码，我认为它应该反转图像（看起来它将前景色更改为背景，反之亦然）。但是对我来说，当我单击按钮时，左上角会出现一个白色方块，而按钮的其余部分保持不变。我很确定我已经正确复制了所有内容，所以我不确定问题出在哪里。