Question

SDK中已提供“Light”或“Dark”图标，具体取决于手机上设置的主题。在主题更改时，应用程序栏上的图标会随之自动更改。此外，当您按下按钮时，无论您使用哪个主题，图像都会反转（因此它仍然可见）。我可以很容易地弄清楚如何根据当前主题更改图标。然而，当按下按钮时，如何更改图标是不容易理解的。

更清楚。假设我使用的是“黑暗”主题。我创建了一个使用暗图标的按钮。按下按钮时，背景为白色，但图标本身仍为白色，因此不可见。在应用程序栏上，图标将变为黑色，当然可以在白色背景下看到。

这有意义吗？任何人都知道如何解决这个问题？

Answer 1

您可以使用单个图标作为OpacityMask，而不是使用浅色和深色图标。这只是一个示例，您可能希望将其设置为单独的控件以使图标设置更整洁，如果需要，可以使用ToggleButton的C＃代码。 this series也可能有一些兴趣。

<Style x:Key="IconButton" 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="Background" 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="Background" 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 x:Name="ContentContainer" OpacityMask="{TemplateBinding Content}" Background="{TemplateBinding Foreground}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

用法

<Button Style="{StaticResource IconButton}" >
    <ImageBrush ImageSource="appbar.feature.search.rest.png" Stretch="None"/>
</Button>

说明：OpacityMask使用画笔的alpha值作为元素，因为它需要使用渐变或ImageBrush的画笔。在这种情况下，矩形的ContentContainer采用所提供图像的形状，因为只使用alpha通道，它可以是您想要的任何颜色。 ContentContainer使用样式在按下时更改的前景色，您可以通过更改按钮前景来更改图标颜色。此样式基本上是默认值，但使用的是带有OpacityMask的Grid，而不是ContentControl。

通常，您不会将ImageBrush直接放在按钮中，但这可以作为Silverlight v3中某些绑定限制的快速解决方法。或者，您可以使用具有Uri属性的自定义控件来为Icon更新蒙版的Brush属性。该样式将使用自定义Brush属性作为OpacityMask而不是Button.Content。由于OpacityMask仅使用alpha通道，因此此方法不适用于彩色图像。

Answer 2

实际上 - 只要满足以下条件，WP7就会有一些智能，并会自动制作浅色图标的“暗”版本（并且还能正确处理按钮）：

图标为48x48
在.PNG格式中（实际上没有试过.jpg但是我怀疑它会起作用）
图标在哪里白色和背景是透明（也可能与黑色一起工作，但你的问题似乎暗示不然）

我在WP7应用程序中使用了一组图标，它会自动处理亮/暗主题 - 过去常常是AppBarIcon pack from Microsoft，但快速谷歌只是给了我破碎的链接时刻。如果你绝望的话给我发电子邮件，我可以按你的方式轻弹它们。

虽然OpacityMask的建议方法可能有效，但听起来要比在透明的48x48 png上使用白色要困难得多。 :)让我知道你怎么去！

如何正确使用WP7 sdk提供的图标？

2 个答案: