When the button is disabled, its transparent feature disappears WPF

23 Views Asked by At

I have button in the grid on wpf project. It will be enabled or disabled depending on the situations. I set the background property of the button to transparent.

This button has also an icon.

I set the opacity value of the icon is 0.5 to provide disabled appearance when the button is disabled.

However, when the opacity is 0.5, the icon loses its transparency feature and appears white. How can I solve this problem?

Is there any different method to provide disabled view to button?

Note: I can not change the background color of the grid to white.

<Window x:Class="TestApp.View.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TestApp.View"
        xmlns:i="http://schemas.microsoft.com/xaml/behaviors"

        xmlns:vm="clr-namespace:TestApp.ViewModel"
        mc:Ignorable="d"
        Title="MainView" Height="200" Width="200">
   

    <Window.DataContext>
        <vm:MainViewVM/>
    </Window.DataContext>

    <Window.Resources>
        <Style x:Key="ImageEnabled" TargetType="Image">
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Opacity" Value="0.5"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
        
    </Window.Resources>

    <Grid Background="Gray">
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="30"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="30"/>
            
        </Grid.ColumnDefinitions>
        
        <Button x:Name="playButton"
                Grid.Row="0"
                Grid.Column="2"
                Margin="0,0,0,0"
                HorizontalAlignment="Right"
                Background="Transparent"
                Width="30"
                Height="30"
                IsEnabled="False"
                Command="{Binding OpenHelpViewCommand}">
            <Image Source="/Images/Start_512x512.png"
Style="{StaticResource ImageEnabled}"/>
        </Button>
        <Button Click="Button_Click_1"
                Content="Enable / Disable"
                Grid.Column="1"
                Margin="5">
            
        </Button>
    </Grid>
   
</Window>

enter image description here

0

There are 0 best solutions below