locked
Why is polygon being "cut off" RRS feed

  • Question

  • 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?



    • Edited by Mark Tiede Monday, October 3, 2016 1:26 PM
    Monday, October 3, 2016 1:21 PM

Answers

  • Hi Mark Tiede,

    After compare the XAML for Polygon and Rectangle, I find the different between them is that the Polygon need to set the Point property to draw the shape of Polygon but Rectangle need not assign the Point property.

    In your situation, the problem should be caused by the Width, Height and the Point in your Polygon. When I remove the Width and Height property for the Polygon, it will show completely in Canvas.

         <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" 
              IsHitTestVisible="True"
              >
            </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>

    Best Regards,
    Weiwei


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, October 5, 2016 2:17 AM
    Moderator

All replies

  • Hi Mark Tiede,

    After compare the XAML for Polygon and Rectangle, I find the different between them is that the Polygon need to set the Point property to draw the shape of Polygon but Rectangle need not assign the Point property.

    In your situation, the problem should be caused by the Width, Height and the Point in your Polygon. When I remove the Width and Height property for the Polygon, it will show completely in Canvas.

         <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" 
              IsHitTestVisible="True"
              >
            </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>

    Best Regards,
    Weiwei


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, October 5, 2016 2:17 AM
    Moderator
  • Well that is odd.  At first, the triangle didn't show at ALL in the designer (which is what I would expect).  Then I decided to run the code and it worked!  Then when I went back to the designer the triangle showed up.  Just odd.

    Thanks in any case.  That seemed to make it work.  Though I don't totally understand it, nor why it reacted the way it did, nor why the width and height aren't required.

    • Edited by Mark Tiede Wednesday, October 5, 2016 12:15 PM
    Wednesday, October 5, 2016 12:05 PM