WinRT BitmapIcon Alpha Bug

Question

有人能解释一下WinRT中 BitmapIcon 的情况吗？据我了解，文档很稀疏， BitmapIcon 基本上从图像中剥离颜色信息，并允许您用前景颜色替换它。但是，如果您创建一个带有白色像素的图像并将其加载到 BitmapIcon 中并将前景色设置为“白色”画笔，则它似乎会破坏 alpha 值。我的图像使用纯白色像素， alpha 用于提供针对深色背景的圆角触摸。以下是使用图像控件加载时的样子：

以下是使用 BitmapIcon 加载并将Foreground设置为“White”时相同的PNG文件的样子：

alpha 信息完全丢失。无论原始图像中的 alpha 值如何，所有像素都设置为0xFFFFFF。现在这里有点奇怪。如果我使用“黑色”前景色，我会得到：

出于某种原因， alpha 在较暗的图像上以某种形式出现。而不是从原始PNG图像中逐字地获取 alpha ，似乎有一些与应用前景画笔相关的功能。任何人都可以了解 alpha 组件如何在 BitmapIcon 元素上工作（或不工作）吗？

Answer 1

此处与AppBarButton和白色/透明图像相同。

帖子的第一部分http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.iconelement.foreground中的以下句子：

  

“Foreground”替换BitmapIcon.UriSource中的颜色信息   源文件。替换源图像中的任何非透明像素   与前景颜色。“

我同意你的看法，如果你正确地准备图像，这是一种烦人的行为。为什么它适用于黑暗的前景色我不知道。

最后我写了自己的控件：

public class Primitive3StateImagesButton : Button
{
    public static readonly DependencyProperty ImageSourceProperty = 
        DependencyProperty.Register("ImageSource",
        typeof (ImageSource), typeof (Primitive3StateImagesButton), 
        new PropertyMetadata(null));

    public static readonly DependencyProperty PointerOverImageSourceProperty =
        DependencyProperty.Register("PointerOverImageSource", typeof (ImageSource),
        typeof (Primitive3StateImagesButton), new PropertyMetadata(null));

    public static readonly DependencyProperty PressedImageSourceProperty =
        DependencyProperty.Register("PressedImageSource",
        typeof (ImageSource), typeof (Primitive3StateImagesButton), 
        new PropertyMetadata(null));

    public Primitive3StateImagesButton()
    {
        DefaultStyleKey = typeof (Primitive3StateImagesButton);
    }

    public ImageSource ImageSource
    {
        get { return ((ImageSource) (GetValue(ImageSourceProperty))); }
        set { SetValue(ImageSourceProperty, value); }
    }

    public ImageSource PointerOverImageSource
    {
        get { return ((ImageSource) (GetValue(PointerOverImageSourceProperty))); }
        set { SetValue(PointerOverImageSourceProperty, value); }
    }

    public ImageSource PressedImageSource
    {
        get { return ((ImageSource) (GetValue(PressedImageSourceProperty))); }
        set { SetValue(PressedImageSourceProperty, value); }
    }
}

风格：

  <Style TargetType="ctrls:Primitive3StateImagesButton">
    <Setter Property="Foreground" Value="{ThemeResource 
        AppBarItemForegroundThemeBrush}" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="FontFamily" Value="{ThemeResource 
        ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ctrls:Primitive3StateImagesButton">
          <Grid Background="Transparent" x:Name="RootGrid">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="PointerOver">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" 
                        Storyboard.TargetName="Ellipse">
                      <DiscreteObjectKeyFrame KeyTime="0"
                          Value="{ThemeResource 
                          AppBarItemPointerOverBackgroundThemeBrush}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames 
                        Storyboard.TargetName="NormalImage"
                        Storyboard.TargetProperty="Visibility">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames 
                        Storyboard.TargetName="PointerOverImage"
                        Storyboard.TargetProperty="Visibility">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames 
                        Storyboard.TargetName="PressedImage"
                        Storyboard.TargetProperty="Visibility">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames 
                        Storyboard.TargetProperty="Stroke" 
                        Storyboard.TargetName="Ellipse">
                      <DiscreteObjectKeyFrame KeyTime="0" 
                          Value="{ThemeResource AppBarItemForegroundThemeBrush}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" 
                        Storyboard.TargetName="Ellipse">
                      <DiscreteObjectKeyFrame KeyTime="0" 
                          Value="{ThemeResource AppBarItemForegroundThemeBrush}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames 
                        Storyboard.TargetName="NormalImage"
                        Storyboard.TargetProperty="Visibility">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames 
                        Storyboard.TargetName="PointerOverImage"
                        Storyboard.TargetProperty="Visibility">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames 
                        Storyboard.TargetName="PressedImage"
                        Storyboard.TargetProperty="Visibility">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Disabled">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames 
                        Storyboard.TargetName="RootGrid"
                        Storyboard.TargetProperty="Visibility">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup x:Name="FocusStates">
                <VisualState x:Name="Focused">
                  <Storyboard>
                    <DoubleAnimation Duration="0" To="1" 
                        Storyboard.TargetProperty="Opacity"
                        Storyboard.TargetName="FocusVisualWhite" />
                    <DoubleAnimation Duration="0" To="1" 
                        Storyboard.TargetProperty="Opacity"
                        Storyboard.TargetName="FocusVisualBlack" />
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Unfocused" />
                <VisualState x:Name="PointerFocused" />
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid
              Height="30"
              Width="30">
              <Ellipse
                x:Name="Ellipse"
                Fill="{ThemeResource AppBarItemBackgroundThemeBrush}"
                Stroke="{ThemeResource AppBarItemForegroundThemeBrush}"
                StrokeThickness="2"
                UseLayoutRounding="False" />
              <Image x:Name="NormalImage" Source="{TemplateBinding ImageSource}"
                  HorizontalAlignment="Center" VerticalAlignment="Center" 
                  Width="18" Height="18" Visibility="Visible" />
              <Image x:Name="PointerOverImage" 
                  Source="{TemplateBinding PointerOverImageSource}"
                  HorizontalAlignment="Center" VerticalAlignment="Center" 
                  Width="18" Height="18" Visibility="Collapsed" />
              <Image x:Name="PressedImage" 
                  Source="{TemplateBinding PressedImageSource}" 
                  HorizontalAlignment="Center" VerticalAlignment="Center" 
                  Width="18" Height="18" Visibility="Collapsed" />
            </Grid>
            <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" 
                Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" 
                Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
                StrokeDashArray="1,1" />
            <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" 
                Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" 
                Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
                StrokeDashArray="1,1" />
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>