How to change the background image of button on runtime?

Question

I m stuck with a problem. I want to change the background image of button on runtime. I got the solution for changing the color but i want to change the image.

The code is as follows

public void buttonCase(object sender, RoutedEventArgs e)
{
    Uri uri = null;
    var image = new ImageBrush();
    if (((App)App.Current).appControler.m_Mode == Controller.textMode.Letters)
    {
        ((App)App.Current).appControler.buttonCase(sender, e);
        switch (((App)App.Current).appControler.m_case)
        {
        case Controller.caseMode.Upper:
            b0.FontSize = b1.FontSize = b2.FontSize = b3.FontSize = b4.FontSize = b5.FontSize = b6.FontSize = b7.FontSize
            = b8.FontSize = b9.FontSize = bCornerLower.FontSize = 30.0;
            uri = new Uri(@"/SourceCode;component/Images/Lower_Case_p.png", UriKind.Relative);
            image.ImageSource = new BitmapImage(uri);
            btnCase.Background = image;
            break;
        case Controller.caseMode.Lower:
            b0.FontSize = b1.FontSize = b2.FontSize = b3.FontSize = b4.FontSize = b5.FontSize = b6.FontSize = b7.FontSize
            = b8.FontSize = b9.FontSize = bCornerLower.FontSize = 40.0;
            uri = new Uri(@"/SourceCode;component/Images/Case_p.png", UriKind.Relative);
            image.ImageSource = new BitmapImage(uri);
            btnCase.Background = image;
            break;
        }
    }
}  

Answer 1

Utilize VisualStates for this kind of UI state switching. Your code behind would look like this:

public void buttonCase(object sender, RoutedEventArgs e)
{
    if (((App)App.Current).appControler.m_Mode == Controller.textMode.Letters)
    {
        ((App)App.Current).appControler.buttonCase(sender, e);
        switch (((App)App.Current).appControler.m_case)
        {
        case Controller.caseMode.Upper:
            VisualStateManager.GoToState( this, "UpperCase", true );
            break;
        case Controller.caseMode.Lower:
            VisualStateManager.GoToState( this, "LowerCase", true );
            break;
        }
    }
}  

And your xaml would look like this:

<UserControl
x:Class="SilverlightApplication2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=mscorlib">
<UserControl.Resources>
    <ControlTemplate x:Key="MySpecialToggleButton" TargetType="ToggleButton">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CheckStates">
                    <VisualState x:Name="Checked">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="LowerCaseIcon">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="UpperCaseIcon">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unchecked"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Image x:Name="UpperCaseIcon" Source="/SilverlightApplication2;component/Images/Lower_Case_p.png" Visibility="Visible"/>
            <Image x:Name="LowerCaseIcon" Source="/SilverlightApplication2;component/Images/Case_p.png" Visibility="Collapsed"/>
        </Grid>
    </ControlTemplate>
</UserControl.Resources>

<StackPanel>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="LetterCaseStates">
            <VisualState x:Name="UpperCase"/>
            <VisualState x:Name="LowerCase">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontSize" Storyboard.TargetName="bCornerLower">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <system:Double>40</system:Double>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <ToggleButton x:Name="btnCase" Click="buttonCase" Template="{StaticResource MySpecialToggleButton}"/>
    <Button x:Name="bCornerLower" FontSize="30"/><!-- this one is the styling master, all other buttons follow its styling -->
    <Button x:Name="b0" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/>
    <Button x:Name="b1" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/>
    <Button x:Name="b2" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/>
    <Button x:Name="b3" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/>
    <Button x:Name="b4" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/>
    <Button x:Name="b5" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/>
    <Button x:Name="b6" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/>
    <Button x:Name="b7" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/>
    <Button x:Name="b8" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/>
    <Button x:Name="b9" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/>
</StackPanel>

I wrote the code as an answer to a similar question here:toggle button with different images

I know that defining VisualStates can look quite cumbersome, but in the end you can keep your code behind quite clean from switching visual appearance of all the ui bits and pieces.

Answer 2

private void button_Click(object sender, EventArgs e)
        {
           button.Image=System.Drawing.Image.FromFile("image.png");
        }

try this..

Answer 3

Something like this?

var brush = new ImageBrush();
brush.ImageSource = new BitmapImage(new Uri(@"Images/myImage.png", UriKind.Relative)); 
myButton.Background = brush;

[Edit] I made a test application with two images. I toggle the image on button click and it works.

private bool flag;

private void button1_Click(object sender, RoutedEventArgs e)
{
    flag = !flag;

    var uriString = flag ? @"Images/logo.png" : @"Images/icon.png";
    myButton.Background = new ImageBrush 
        { ImageSource = new BitmapImage(new Uri(uriString, UriKind.Relative)) };
}