locked
TextBox Not Matching Point Coordinates When Resized RRS feed

  • Question

  • Hello. I am trying to add a text box to my LayoutRoot on mouse click. The code I am using works well as long as the TextBox height and width are set to Auto. The problem is that when the TextBox is added to the LayoutRoot, it is very large and when I change the size in code, the TextBox is no longed added where I click. It shows up somewhere in the middle of the LayoutRoot or off the screen. Here is the code I am using:

     

    Point position = Mouse.GetPosition(LayoutRoot);
    
    TransformGroup textBoxTransformGroup = new TransformGroup();
    
    TranslateTransform textBoxTransform = new TranslateTransform(position.X,position.Y);
    
    textBoxTransformGroup.Children.Add(textBoxTransform);
    
    TextBox myTextBox = new TextBox();
    
    myTextBox.Width = 50; //take this line out and the next and the text box will be very large, but in the proper position
    
    myTextBox.Height = 22;
    
    myTextBox.RenderTransform = textBoxTransformGroup;
    
    LayoutRoot.Children.Add(myTextBox);
    
    Thanks! 

     

    Friday, April 2, 2010 6:38 PM

Answers

  • The reason for your problem lies within the default behaviour of your LayoutRoot. By default, a Grid tries to center and maximize its content, whereas a Canvas positions its Content in the top left corner. So if you use a Grid and set your controls width and heigth to auto, the Grid maximizes the control, so the control fills up the whole space available. Also, the translation is applied and the top left corner of your control is moved.

    If you set a width and height of your control, Grid centers it. Also, the translation is applied, so the control is moved to the bottom and right - from the center of your Grid! Using a Canvas doesn't result in such a problem, because a Canvas does not try to align its content in any way, apart from using Canvas.Left, Canvas.Top, Canvas.Right or Canvas.Bottom - which you don't use.

    There are several workarounds. At first, you could use a Canvas instead of a Grid. Also, you could set additional properties on your TextBoxes:

    myTextBox.HorizontalAlignment = HorizontalAlignment.Left;
    myTextBox.VerticalAlignment = VerticalAlignment.Top;

    This way, you tell the Grid to position your TextBox relative to the Grid's top left corner.

    Hope this helps. If there are questions remaining unanswered, don't hesitate to ask.

    • Proposed as answer by ItsNotYou Saturday, April 3, 2010 5:03 PM
    • Proposed as answer by ItsNotYou Saturday, April 3, 2010 5:04 PM
    • Marked as answer by psychman Monday, April 5, 2010 5:57 PM
    Saturday, April 3, 2010 5:03 PM

All replies

  • Update: I am not sure why, but it seems to have something to do with the fact that I am trying to place the text box in a Grid (LayoutRoot). I tried just adding a new Canvas to the LayoutRoot and then I could add the text box to the place I click, even if I specify the size of the text box.
    Friday, April 2, 2010 9:02 PM
  • The reason for your problem lies within the default behaviour of your LayoutRoot. By default, a Grid tries to center and maximize its content, whereas a Canvas positions its Content in the top left corner. So if you use a Grid and set your controls width and heigth to auto, the Grid maximizes the control, so the control fills up the whole space available. Also, the translation is applied and the top left corner of your control is moved.

    If you set a width and height of your control, Grid centers it. Also, the translation is applied, so the control is moved to the bottom and right - from the center of your Grid! Using a Canvas doesn't result in such a problem, because a Canvas does not try to align its content in any way, apart from using Canvas.Left, Canvas.Top, Canvas.Right or Canvas.Bottom - which you don't use.

    There are several workarounds. At first, you could use a Canvas instead of a Grid. Also, you could set additional properties on your TextBoxes:

    myTextBox.HorizontalAlignment = HorizontalAlignment.Left;
    myTextBox.VerticalAlignment = VerticalAlignment.Top;

    This way, you tell the Grid to position your TextBox relative to the Grid's top left corner.

    Hope this helps. If there are questions remaining unanswered, don't hesitate to ask.

    • Proposed as answer by ItsNotYou Saturday, April 3, 2010 5:03 PM
    • Proposed as answer by ItsNotYou Saturday, April 3, 2010 5:04 PM
    • Marked as answer by psychman Monday, April 5, 2010 5:57 PM
    Saturday, April 3, 2010 5:03 PM