代码之家  ›  专栏  ›  技术社区  ›  Micah

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

  •  5
  • Micah  · 技术社区  · 15 年前

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

    这有道理吗?有人知道怎么修吗?

    2 回复  |  直到 15 年前
        1
  •  8
  •   Kris    15 年前

    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的网格代替ContentControl。

        2
  •  3
  •   Henry C    15 年前

    实际上——WP7有一些智能,只要满足以下条件,它将自动生成浅色图标的“深色”版本(并适当地处理按钮按下):

    • 图标是48x48
    • 我怀疑它会起作用)
    • 白色背景是

    我在一个WP7应用程序中使用了一组图标,它自动处理明暗主题-以前有一个 AppBarIcon pack from Microsoft

    虽然所建议的方法与不透明面具可能是可行的,但它听起来比仅仅使用白色的透明48x48 PNG要困难得多。:)让我知道你的近况!

    推荐文章