Проблема использования png в оттенках серого и сохранения прозрачности

#c# #wpf #image #xaml #checkbox

Вопрос:

Я должен создать переключатель с двумя картинками, когда он установлен или нет. Когда кнопка переключения не включена, изображения должны быть серыми. Я основываю свой контроль на флажке и создаю новый стиль.

Это работает, но есть проблема с прозрачностью вокруг изображений. Прозрачность становится белой на серых снимках. картинка в сером цвете

У вас есть элегантное решение? (Я нашел много кода, но это много значит для такой небольшой проблемы)

Вот мой стиль:

 <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>
 

Комментарии:

1. Пиксельные форматы. Gray8 -это формат в оттенках серого с разрешением 8 бит на пиксель. Он не обеспечивает альфа — канал для прозрачности. Вы можете использовать редактор изображений для создания прозрачной версии изображения в оттенках серого и просто загрузить ее.

2. Спасибо, Клеменс. Я сделаю еще две картины, если у меня не будет другого решения. Существует ли формат в оттенках серого с альфа-каналом?

3. По-другому это может быть использование преобразователя для источника. Но я не мог довести эту идею до конца

Ответ №1:

Я решил идти в том направлении, куда указал мне Клеменс. Я работаю с 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>