TextWrap in StackPanel
Clash Royale CLAN TAG#URR8PPPTextWrap in StackPanel
I have a UserControl which a couple of buttons and some Textblock's. For some reason, the TextWrap is not working for this Textblock.
<StackPanel Grid.Column="0" Margin="0 0 0 10">
<TextBlock FontWeight="DemiBold" Text="Account closure" x:Name="Message"
Margin="0 6 0 2"
FontSize="18" />
<StackPanel Orientation="Horizontal" >
<TextBlock Text="A random text here, here, here "
Margin="0 6 0 0"
FontSize="18" />
<TextBlock Text="AZEQSD"
Margin="0 6 0 0"
TextWrapping="Wrap" FontWeight="DemiBold" FontSize="18" />
</StackPanel>
</StackPanel>
The output (The selected part = second StackPanel) while the part where I have the mouse = the second textblock with the TextWrapping property set to Wrap.
See here
A 'wrap', by definition, is breaking content down into a second line when the width of the content is more than the container. You haven't specified a container size, so there can't be an overflow.
– Sach
15 mins ago
2 Answers
2
StackPanel sizes to fit its contents unless it is actually given a size. So, in the "basic" case, word wrapping doesn't work as you show.
StackPanel
The TextBlock in the "main" StackPanel will have wrapping work because its width is constrained by using Grid.Column. The nested StackPanel has no such restriction. The easiest thing would be to put the second stack panel in the main grid (row 1, column 0) so it is also constrained; though there are a number of other possibilities.
TextBlock
StackPanel
Grid.Column
StackPanel
I did that and It didn't do anything from what I can see. Should I set a maximum width for the grid?
– Csharpnewbie
2 mins ago
A DockPanel adjust better with this kind os situation:
<StackPanel Grid.Column="0" Margin="0 0 0 10">
<TextBlock FontWeight="DemiBold" Text="Account closure" x:Name="Message"
Margin="0 6 0 2"
FontSize="18" />
<DockPanel>
<TextBlock DockPanel.Dock="Left" Text="A random text here, here, here "
Margin="0 6 0 0"
FontSize="18" />
<TextBlock Text="AZEQSD"
Margin="0 6 0 0"
TextWrapping="Wrap" FontWeight="DemiBold" FontSize="18" />
</DockPanel>
</StackPanel>
Edit:
Quoting BradleyDotNET's comment:
This works because DockPanel will constrain the last child to the
remaining space, and it fills its container which is the stack panel
that is constrained to the Grid.
DockPanel
Note that this works because
DockPanel will constrain the last child to the remaining space, and it fills its container which is the stack panel that is constrained to the Grid. I would include this in your answer because to someone not very familiar with how each panel works, this is just magic. If the first TextBlock in the DockPanel was the one where it was supposed to wrap it wouldn't work at all.– BradleyDotNET
11 mins ago
DockPanel
Grid
TextBlock
DockPanel
@BradleyDotNET I added the info, thanks.
– Magnetron
7 mins ago
Thank you! However, It's not going to the first of the line which is what I want to achieve: i.imgur.com/EVlE77A.png
– Csharpnewbie
3 mins ago
@Csharpnewbie what do you mean? You want the second line to start in the left corner, aligned with "A random"? Or do you want the whole TextBlock to go to the second line?
– Magnetron
1 min ago
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Great first question! Its really nice to see someone ask the right way the first time.
– BradleyDotNET
15 mins ago