locked
How to set MaxWidth of a rectangle in canvas? RRS feed

  • Question

  • Whatever MaxWidth set to the Rectangle, it's not getting fit into canvas.

    Here is my Xaml

    <Canvas x:Name="canvas" Background="Transparent" MaxWidth="456">
        <Rectangle x:Name="Rect1"  Width="{Binding ActualWidth, ElementName=canvas}" Height="{Binding ActualHeight, ElementName=canvas}" />
    </Canvas>

    Rectangle is filled with an image brush from back end c# like this..

    brush.ImageSource = source; brush.Stretch = Stretch.None; brush.AlignmentX = AlignmentX.Left; brush.AlignmentY = AlignmentY.Top; var currentPos = new Point(info.ImageSize.Width / 2, info.ImageSize.Height / 2);

    if (info.ImageSize.Width > info.ImageSize.Height)

    {

    currentScale = outputSize.Height / info.ImageSize.Height;

    }

    else

    {

    currentScale = outputSize.Width / info.ImageSize.Width;

    }

    currentAngle = 0.0;

    CompositeTransform gestureTransform = new CompositeTransform();
    gestureTransform.CenterX = currentPos.X;
    gestureTransform.CenterY = currentPos.Y;
    gestureTransform.Rotation = currentAngle;

    gestureTransform.ScaleX = gestureTransform.ScaleY = currentScale;

    gestureTransform.TranslateX = -currentPos.X + Rect1.Width / 2.0;
    gestureTransform.TranslateY = -currentPos.Y + Rect1.Height / 2.0;

    brush.Transform = gestureTransform; Rect1.Fill = brush;


    Screenshots..


    Clipr : Best ever clipping tool in Windows Phone!
    Download here


    • Edited by venu238 Wednesday, September 24, 2014 7:34 PM
    Wednesday, September 24, 2014 7:24 PM

Answers

  • I'm transforming the Image brush of the rectangle with respect to output rectangle size and scale.

    var currentPos = new Point(info.ImageSize.Width / 2, info.ImageSize.Height / 2);

    if (info.ImageSize.Width > info.ImageSize.Height)

    {

    currentScale = outputSize.Height / info.ImageSize.Height;

    }

    else

    {

    currentScale = outputSize.Width / info.ImageSize.Width;

    }

    currentAngle = 0.0;

    CompositeTransform gestureTransform = new CompositeTransform();
    gestureTransform.CenterX = currentPos.X;
    gestureTransform.CenterY = currentPos.Y;
    gestureTransform.Rotation = currentAngle;

    gestureTransform.ScaleX = gestureTransform.ScaleY = currentScale;

    gestureTransform.TranslateX = -currentPos.X + outputSize.Width / 2.0;
    gestureTransform.TranslateY = -currentPos.Y + outputSize.Height / 2.0;

    brush.Transform = gestureTransform;

    It solved my issue, previously I was transforming the brush before setting the outputSize, now I'm transforming it after getting the values of outputSize.


    Clipr : Best ever clipping tool in Windows Phone!
    Download here

    • Proposed as answer by Oliver Ulm Thursday, October 9, 2014 8:09 AM
    • Marked as answer by venu238 Thursday, October 9, 2014 8:55 AM
    Thursday, October 9, 2014 7:02 AM

All replies

  • Is there a reason you're using Canvas instead of Grid? Also, your Height/Width bindings are a convoluted way to achieve layout.
    Wednesday, September 24, 2014 9:34 PM
  • Yeah I'm using canvas to manipulate the rectangle for rotating, scaling, panning etc..

    Clipr : Best ever clipping tool in Windows Phone!
    Download here

    Thursday, September 25, 2014 6:51 AM
  • Could you please share a sample with us? I have interested in this issue. if you have solved this issue. May I know the solution? Thanks
    Thursday, October 9, 2014 6:35 AM
  • I'm transforming the Image brush of the rectangle with respect to output rectangle size and scale.

    var currentPos = new Point(info.ImageSize.Width / 2, info.ImageSize.Height / 2);

    if (info.ImageSize.Width > info.ImageSize.Height)

    {

    currentScale = outputSize.Height / info.ImageSize.Height;

    }

    else

    {

    currentScale = outputSize.Width / info.ImageSize.Width;

    }

    currentAngle = 0.0;

    CompositeTransform gestureTransform = new CompositeTransform();
    gestureTransform.CenterX = currentPos.X;
    gestureTransform.CenterY = currentPos.Y;
    gestureTransform.Rotation = currentAngle;

    gestureTransform.ScaleX = gestureTransform.ScaleY = currentScale;

    gestureTransform.TranslateX = -currentPos.X + outputSize.Width / 2.0;
    gestureTransform.TranslateY = -currentPos.Y + outputSize.Height / 2.0;

    brush.Transform = gestureTransform;

    It solved my issue, previously I was transforming the brush before setting the outputSize, now I'm transforming it after getting the values of outputSize.


    Clipr : Best ever clipping tool in Windows Phone!
    Download here

    • Proposed as answer by Oliver Ulm Thursday, October 9, 2014 8:09 AM
    • Marked as answer by venu238 Thursday, October 9, 2014 8:55 AM
    Thursday, October 9, 2014 7:02 AM
  • Just a note on why setting MaxWidth doesn't fit anything inside the Canvas. The Canvas is a Layout Control that does not affect it's contents. It allows you to position and size them freely (similar to how layouting worked in Windows Forms). So the Canvas only takes a look at Width and Height and uses those.

    Other Layouting controls like the StackPanel incorporate MinWidth/MaxWidth into their layouting decisions.

    Thursday, October 9, 2014 8:11 AM