Changing the image on a button when clicked xaml - windows

Question

im trying to change between two images of a button when the same button is clicked
my xaml code is
<Button x:Name="BidderOne"
Click="BidderOne_Click" Height="5"
Grid.Row="2"
BorderBrush="#FFE7E3E3"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="350,0,0,280"
>
<Button.Template>
<ControlTemplate>
<Image x:Name="BidderOneImage"
Source="/Assets/Star.png"
Width="50"/>
</ControlTemplate>
</Button.Template>
</Button>
im not sure what to write in my class, but what i found was something along the lines of this
private void BidderOne_Click(object sender, RoutedEventArgs e)
{
var selectedBidder = sender as Button;
// Button btn = new Button();
// btn = BidderOne;
ControlTemplate dt = BidderOne.Template;
Image btnImage = (Image)dt.TargetType = ;
var img = (Image)(selectedBidder.ContentTemplateRoot as StackPanel).Children[0];
var uri = new Uri("/Assetes/ClubsLogo.png", UriKind.Relative);
// var sri = Windows.UI.Xaml.Application.("Assetes/ClubsLogo.png", UriKind.Relative);
imgOn.UriSource=uri;
img.Source = imgOn;
}

Answer 1

It is not recommended to change the ControlTemplate of a Control at runtime. For these situations you should create a custom control.
I have written a simple ImageButton just so you can get the idea of creating what is needed for your problem.
Here is the code:
public sealed class ImageButton : Button
{
private Image _image;
public ImageButton()
{
this.DefaultStyleKey = typeof (Button);
_image = new Image();
}
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
this.Content = _image;
OnImage1SourceChanged(null, null);
}
public ImageSource Image1Source
{
get { return (ImageSource)GetValue(Image1SourceProperty); }
set { SetValue(Image1SourceProperty, value); }
}
public static readonly DependencyProperty Image1SourceProperty =
DependencyProperty.Register("Image1Source",
typeof (ImageSource),
typeof (ImageButton),
new PropertyMetadata(null, OnImage1SourceChangedCallback));
private static void OnImage1SourceChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var imageButton = d as ImageButton;
if (imageButton == null) return;
imageButton.OnImage1SourceChanged((ImageSource)e.OldValue, (ImageSource)e.NewValue);
}
private void OnImage1SourceChanged(ImageSource oldValue, ImageSource newValue)
{
if (_image != null)
{
_image.Source = Image1Source;
}
}
public ImageSource Image2Source
{
get { return (ImageSource)GetValue(Image2SourceProperty); }
set { SetValue(Image2SourceProperty, value); }
}
public static readonly DependencyProperty Image2SourceProperty =
DependencyProperty.Register("Image2Source",
typeof (ImageSource),
typeof (ImageButton),
new PropertyMetadata(null));
protected override void OnTapped(TappedRoutedEventArgs e)
{
base.OnTapped(e);
if (_image != null)
{
_image.Source = Image2Source;
}
}
}
and you use it like this:
<controls:ImageButton Width="60" Height="60" Image1Source="/Assets/Images/Chat/ic_comment_favorite_yellow.png" Image2Source="/Assets/Images/Flags/afghanistan.png"/>

Answer 2

Try this
EDITED
private void BidderOne_Click(object sender, RoutedEventArgs e) {
var selectedBidder = sender as Button;
// WRONG -> Image image = selectedBidder.Template.FindName("BidderOneImage", selectedBidder) as Image;
Image image = VisualTreeHelper.GetChild(selectedBidder, 0) as Image;
image.Source = new BitmapImage(new Uri("NEW IMAGE URI"));
}