I am trying to center some text in a UI text block, but choosing Text Alignment - Center only centers the text Horizontally, leaving the text centred at the top of the UI block. How do I get the text to display centred vertically as well, so it is in the middle of the TextBlock?
Any help is massively appreciated.
Thanks for your reply.
Unfortunately this only enables me to set the TextBlock centred vertically and Horizontally, this is not what I need.
I need to be able to centre the text vertically, within the TextBlock. The alignment of text within the block is controlled by the TextAlignment option, but it only works on the text by changing it’s horizontal alignment. There appears to be no way to align the text vertically within the TextBlock, but there must be a way to centre text vertically, I would be amazed if that wasn’t in the engine.
What are you trying to achieve that the verticalement alignment of the TextBlock can’t do?
As far as I know most GUI framework don’t offer a vertical alignment for inside a TextBlock (e.g. WPF, Winforms). And the reason is that would be redundant and redundancy is expensive.
Alignment, margin, and padding are usually sufficient to achieve any layout.
I’ll try and show you what I am trying to achieve here, with the screenshots from the old Unity version of the game I am making in Xenko
The UI panel displays the chart position, Title and Artist of a song. Note they are all centred vertically (this is available in unity UI editing tools):
Because the text is centred vertically, when a title is too long for one line and the text wraps, it remains centred vertically in the panel:
For clarity the unity textbox is the size of each of the coloured panels and supports upto 3 lines of text.
When I try and simulate this in the TextBlock in Xenko, I can use the upper margin to centre a single line in the middle of the TextBlock, however, when the line wraps, it starts from the middle down, rather than centering around the new midpoint of the text. 3 lines ends up with the lower line being off the TextBlock display.
I would have thought keeping text vertically in the centre of a block would have been common in any presentation software. Powerpoint and Excel have it, I know they are not GUI frameworks, but they are tools where people work to present text. I have just always assumed vertical alignment to be as common as horizontal alignment. I don’t mean to cause any offence.
Are you putting everything inside a Grid and using its row and column definitions? If so, simply setting the entire TextBlock’s Vertical Alignment to Center should work (with its Height set to NaN), like Kryptos referenced. This may result in the TextBlock being smaller than the grid cell, but that shouldn’t create any issues, as your background image can be set up separately to fill the entire cell. For situations that don’t need a Grid (your situation is perfect for one, though), putting the TextBlock inside a Border should accomplish the same result.
For example, here’s my attempt at creating a similar layout in Xenko with the Grid method I mention above (I created a smaller, fixed-size Grid inside the default one that takes up the entire screen):
Thanks for your reply.
I have been using Canvas for my UI not Grid. I will look into doing this with the Grid, and see how it goes.
Ah yes. I did not think you could be using Canvas.
It’s kind of a special case that doesn’t follow usual layout rules. I would recommend against using it when you need proper alignment of UI elements.
Canvas is meant to be used in cases where layout is not important and elements are placed manually using absolute or relative positions. Especially if you need to have elements animated (e.g. moving) which would be too expensive in a panel because it would cause a recalculation of the layout, while canvas is more like a standalone.
While you’re here. Is it possible to put animated sprites or models in a UI?
Thanks for your help. I think I have a handle on the Grid system now. I need to put a lot of work into this obviously, but I now have the basics of what I need:
Thanks again.
I remember there is a component to link a model to a UI. I’ll have to have a look to see if it was released or just something experimental from my memory. It might even have some restriction (like not working in full screen UI).
