在灰度中使用 png 并保持透明度的问题

Posted 2023-04-01

【中文标题】在灰度中使用 png 并保持透明度的问题

【英文标题】：Problem to use png in grayscale and keep transparency

【发布时间】：2021-09-24 10:13:33

【问题描述】：

无论是否选中，我都必须创建一个带有两张图片的切换按钮。当切换按钮未启用时，图片必须为灰色。 我将控件基于 Checkbox 并创建新样式。

它可以工作，但图片周围的透明度存在问题。透明度在灰色图片中变为白色。 picture in gray

你有优雅的解决方案吗？ （我发现后面有很多代码，但这对于这么一个小问题来说意义重大）

这是我的风格：

<Style x:Key="OnOffToggle" TargetType="x:Type local:ToggleButton">
    <Setter Property="Width" Value="60"/>
    <Setter Property="Height" Value="60"/>
    <Setter Property="Margin" Value="5"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="IsChecked" Value="Binding IsChecked"/>
    <Setter Property="IsEnabled" Value="Binding IsEnable"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="x:Type local:ToggleButton">
                <Grid>
                    <Image Visibility="Binding IsEnable, Converter=converters:BoolToVisibilityConverter VisibilityWhenDisable=Hidden"
                        x:Name="checkboxImage" Source="OnOffs_Down.png"/>
                    <Image Visibility="Binding IsEnable, Converter=converters:BoolToVisibilityConverter VisibilityWhenDisable=Hidden, IsVisibleWhenEqual=False"
                        Width="Binding ActualWidth, ElementName=checkboxImage" Height="Binding ActualHeight, ElementName=checkboxImage">
                        <Image.Source>
                            <FormatConvertedBitmap Source="Binding Source, ElementName=checkboxImage" DestinationFormat="Gray8" />
                        </Image.Source>
                    </Image>
                    <ContentPresenter/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="checkboxImage" Property="Source" Value="OnOffs_Up.png"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【问题讨论】：

PixelFormats.Gray8 是一种每像素 8 位的灰度格式。它不提供透明度的 Alpha 通道。您可以使用图像编辑器创建图像的透明灰度版本并加载它。

谢谢克莱门斯。如果我没有其他解决方案，我会再拍两张照片。是否存在带 alpha 通道的灰度格式？

另一种方式可能是使用转换器作为源。但我无法贯彻这个想法

【参考方案1】：

我决定按照 Clemens 指出的方向前进。我使用 4 张图片而不进行转换。

<Style x:Key="OnOffToggle" TargetType="x:Type local:ToggleButton">
    <Setter Property="Width" Value="60"/>
    <Setter Property="Height" Value="60"/>
    <Setter Property="Margin" Value="5"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="IsEnabled" Value="Binding IsEnable"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="x:Type local:ToggleButton">
                <Grid>
                    <Grid Visibility="Binding IsChecked, Converter=converters:BoolToVisibilityConverter VisibilityWhenDisable=Hidden, IsVisibleWhenEqual=False">
                        <Image Visibility="Binding IsEnable, Converter=converters:BoolToVisibilityConverter VisibilityWhenDisable=Hidden"
                            Source="OnOffs_Down.png"/>
                        <Image Visibility="Binding IsEnable, Converter=converters:BoolToVisibilityConverter VisibilityWhenDisable=Hidden, IsVisibleWhenEqual=False"
                            Source="OnOffs_Down_Disable.png"/>
                    </Grid>
                    <Grid Visibility="Binding IsChecked, Converter=converters:BoolToVisibilityConverter VisibilityWhenDisable=Hidden">
                        <Image Visibility="Binding IsEnable, Converter=converters:BoolToVisibilityConverter VisibilityWhenDisable=Hidden"
                            Source="OnOffs_Up.png"/>
                        <Image Visibility="Binding IsEnable, Converter=converters:BoolToVisibilityConverter VisibilityWhenDisable=Hidden, IsVisibleWhenEqual=False"
                            Source="OnOffs_Up_Disable.png"/>
                    </Grid>
                    <ContentPresenter/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>