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

Question

根据手机中设置的主题，SDK中提供了“Light”或“Dark”图标。在主题更改时，应用程序栏会自动更改图标。另外，当您按下按钮时，无论您使用的是哪个主题，图像都会反转（因此它仍然可见）。我可以很容易地找出如何根据当前主题更改图标。但是，很难想象如何在按下按钮时更改图标。

要更清楚。假设我正在使用“黑暗”主题。我创建了一个使用黑色图标的按钮。当按下按钮时，背景是白色的，但图标本身保持白色，因此不可见。在应用程序栏上，该图标会变成黑色，这在白色背景下当然是可见的。

这是有道理的吗？有人知道怎么修这个东西吗？

Answer 1

您可以使用单个图标作为不透明蒙版，而不是使用浅色和深色图标。这只是一个例子，你可能想把它变成一个单独的控件来设置图标整理器，如果你愿意的话，你可以为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使用为元件的刷的α值，因为它需要一个刷子可以使用渐变或图像刷。在这种情况下，矩形的ContentContainer采用提供的图像的形状，因为只有alpha通道被使用，它可以是任何你想要的颜色。 ContentContainer使用样式在按下时改变的前景色，您可以通过更改前景按钮来更改图标颜色。这种风格基本上是默认的，而不是ContentControl，而是使用带有OpacityMask的Grid。

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

Answer 2

其实 - WP7周围有一些智慧，将自动使浅色的图标“黑”版本（也处理按钮按下正确）提供符合以下条件：

• 的图标是48×48
• 以.png格式（还没有真正以.jpg尝试，但 我怀疑它会工作）
• 当图标是 白色，背景是透明 （可能与黑色的也行，但你的问题似乎另有建议）

我使用的是一组在WP7的应用程序图标，并自动处理光/暗的主题 - 那里曾经是一个AppBarIcon pack from Microsoft为好，但快速谷歌刚刚给我的那一刻断开链接。如果你绝望，请给我发电子邮件，我可以用你的方式轻弹他们。

尽管使用OpacityMask的建议方法可能有效，但它听起来比在透明的48x48 png上使用白色困难得多。 ：） 让我知道你怎样去！