Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to change button background image on click in WPF

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 5.34k
    Comment on it

    In WPF, to change the background image on button click, we can use ToggleButton. In ToggleButton, we can check whether its checked or not. We use DataTrigger to check its property.
    Here, below is the example of this:

     

    In XAML:

     

    Creating button style:

      <Style x:Key="ButtonStyle" TargetType="{x:Type ToggleButton}">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ToggleButton}">
                            <Border Background="Transparent" >
                                <ContentPresenter/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
       </Style>

     

     Adding style to ToggleButton:

      <ToggleButton Grid.Column="0"  Grid.Row="0" Name="Deletebutton" Style="{StaticResource ButtonStyle}" Margin="200,100,100,100" >
                <StackPanel Orientation="Horizontal">
                    <Image x:Name="imgDelete" Width="50" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <Image.Style>
                            <Style TargetType="{x:Type Image}">
                                <Style.Triggers>
                                    <DataTrigger  Binding="{Binding IsChecked, ElementName=Deletebutton}" Value="True">
                                        <Setter Property="Source" Value="Images\default_delete.png" />
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding IsChecked, ElementName=Deletebutton}" Value="False">
                                        <Setter Property="Source" Value="Images\active_delete.png" />
                                    </DataTrigger>
    
                                </Style.Triggers>
                            </Style>
                        </Image.Style>
                    </Image>
                </StackPanel>
            </ToggleButton>

     

    Hope, this code will help you. Thanks. 

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: