VS2022 - Arrow keys automatically insert alignment properties in XAML designer

Simon Gaudin 0

I recently upgraded to Visual Studio Professional 2022, and I have an issue I did not encounter with Visual 2019.

For the record, I'm using Visual Studio Professional 2022 Version 17.4.4.

When using the XAML Designer, if I happen to move a control whithin a Canvas with the arrow keys on my keyboard, "Horizontal Alignment" and "VerticalAlignment" properties get automatically added to the code of the control, in the XAML Editor. This concerns every control inside a Canvas (I tested with as many controls as I could, and it happened every time).

I found that the Left Arrow and Right Arrow keys add this to the control :

HorizontalAlignment="Left" VerticalAlignment="Center"

And that the Up Arrow and Down Arrow keys add this to the control :

HorizontalAlignment="Center" VerticalAlignment="Top"

This problem also occurs in Blend 2022, with the exact same context.

I've searched everywhere in the XAML Designer Settings, the keyboard shortcuts, the elements' properties, but I found nothing that could explain such an issue.

It is particularly annoying, because these automatically inserted properties get on every control I move with the arrow keys, flooding the code with useless properties.

I hope my explanation was clear, and I will be happy to provide extra examples and information if needed.

2 answers

Michael Taylor 54,401 Reputation points

2023-02-10T15:21:59.4+00:00

I'm not sure if that is by design or not. There have been issues reported over the years in the XAML editor related to it auto-setting properties. I recommend you use Report a Problem in VS and record the problem so the XAML team can look at the issue.
Please sign in to rate this answer.
Simon Gaudin 0 Reputation points

2023-02-13T09:38:42.26+00:00

Unfortunately, I'm in a professional environment in which I do not have direct access to Internet, so I cannot use this feature, hence this post. And I do not have a Professional License at home, so I'm not sure if I can reproduce the exact same problem on my personal computer.

Michael Taylor 54,401 Reputation points

2023-02-13T16:26:38.0366667+00:00

The difference between editions is just in features. You should be able to try and replicate the issue at home with no issues. You can use Community edition if you like.

Alternatively use Window's Step Recorder to record a video of the problem. Then use your other copy of VS (at home?) to submit the problem along with the recording. Make it clear that the issue is occurring on a machine that doesn't have INet access so the instance data the tool captures isn't correct. That will make it a lot harder to replicate though.

Michael Taylor 54,401 Reputation points

2023-02-13T16:27:02.63+00:00

Do you have a simple repro process we can try to see if we can repro the issue you're seeing?

Simon Gaudin 0 Reputation points

2023-02-14T09:47:01.9033333+00:00

Okay, I will try with a Community version at home when I have the time to install everything on my computer, thanks for the tip.

As for the repro process, as far as I understand it, you just need to open any User Control or Window in the XAML Designer, place a Canvas in it, and then place any element in the Canvas (a Rectangle, a Border, anything). Finally, click on the element you placed in the Designer to select it, and move it with the arrow keys of your keyboard.

Here is a code example which you can copy/paste in a XAML file to test easily :

<Canvas Width="1920" Height="1080"> <Rectangle Width="100" Height="100" Fill="White"/> </Canvas>

Michael Taylor 54,401 Reputation points

2023-02-14T15:31:43.91+00:00

Given your example XAML and the scenario I believe the behavior is correct. To position items within the canvas you have to set the left and/or top positions. For those to make sense then the alignment has to be set the same. So the designer is calling SetLeft and/or SetTop to set the offset as you move with the arrow keys and I suspect the underlying implementation is setting the alignment properties automatically.

Simon Gaudin 0 Reputation points

2023-02-14T16:28:14.2133333+00:00

Well, you indeed have to set the Canvas.Left and Canvas.Top positions, and this behaviour is perfectly normal in my opinion. It was the same on every version of Visual Studio I ever worked on.

Concerning the alignment properties, they make no sense in a Canvas, because you already set the position of your control using the Canvas.Left/Canvas.Top properties (you can use Canvas.Right and Canvas.Bottom as well of course). Setting alignment properties hence have no effect at all on the control.

Quoting the Canvas documentation article : "Canvas is the only panel element that has no inherent layout characteristics. [...] This provides flexibility for situations in which inherent sizing constraints or alignment are not needed or wanted. [...] As a result, vertical alignment and horizontal alignment have no effect inside a Canvas."
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.
Hui Liu-MSFT 48,541 Reputation points Microsoft Vendor

2023-02-21T08:21:34.6+00:00

Hi,@Simon Gaudin. Welcome Microsoft Q&A.

Not sure if it's the design.

There are properties FrameworkElement.VerticalAlignment Property and FrameworkElement.HorizontalAlignment Property in FrameworkElement.

Canvas inherits from the FrameworkElement, so it will have both properties as well.

But Canvas has its own characteristics, as you pointed out.

Canvas does not use VerticalAlignment when composing layout, because Canvas is based on absolute positioning.

It is recommended that you write the code manually instead of just dragging it.

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Simon Gaudin 0 Reputation points

2023-03-02T09:55:25.36+00:00

Hi,

Thanks for your answer, however it does not explain the strange behavior I'm experiencing. As I mentioned in the post, this happens only in Visual Studio 2022, and not in Visual Studio 2017 and 2019.

I agree with you when it comes to recommanding coding manually instead of using the Designer, but there are situations where it's way easier to use the Designer, like the one in which I encountered this issue.

Tianyu Sun-MSFT 30,811 Reputation points Microsoft Vendor

2023-03-03T10:07:46.44+00:00

Hello @Simon Gaudin ,

Thank you for posting this issue in Microsoft Q&A forum.

I reproduced this issue on my side. Currently there’s no document which introduces this behavior, I may recommend directly submitting a ticket(suggestion/feedback) on our Developer Community and confirm this behavior with Visual Studio Product Team.

I will also help to report this issue.

Please feel free to let us know if you have any concerns.

Sincerely,

Tianyu

Simon Gaudin 0 Reputation points

2023-03-03T13:16:45.8366667+00:00

Hi, thanks for your comment.

I will download the Community Edition of VS2022 on my personal computer and report this problem with the feedback feature in VS.

Thanks, and have a good day !

Tianyu Sun-MSFT 30,811 Reputation points Microsoft Vendor

2023-04-11T09:43:27.9233333+00:00

Hi @Simon Gaudin ,

If you do submit the ticket, please share the ticket link here for better tracking the issue.

If you have any other concerns, feel free to contact us.

Have a good day.

Regards,

Tianyu
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

VS2022 - Arrow keys automatically insert alignment properties in XAML designer

2 answers

Your answer