Click here to Skip to main content
15,921,113 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello everybody,

I search to change image button background .
In Xaml code I use this :
XML
<Button Style="{StaticResource CtrlButton}" Name="btnStart"  Height="64" Width="64" Margin="50,20,10,0" Click="btnStart_Click">
                    <Button.Background>
                        <VisualBrush Visual="{StaticResource Play}" Stretch="Uniform">
                          
                        </VisualBrush>
                    </Button.Background>
                </Button>


How to change image in code behind?
Posted

I don't know what you would like to do exactly . If you like to change the background image on an event like mouse over you can work with datatrigger.

This example should work
HTML
<Window x:Class="WpfApplication33.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <BitmapImage x:Key="Source1" UriSource="../Resources/P1030224.JPG" />
        <BitmapImage x:Key="Source2" UriSource="../Resources/P1030220.JPG" />
        <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button">
            <Border>
                <Image Width="90" Height="90">
                    <Image.Style>
                        <Style TargetType="{x:Type Image}">
                            <Setter Property="Source" Value="{StaticResource Source2}" />
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Source" Value="{StaticResource Source1}" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
            </Border>
        </ControlTemplate>
    </Window.Resources>

    <StackPanel>
        <Button Name="button1" Padding="10,2" Template="{StaticResource ButtonControlTemplate1}" />
    </StackPanel>
</Window>

Important: Build action should be resource.
 
Share this answer
 
v3
Make two overlayed buttons:

XML
<window x:class="WpfApplication33.MainWindow" xmlns:x="#unknown">
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <grid>
        <button name="button1" click="button1_Click" content="b1" padding="10,2" />
        <button name="button2" visibility="Collapsed" click="button2_Click" content="b2" padding="10,2" />
    </grid>
</window>


Codebehind:
C#
private void button1_Click(object sender, RoutedEventArgs e)
        {
            button1.Visibility = Visibility.Collapsed;
            button2.Visibility = Visibility.Visible;
        }

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            button1.Visibility = Visibility.Visible;
            button2.Visibility = Visibility.Collapsed;
        }
 
Share this answer
 
Hi,
Thanks for your help.

I just want create a button Start/Stop with 2 differents images in background, one to Start and one to Stop.

Actually, I have a ressource dictionnary with differents images. These images are SVG file conversion.
I have a ressource dictionnary for styles. For my buttons:
<pre lang="xml">
!-- Controle Button -->
    <style x:key="CtrlButton" targettype="{x:Type Button}" xmlns:x="#unknown">

     
     
        <setter property="Template">
            <setter.value>

                <controltemplate targettype="{x:Type Button}">
                    <border x:name="ButtonBorder">
                              CornerRadius="10,10,10,10" 
                              BorderThickness="0,0,0,0" 
                              BorderBrush="#FF8F8F8F"
                              RenderTransformOrigin="0.5,0.5"
                              Background="{TemplateBinding Background}"
                         
                    >
                      
                        
                    <contentpresenter x:name="ButtonContentPresenter">
                             VerticalAlignment="Bottom"  
                             HorizontalAlignment="Center"
                            
                    />
                        
                    </contentpresenter></border>
                    <controltemplate.triggers>
                        <trigger property="IsPressed" value="True">
                            <setter property="RenderTransform" targetname="ButtonBorder">
                                <setter.value>
                                    <transformgroup>
                                        <scaletransform scalex="0.9" scaley="0.9" />
                                    </transformgroup>
                                </setter.value>
                            </setter>
                        </trigger>
                    </controltemplate.triggers>
                </controltemplate>
                
            </setter.value>
        </setter>
    </style>

And in my Xaml code :
XML
<button style="{StaticResource CtrlButton}" name="btnStart" height="64" width="64" margin="50,20,10,0" click="btnStart_Click">
                    <button.background>
                        <visualbrush visual="{StaticResource Play}" stretch="Uniform">
                          
                        </visualbrush>
                    </button.background>
                </button>


With your code example, the image change only the mouse is over the button?

For my problem, i thought it was necessary to change the background image only by code. I would look in the xaml example code.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900