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

【问题标题】：Problem to use png in grayscale and keep transparency在灰度中使用 png 并保持透明度的问题
【发布时间】：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 通道的灰度格式？
另一种方式可能是使用转换器作为源。但我无法贯彻这个想法

标签： c# wpf image xaml checkbox

【解决方案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>

【讨论】：