Programmatic creation of image button in cppwinrt - c++

Question

Using cppwinrt (standard C++, not C++/CX) how would you set the content of a Button to an image, programmatically? Has to be programmatically because cppwinrt does not yet support xaml, in which doing that is easy. Here's what I am trying, which results in a functional but empty button:
Button button = Button();
BitmapImage bitmapImage = BitmapImage();
Uri imageUri = Uri(L"ms-appx:///Assets/Images/stopbutton.png");
bitmapImage.UriSource(imageUri);
Image buttonImage = Image();
buttonImage.Height(30);
buttonImage.Width(30);
buttonImage.Source(bitmapImage);
button.Content(buttonImage);
Then of course I add the button, which does show up nicely, though blank. I've tried an absolute path for the .png, but that also fails. There must be a way to do this programmatically in C++.

Answer 1

Your original code works fine on my side. Just make sure that your image really is inside the Assets/Images folder, that you added it to your project and that it is copied with the app content during the build, by checking if the Content parameter in the image properties is set to True.
Edit
After reading your further requirements. Just set the button padding and border thickness to zero, this will remove any space around the image.
Here is a simple working application with your button creation code:
#include <winrt\Windows.ApplicationModel.Activation.h>
#include <winrt\Windows.Devices.Enumeration.h>
#include <winrt\Windows.Foundation.h>
#include <winrt\Windows.UI.Xaml.h>
#include <winrt\Windows.UI.Xaml.Controls.h>
#include <winrt\Windows.UI.Xaml.Media.Imaging.h>
using namespace winrt;
using namespace winrt::Windows::ApplicationModel::Activation;
using namespace winrt::Windows::Devices::Enumeration;
using namespace winrt::Windows::Foundation;
using namespace winrt::Windows::UI::Xaml;
using namespace winrt::Windows::UI::Xaml::Controls;
using namespace winrt::Windows::UI::Xaml::Media::Imaging;
struct App : ApplicationT<App>
{
void OnLaunched(LaunchActivatedEventArgs const &)
{
Image image;
image.Height(30);
image.Width(30);
image.Source(BitmapImage(Uri(L"ms-appx:///Assets/Images/sample.png")));
Button button;
button.Padding(ThicknessHelper::FromUniformLength(0));
button.BorderThickness(ThicknessHelper::FromUniformLength(0));
button.Content(image);
Window window = Window::Current();
window.Content(button);
window.Activate();
}
static void Initialize(ApplicationInitializationCallbackParams const &)
{
make<App>();
}
static void Start()
{
Application::Start(App::Initialize);
}
};
int WINAPI wWinMain(HINSTANCE, HINSTANCE, PWSTR, int)
{
App::Start();
}

Answer 2

OK, here is what is needed to make a button display an image that fills the button: rather than setting the button.Content to an image, create an ImageBrush with the image and set the button.Background to that ImageBrush, e.g.
Button button = Button();
button.Height(30);
button.Width(30);
BitmapImage bitmapImage = BitmapImage();
Uri imageUri = Uri(L"ms-appx:///Assets/Images/stopbutton.png");
bitmapImage.UriSource(imageUri);
ImageBrush imageBrush = ImageBrush();
imageBrush.ImageSource(bitmapImage);
button.Background(imageBrush);
//The button will now look exactly like the image.