Click here to Skip to main content
15,176,816 members
Please Sign up or sign in to vote.
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
Updated 16-May-17 16:52pm
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.

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
   
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");
        }
    }
   

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900