Why is polygon being "cut off"

I have this XAML for a Rectangle:

<UserControl

    x:Class="Shapes.NumberedShapes.NumberedSquare"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:converters="clr-namespace:Shapes.Converters"><UserControl.Resources><converters:MouseOverConverter x:Key="ColorConverter"/></UserControl.Resources><Canvas
       x:Name="LayoutRoot"
       Background="Transparent"
       Width="100"
       Height="100"><Rectangle x:Name="Rectangle1"
          Canvas.Left="-50"
          Canvas.Top="-50"
          Stroke="green"
          StrokeThickness="3"
          Fill="{Binding MouseOver, Converter={StaticResource ColorConverter}}"
         Height="100"
          Width="100"><i:Interaction.Triggers><i:EventTrigger EventName="MouseEnter" ><i:InvokeCommandAction Command="{Binding MouseEnterCommand}"/></i:EventTrigger><i:EventTrigger EventName="MouseLeave" ><i:InvokeCommandAction Command="{Binding MouseLeaveCommand}"/></i:EventTrigger></i:Interaction.Triggers></Rectangle><Grid
          Canvas.Left="-40"
          Canvas.Top="-25"
          Width="80"
          Height="50"
         Background="Transparent"
          IsHitTestVisible="False"><Viewbox ><TextBlock Text="{Binding IDNumber, FallbackValue=##}" Foreground="Black" /></Viewbox></Grid></Canvas><UserControl.RenderTransform><TransformGroup><RotateTransform Angle="{Binding Angle}"/><ScaleTransform ScaleX=".5" ScaleY=".5"/><TranslateTransform X="{Binding X}" Y="{Binding Y}"/></TransformGroup></UserControl.RenderTransform></UserControl>

And this XAML for a Polygon:

<UserControl

    x:Class="Shapes.NumberedShapes.NumberedTriangle"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:converters="clr-namespace:Shapes.Converters"><UserControl.Resources><converters:MouseOverConverter x:Key="ColorConverter"/></UserControl.Resources><Canvas
       x:Name="LayoutRoot"
       Background="Transparent"
       Width="100"
       Height="100"><Polygon x:Name="Polygon1"
          Points="0,-50 50,50 -50,50"
          Stroke="green"
          StrokeThickness="3"
          Fill="{Binding MouseOver, Converter={StaticResource ColorConverter}}"
          Height="100"
          Width="100"
          IsHitTestVisible="True"><i:Interaction.Triggers><i:EventTrigger EventName="MouseEnter" ><i:InvokeCommandAction Command="{Binding MouseEnterCommand}"/></i:EventTrigger><i:EventTrigger EventName="MouseLeave" ><i:InvokeCommandAction Command="{Binding MouseLeaveCommand}"/></i:EventTrigger></i:Interaction.Triggers></Polygon><Grid
          Canvas.Left="-25"
          Canvas.Top="0"
          Width="50"
          Height="40"
          Background="Transparent"
          IsHitTestVisible="False"><Viewbox ><TextBlock Text="{Binding IDNumber, FallbackValue=##}" Foreground="Black" /></Viewbox></Grid></Canvas><UserControl.RenderTransform><TransformGroup><RotateTransform Angle="{Binding Angle}"/><ScaleTransform ScaleX=".5" ScaleY=".5"/><TranslateTransform X="{Binding X}" Y="{Binding Y}"/></TransformGroup></UserControl.RenderTransform></UserControl>

In the XAML designer, the rectangle is visible OUTSIDE the canvas.  The polygon only shows the portion that is INSIDE the canvas.  And at run time, the same effect happens.  So in the canvas I've rotated and translated the rectangle and it looks fine.  The polygon rotated and translated, but it is still "chopped off" and only shows the same portion of the polygon that was shown in the designer. 

In both cases, the TextBlock renders fine and is NOT cut off.  Any clues?