WPF Program Issue in XAML not displaying Buttons properly

Question

I'm having an issue in moving a WPF program from "Visual Studio Express 2013 for Windows Desktop" to "Visual Studio Community 2015".

My original WPF program was created in "VS Express 2013 for Windows Desktop". It relied on being able to embed a Grid into a Button. Onto that Grid (within the Button), I would put rectangular shapes. It works fine in VS Express 2013 but does not work correctly in VS Community 2015.

The example below was created in VS Express 2013. It correctly shows both a Red Bordered Rectangle...and a Black Button with a White Cross inside.

<Window x:Class="TestErrors.MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="MainWindow" Height="200" Width="200">
  <Canvas>
      <Rectangle
      Stroke="Red"
      StrokeThickness="10"
      Width="50"
      Height="50"
      Canvas.Left="75"
      Canvas.Top="20"/>
      <Button
          Width="0"
          Height="0"
          Canvas.Left="100"
          Canvas.Top="100">
          <Canvas>
              <Rectangle
              Fill="Black"
              Width="30"
              Height="30"
              Canvas.Left="-15"
              Canvas.Top="-15"/>
              <Rectangle
              Fill="White"
              Width="4"
              Height="20"
              Canvas.Left="-2"
              Canvas.Top="-10"/>
              <Rectangle
              Fill="White"
              Width="20"
              Height="4"
              Canvas.Left="-10"
              Canvas.Top="-2"/>
          </Canvas>
      </Button>
  </Canvas>
</Window>

The above image for VS Express 2013 is correct...the Black button with white cross is displayed correctly.

The identical XAML in Visual Studio Community 2015 in the example below, shows only the Red Rectangle. It is not working as I expected.

<Window x:Class="TestErrors.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:TestErrors"
    mc:Ignorable="d"
    Title="MainWindow" Height="200" Width="200">
  <Canvas>
      <Rectangle
      Stroke="Red"
      StrokeThickness="10"
      Width="50"
      Height="50"
      Canvas.Left="75"
      Canvas.Top="20"/>
      <Button
          Width="0"
          Height="0"
          Canvas.Left="100"
          Canvas.Top="100">
          <Canvas>
              <Rectangle
              Fill="Black"
              Width="30"
              Height="30"
              Canvas.Left="-15"
              Canvas.Top="-15"/>
              <Rectangle
              Fill="White"
              Width="4"
              Height="20"
              Canvas.Left="-2"
              Canvas.Top="-10"/>
              <Rectangle
              Fill="White"
              Width="20"
              Height="4"
              Canvas.Left="-10"
              Canvas.Top="-2"/>
          </Canvas>
      </Button>
  </Canvas>
</Window>

Where is the Black Button with the White Cross inside? What has changed to break my original code?

Answer 1

I'm going to answer my own question. I found the solution to the problem. Apparently older versions of WPF worked with the following code

 <Button
      Width="0"
      Height="0"

The old versions considered these "0" settings as "auto". But now you must specifically use the word "auto" or "Auto"...."0" will no longer give the desired results.

 <Button
      Width="Auto"
      Height="Auto"

 <Button
      Width="auto"
      Height="auto"

Both of the above fix the issue.

Answer 2

Your Button Width and Height are set to 0. Change the values to fit your needs or choose an approach without button.