none
WPF - images in a button

    Question

  • Hello,

    For my WPF project, I have to put some buttons on a homeplan for controlling lights.

    I created 2 images:
    - LightOn.png
    - LightOff.png

    My question is, how can i change the images in the button when it's clicked?

    Thank U,

    Zahir M.

    PS: I use C# as language.

    • Changed type M.Zahir Thursday, March 31, 2011 1:45 PM
    Monday, March 28, 2011 5:01 PM

Answers

  • there is a complete project, you could download it from this link:

    http://cid-41e44c402aaada87.office.live.com/self.aspx/For%20t50su37/ChangeImageButton.rar?sa=273620841

    Another method, you could use a trigger, refer to:

    <Window.Resources>

            <ControlTemplate x:Key="FirstImage" TargetType="{x:Type Button}">

                <Grid >

                    <Image x:Name="myimage" Source="Desert.jpg" Height="27" Width="65" />

                </Grid>

                <ControlTemplate.Triggers >

                    <DataTrigger Binding="{Binding Path=Flag}" Value="True">

                        <Setter TargetName="myimage" Property="Source" Value="Penguins.gif" />

                    </DataTrigger>

                </ControlTemplate.Triggers>

            </ControlTemplate>

        </Window.Resources>

    the third method, you could trigger the image visibilty.

     

    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, March 31, 2011 1:56 PM

All replies

  • Hi,

    u can first make the template of the Button like this..

     <Button Height="50" Width="100" Click="Button_Click">
          <Button.Template>
            <ControlTemplate TargetType="Button" >
              <Grid>
                <Image x:Name="img1" Source="C:\Users\Bhavik Kumar\Documents\Visual Studio 2010\Projects\WorkShop\WorkShop\Images\Tulips.jpg">
                </Image>
                <Image x:Name="img2" Source="C:\Users\Bhavik Kumar\Documents\Visual Studio 2010\Projects\WorkShop\WorkShop\Images\Tulips.jpg">
                </Image>
              </Grid>
            </ControlTemplate>
          </Button.Template>
        </Button>

    now u can have a boolean in the code behind on the click event

     private bool isFirst = false;
    
        public bool IsFirst
        {
          get { return isFirst; }
          set { isFirst = value;
          RaisePropertyChanged("IsFirst");
          }
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
          if (isFirst == false)
          {
            IsFirst = true;
          }
          
        }
    

    now u can use this variable and make 2 converters....

    1st will bind with the Image1 which will take the IsFirst variable and if it is true it will make the Image Visible and the second converter which will take IsFirst variable and return the visibility as Hidden ..i mean the second converter will be the reverse one of the first converter....

    here i've implemented the INotifyPropertyChanged also .. u can see in the property...

    hope it helps u... 


    Thanks, BHavik
    Monday, March 28, 2011 5:57 PM
  • Hi M.Zahir,

    Based on your description, I think your issue has been resovle, could you mark your thread as "Answered"?

     

    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, March 29, 2011 3:55 PM
  • Hello,

    I tested the code but it give me some errors.


    This is just what i did (XAML) : 

    <Window x:Class="WpfApplication5.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">
    
    
    
      <Grid>
    
        <Button Height="50" Width="100" Click="Button_Click">
    
          <Button.Template>
    
            <ControlTemplate TargetType="Button" >
    
              <Grid>
    
                <Image x:Name="img1" Source="D:\LightOn.png">
    
                </Image>
    
                <Image x:Name="img2" Source="D:\LightOff.png">
    
                </Image>
    
              </Grid>
    
            </ControlTemplate>
    
          </Button.Template>
    
        </Button>
    
      </Grid>
    
    </Window>

     

    This XAML code give me this: 

    http://img59.imageshack.us/i/testhq.jpg/

    (They are 2 images, one on the other)

     

    But when i write the codebehind it give me an error:

    http://img546.imageshack.us/img546/1594/test2s.jpg

    Know if I create a RaisePropertyChanged method, when i run the application, it doesn't change images when i click on the button!

     

    Thank u,

    Zahir M.

     


    Thursday, March 31, 2011 12:13 PM
  • there is a complete project, you could download it from this link:

    http://cid-41e44c402aaada87.office.live.com/self.aspx/For%20t50su37/ChangeImageButton.rar?sa=273620841

    Another method, you could use a trigger, refer to:

    <Window.Resources>

            <ControlTemplate x:Key="FirstImage" TargetType="{x:Type Button}">

                <Grid >

                    <Image x:Name="myimage" Source="Desert.jpg" Height="27" Width="65" />

                </Grid>

                <ControlTemplate.Triggers >

                    <DataTrigger Binding="{Binding Path=Flag}" Value="True">

                        <Setter TargetName="myimage" Property="Source" Value="Penguins.gif" />

                    </DataTrigger>

                </ControlTemplate.Triggers>

            </ControlTemplate>

        </Window.Resources>

    the third method, you could trigger the image visibilty.

     

    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, March 31, 2011 1:56 PM
  • Hi M.Zahir,

    I am marking your issue as "Answered", if you have new findings about your issue, please let me know.

     

    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, April 11, 2011 11:46 AM