How to change the background image of a button at runtime?

Question

I have a problem with a problem. I want to change the background image of a button at runtime. I got a color change solution, 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

Something like that?

 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 switch the image to the button 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)) }; } 

Answer 2

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

try it.

Answer 3

Use VisualStates to switch user interface states in this way. Your code will 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 will 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: switch a button with different images

I know that the definition of VisualStates may look rather cumbersome, but in the end you can keep your code behind pretty clean by switching the visual appearance of all the ui bits.