Bind an image to a button

Question

0.00/5 (No votes)

See more:

I'm trying to show an image within a button (UWP). When I step through the code, the objects are all created properly and the Raise event is being called to update the XAML page - however no image is displayed.

In this example the TEXT content is set on the first button - so I know binding to my object is working.

The 2nd button with the hard coded reference to the asset shows an image.

The problem is that the 3rd button shows nothing, though I can see the XAML is calling the myImage get.

MainPage.xaml

XML

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
     <Grid.RowDefinitions>
         <RowDefinition/>
         <RowDefinition/>
         <RowDefinition/>
     </Grid.RowDefinitions>
     <Button Grid.Row="0" Name="Button1" Content="{Binding myText}"/>
     <Button Grid.Row="1" Name="Button2">
         <Image Source="/Assets/windows-sdk.png"/>
     </Button>
     <Button Grid.Row="2" Name="Button3">
         <Image Source="{Binding myImage}"/>
     </Button>
 </Grid>

mainpage.xaml.cs

C#

sealed partial class MainPage : Page
    {

        myViewModel aViewModel;

        public MainPage()
        {
            this.InitializeComponent();

            aViewModel = new myViewModel();

            this.DataContext = aViewModel;
        }
    }

myViewModel.cs

C#

class myViewModel : INotifyPropertyChanged
    {
        BitmapImage anImage;
        string someText;

        public BitmapImage myImage
        {
            get { return anImage; }
        }
        public string myText
        {
            get { return someText; }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        public void RaiseProperty(string name) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));

        public myViewModel()
        {
            someText = "Some Text";
            RaiseProperty("myText");

            anImage = new BitmapImage(new Uri("ms-appx:/MyAssembly/Assets/windows-sdk.png"));
            RaiseProperty("myImage");
        }
    }

What I have tried:

I've tried returning a string / uri instead of a BitmapImage.

Posted 7-May-17 20:56pm

Rodimus74

Updated 16-May-17 15:52pm

Add a Solution

Comments

Afzaal Ahmad Zeeshan 8-May-17 5:10am

Second approach is also fine, as per my thoughts.

However, you can also pass the Image element — Image control, and then have it be bound to the Button.

Rodimus74 8-May-17 20:16pm

Thank you for your response. I was using Button 1 & 2 as examples - it is Number 3 that I want to get working so that I can dynamically change the image.

Can you please provide further details of the solution you are offering.

Thank you.

2 solutions

Add a Solution

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

Eddie Han · Answer 1 · 2017-05-11T20:28:00

Hi,

I don't know exactly that Image.Source can bind with BitmapImage.

But I did it using character sequence.
char[] can bind with the Image.Source.

here is the example.

XAML :

C#

<Image
    Source="{Binding ImageSource}"
    />

CS:

C#

public bool ViewingImage(string subject)
{
   string strPath = @"C:\Users\Public\Pictures\Sample Pictures\";
   strPath += subject;
   strPath += ".bmp";
   ImageSource = LoadImageForTest(strPath);
   return true;
}

private byte[] LoadImageForTest(string selectedFileName)
{
   BitmapImage bitmapImage = new BitmapImage();
   bitmapImage.BeginInit();
   bitmapImage.UriSource = new Uri(selectedFileName);
   bitmapImage.EndInit();

   byte[] data;
   JpegBitmapEncoder encoder = new JpegBitmapEncoder();
    encoder.Frames.Add(BitmapFrame.Create(bitmapImage));
    using (MemoryStream ms = new MemoryStream())
    {
        encoder.Save(ms);
        data = ms.ToArray();
     }

     return data;
}

I hope that it will be helpful for you.
If you want more information, please contact me.
Thanks you

Rodimus74 · Answer 2 · 2017-05-16T15:52:00

Finally got this working....

MainPage.xaml

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Button Grid.Row="0" Name="Button1" Content="{Binding myText}"/>
    <Button Grid.Row="1" Name="Button2">
        <Image Source="/Assets/windows-sdk.png"/>
    </Button>
    <Button Grid.Row="2" Name="Button3">
        <Image Source="{Binding myImage}"/>
    </Button>
</Grid>

myViewModel.cs

class myViewModel : INotifyPropertyChanged
    {

        public event PropertyChangedEventHandler PropertyChanged;
        public void RaiseProperty(string name) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); string someText;

        private BitmapImage _myImage;
        public BitmapImage myImage
        {
            get
            {
                Uri myURI = new Uri("ms-appx:///Assets/windows-sdk.png");
               
                _myImage = new BitmapImage(myURI);

                return _myImage;
            }
        }

        public string myText
        {
            get { return someText; }
        }


        public myViewModel()
        {
            someText = "Some Text";
            RaiseProperty("myText");

            RaiseProperty("myImage");
        }
    }

Bind an image to a button

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Bind an image to a button

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us