Change image of button programitically

Question

0.00/5 (No votes)

See more:

Hello,
I am having a button which posses an image... problem is that when I click that button I want to change the image of the button pragmatically in c#...
Can any one suggest the correct solution to change the image... Below code is my xaml

XML

<Button Content="Go" Height="23" Name="btnViewInventory" Width="40" Grid.Row="1" Cursor="Hand" ToolTip="View group details " HorizontalAlignment="Left" Grid.Column="4" Click="btnViewInventory_Click" >
                          <Button.Template>
                              <ControlTemplate>
                                  <Image Source="..\Images\View.png" VerticalAlignment="Center" Height="30" Width="25" Name="imgGroupAdd" ></Image>
                              </ControlTemplate>
                          </Button.Template>
                      </Button>

Posted 12-Nov-13 23:38pm

jing567

Add a Solution

4 solutions

Solution 1

Change button style sheet after click
have a look of this link

http://social.msdn.microsoft.com/Forums/vstudio/en-US/05edb0bb-13bc-4c85-acb1-1245add255e8/how-can-i-add-an-image-background-for-button-in-aspnet[^]

http://www.nullskull.com/q/10164749/set-background-image-to-an-ltaspbutton--gt--controlhow-is-it-possible.aspx[^]

Posted 13-Nov-13 0:16am

vinay.Singh

Updated 13-Nov-13 0:17am

v2

Comments

jing567 13-Nov-13 6:20am

Hello,
i am doing in wpf yar not asp.net..... it is in xaml + c#

[no name] 13-Nov-13 6:23am

Ok let me check some solution for wfp

Solution 2

have a look of this link this may help you

http://stackoverflow.com/questions/15627123/adding-an-image-inside-a-button-programmatically[^]
http://stackoverflow.com/questions/5971300/programmatically-changing-button-icon-in-wpf[^]

Posted 13-Nov-13 0:25am

vinay.Singh

Solution 3

hi,you should define a class which base on Button class, then change it ImageSource property.

C#

public class ImageContentButton : Button
    {
        static ImageContentButton()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageContentButton), new FrameworkPropertyMetadata(typeof(ImageContentButton)));
        }
        public static readonly DependencyProperty ImageSorceProperty = DependencyProperty.Register("ImageSorce", typeof(ImageSource), typeof(ImageContentButton));
        /// <summary>
        /// 图片资源
        /// </summary>
        public  ImageSource ImageSorce
        {
            get { return (ImageSource)GetValue(ImageContentButton.ImageSorceProperty); }
            set { SetValue(ImageContentButton.ImageSorceProperty, value); }
        }
    }

then, refer to the class in your XAML page.

C#

xmlns:controls="clr-namespace:Contorls;assembly=Contorls"

In your Windows resources to override the Button control template class

XML

<Style x:Key="ButtonStyle" TargetType="{x:Type controls:ImageContentButton}">
           <Setter Property="FontSize" Value="12" ></Setter>
           <Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate TargetType="{x:Type controls:ImageContentButton}">
                       <Grid Margin="0,0,0,-2" ClipToBounds="True">
                           <VisualStateManager.VisualStateGroups>
                               <VisualStateGroup x:Name="CommonStates">
                                   <VisualStateGroup.Transitions>
                                       <VisualTransition From="Normal" GeneratedDuration="0">
                                           <Storyboard>
                                               <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="image_Copy6">
                                                   <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                                   <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-28"/>
                                               </DoubleAnimationUsingKeyFrames>
                                               <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="button_Copy">
                                                   <EasingColorKeyFrame KeyTime="0:0:0.2" Value="White"/>
                                               </ColorAnimationUsingKeyFrames>
                                           </Storyboard>
                                       </VisualTransition>
                                       <VisualTransition From="MouseOver" GeneratedDuration="0">
                                           <Storyboard>
                                               <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="image_Copy6"/>
                                           </Storyboard>
                                       </VisualTransition>
                                   </VisualStateGroup.Transitions>
                                   <VisualState x:Name="Normal"/>
                                   <VisualState x:Name="MouseOver">
                                       <Storyboard>
                                           <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="image_Copy6">
                                               <EasingDoubleKeyFrame KeyTime="0" Value="-28"/>
                                           </DoubleAnimationUsingKeyFrames>
                                           <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="button_Copy">
                                               <EasingColorKeyFrame KeyTime="0" Value="White"/>
                                           </ColorAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                                   <VisualState x:Name="Pressed">
                                       <Storyboard>
                                           <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="image_Copy6">
                                               <EasingDoubleKeyFrame KeyTime="0" Value="-28"/>
                                           </DoubleAnimationUsingKeyFrames>
                                           <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="button_Copy">
                                               <EasingColorKeyFrame KeyTime="0" Value="White"/>
                                           </ColorAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                                   <VisualState x:Name="Disabled"/>
                               </VisualStateGroup>
                           </VisualStateManager.VisualStateGroups>

                           <Grid.ColumnDefinitions>
                               <ColumnDefinition Width="auto"></ColumnDefinition>
                               <ColumnDefinition></ColumnDefinition>
                           </Grid.ColumnDefinitions>
                           <Border BorderBrush="#FF262529" HorizontalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="2" VerticalAlignment="Stretch" BorderThickness="1" CornerRadius="3">
                               <Border.Background>
                                   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                       <GradientStop Color="#FF575659" Offset="0"/>
                                       <GradientStop Color="#FF403F42" Offset="1"/>
                                   </LinearGradientBrush>
                               </Border.Background>
                           </Border>
                           <Image x:Name="image_Copy6" Grid.Column="0" Source="{TemplateBinding ImageSorce}"  HorizontalAlignment="Center" Margin="5,1,0,-26" Stretch="Fill" Width="Auto" RenderTransformOrigin="0.5,0.5" Height="Auto" VerticalAlignment="Stretch">
                               <Image.RenderTransform>
                                   <TransformGroup>
                                       <ScaleTransform/>
                                       <SkewTransform/>
                                       <RotateTransform/>
                                       <TranslateTransform/>
                                   </TransformGroup>
                               </Image.RenderTransform>
                           </Image>
                           <ContentPresenter x:Name="button_Copy" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="1" Content="{TemplateBinding Content}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                       </Grid>
                       <ControlTemplate.Triggers>
                           <Trigger Property="IsFocused" Value="True"/>
                           <Trigger Property="IsDefaulted" Value="True"/>
                           <Trigger Property="IsMouseOver" Value="True"/>
                           <Trigger Property="IsPressed" Value="True"/>
                           <Trigger Property="IsEnabled" Value="False"/>
                       </ControlTemplate.Triggers>
                   </ControlTemplate>
               </Setter.Value>
           </Setter>
       </Style>

refer to your Button template.hen the mouse suspension image resources can be altered, changing the code is suitable for your needs。

C#

<controls:imagecontentbutton x:name="BtnUpdate" content="update" style="{StaticResource ButtonStyle}" click="btnUpdate_Click" height="28" width="80" foreground="#FFCBCBCC" margin="0,0,10,0" imagesorce="/VirtalWelding;component/Images/footbj.png" horizontalalignment="Left" verticalalignment="Bottom" xmlns:x="#unknown" xmlns:controls="#unknown"></controls:imagecontentbutton>

Posted 13-Nov-13 14:36pm

mr. Duan

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

jing567 · Accepted Answer · 2013-11-15T02:14:00

Hi,
I solved it my self yar finally....

Xaml

XML

<Button  Height="23" Name="btnGoLineitem" Width="40" BorderBrush="Transparent" Grid.Row="5" Grid.Column="4" HorizontalAlignment="Left" Click="btnGoLineitem_Click" >
   <Button.Template>
       <ControlTemplate>
         <Image Source="..\Images\NewItem.png" Name="imgLineItemAdd" ></Image>
        </ControlTemplate>
   </Button.Template>

First Get access of control template which you have defined in design mode(xaml)

ControlTemplate ct = btnGoLineitem.Template;

Get access of the image tag that is present in the xaml side

 Image btnImage = (Image)ct.FindName("imgLineItemAdd", btnGoLineitem);

Now just change the image source

btnImage.Source = new BitmapImage(new Uri("../../Change.png", UriKind.RelativeOrAbsolute));