CODEWITHSUNDEEP
wpfbutton
bas
bas

Reputation: 14982

WPF Button use different icon for enabled and disabled state

How can I give my button different icons depending on the Enabled state. Not very familiar with Style setters yet.

XAML button:

        <Button 
            x:Name="DownloadNewestEpisodes" 
            Width="90" 
            Margin="5,5"
            ToolTip="Download newest episodes"
            ToolTipService.ShowOnDisabled="True"
            Command="w:MainWindow.DownloadNewestEpisodesCommand"
            CommandParameter="{Binding ElementName=TvShowsTreeView, Path=SelectedItem}">

            <StackPanel>
                <Image Source="../icons/import.png" />
            </StackPanel>
        </Button>

How can I switch between

<Image Source="../icons/import.png" />

and 

<Image Source="../icons/import_disabled.png" />

based on the enabled state of the button?

A little help would be great!

Upvotes: 1

Views: 4533

Answers (2)

Rohit Vats
Rohit Vats

Reputation: 81283

Set default image in setter and use DataTrigger to switch to other value (in case IsEnabled set to False):

<Button>
   <Image>
      <Image.Style>
         <Style TargetType="Image">
            <Setter Property="Source" Value="Images/a.png"/>
              <Style.Triggers>
                 <DataTrigger Binding="{Binding IsEnabled,
                             RelativeSource={RelativeSource Mode=FindAncestor, 
                                                          AncestorType=Button}}"
                              Value="False">
                    <Setter Property="Source" Value="Images/c.png"/>
                 </DataTrigger>
              </Style.Triggers>
         </Style>
     </Image.Style>
  </Image>
</Button>

Upvotes: 2

kmatyaszek
kmatyaszek

Reputation: 19296

You can use DataTrigger:

<Button...
    >
    <StackPanel>
        <Image>
            <Image.Style>
                <Style TargetType="Image">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True">
                            <Setter Property="Source" Value="..." />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="False">
                            <Setter Property="Source" Value="..." />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
    </StackPanel>
</Button>

Upvotes: 6

Related Questions