How do I create a rectangular button with a word?

I start with:

I want to place the word "Discarded" on the button. I tried adding Discarded:

No matter where I insert Discarded, it results in an error.

I also want a white Foreground.

The issue you’re facing is due to the fact that a Button.Content can only contain one child element. In your case, you’re trying to add both a Rectangle and a TextBlock as direct children of Button.Content, which is not allowed.

To solve this, you can use a Grid or a StackPanel to contain both the Rectangle and the TextBlock. Here’s how you can do it:

In this code, I’ve created a custom ControlTemplate for the Button. Inside this template, I’ve added a Grid that contains both the Rectangle and the TextBlock. The TextBlock is centered horizontally and vertically within the Grid. The Foreground property of the TextBlock is set to “White”, which will make the text appear white. The Button’s Width and Height are set to “90” and “30” respectively to match the size of your original Rectangle. This should give you a rectangular button with the word “Discarded” on it. The word will be white and centered on the button.

Please replace the #444444 with the actual color code you want to use for the button background. If you want to keep the gray color, you can use #444444.

Thanks

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Naimish Makwana2y ago
Accepted answer
The issue you’re facing is due to the fact that a Button.Content can only contain one child element. In your case, you’re trying to add both a Rectangle and a TextBlock as direct children of Button.Content, which is not allowed.

To solve this, you can use a Grid or a StackPanel to contain both the Rectangle and the TextBlock. Here’s how you can do it:
In this code, I’ve created a custom ControlTemplate for the Button. Inside this template, I’ve added a Grid that contains both the Rectangle and the TextBlock. The TextBlock is centered horizontally and vertically within the Grid. The Foreground property of the TextBlock is set to “White”, which will make the text appear white. The Button’s Width and Height are set to “90” and “30” respectively to match the size of your original Rectangle. This should give you a rectangular button with the word “Discarded” on it. The word will be white and centered on the button.

Please replace the #444444 with the actual color code you want to use for the button background. If you want to keep the gray color, you can use #444444.

Thanks