UWP - Center Text Vertically in TextBlock

Question

So there is an existing thread which states that in order to vertically align text, you need to wrap in a border. However, I tried this, and instead of aligning vertically, the TextBlock went in a corner, still vertically aligned to the top. I don't know if this has something to do with the differences of WPF and UWP, but no matter, it didn't work. My TextBlock is defined as follows:

<TextBlock x:Name="TextBlock" Margin="855,226,0,0" TextWrapping="Wrap"
     VerticalAlignment="Top" Height="150" Width="150" FontFamily="DOCK11" 
     TextAlignment="Center" Padding="0" HorizontalAlignment="Left" Text="Sample Text..."/>`

With the given dimensions, would it be possible to vertically align my TextBlock's text? Thanks in advance.

score 2 · Accepted Answer · answered Nov 14 '17 at 00:16

2

According to the documentation TextBlock.TextAlignment

Gets or sets a value that indicates the horizontal alignment of text content.

To achieve your goal you indeed should wrap TextBlock with a Border and set it's VerticalAlignment to Center.

    <Border Height="150" 
            Width="150"
            Margin="855,226,0,0">
        <TextBlock TextWrapping="Wrap" 
                   FontFamily="DOCK11"
                   TextAlignment="Center" 
                   VerticalAlignment="Center"
                   Padding="0" 
                   Text="Sample Text..."/>
   </Border>

answered Nov 14 '17 at 00:16

foxanna

1,500
16
26

For some reason, when I do this, the TextBlock goes off screen, and I can't even find it. – Orion31 Nov 14 '17 at 01:06
It goes off the screen because of `Padding` value you set. If it's a leftover from your experiments, just remove it at all. – foxanna Nov 14 '17 at 01:08
My padding is set to 0 all the way. – Orion31 Nov 14 '17 at 01:09
Sorry, I meant `Margin` – foxanna Nov 14 '17 at 01:09
The margin is set to 0 as well. I have no idea what's going on! – Orion31 Nov 14 '17 at 01:10
Then you should post an updated code. In your original example you had `Margin="855,226,0,0"` – foxanna Nov 14 '17 at 01:12
` ` – Orion31 Nov 14 '17 at 01:13
You said `Margin` is set to `0`, but look at `Border` `Margin`, it's `"855,165,495,685"`! – foxanna Nov 14 '17 at 01:16
Oh! I thought you meant the margin for the TextBlock. – Orion31 Nov 14 '17 at 01:16
Now that you wrap the `TextBlock` into `Border`, some dimention properties moved from `TextBlock` to `Border`. Pay more close attention to my answer, `TextBlock` doesn't have `Width` and `Height` anymore, `Border` does. – foxanna Nov 14 '17 at 01:19
Fixed the margin, however, I still cannot see it. – Orion31 Nov 14 '17 at 01:19
I removed the width and the height, and still cannot see it – Orion31 Nov 14 '17 at 01:21
The problem might be somewhere up in the view layout. If you set `Background` property of the `Border`, will you be able to see it. If not - it's not a `TextBlock` problem. – foxanna Nov 14 '17 at 01:25
For some reason, the margin was added back automatically, however, now the textblock is way out of position. **Edit**: There is no background – Orion31 Nov 14 '17 at 01:26
Notice that you still have `VerticalAlignment` of `TextBlock` set to `Top` despite of `Center` value in the answer. – foxanna Nov 14 '17 at 01:29
Worked perfectly! Visual Studio likes changing things itself from time to time. Thanks for that! Final Code: ` ` – Orion31 Nov 14 '17 at 01:32
Even though `Margin` values seem odd to me, I'm glad it worked in the end. – foxanna Nov 14 '17 at 01:33
The margin on the border moved the text from the top left corner to where I wanted it. Without it, it defaulted to the corner. – Orion31 Nov 14 '17 at 01:34
But that means your UI is not scalable and `TextBlock` is not truly centered vertically. – foxanna Nov 14 '17 at 01:45
It seems centered to me. I mean in the sense that I have my border placed on a rectangle with the dimensions of 150x150, and the text is centered vertically in that rectangle – Orion31 Nov 14 '17 at 01:47
1

@Orion31: Not Visual Studio is changing the Margin. I guess you are moving the TextBox with the mouse to you wanted location. – Martin Backasch Nov 14 '17 at 13:27

UWP - Center Text Vertically in TextBlock

1 Answers1