I have a Label
& a Border
(the line) which I want to show as follows
The problem is client's name can be of any size and then it overlaps on the line. Is there any way to relate the line to the size of the label?
Note: Both components are in the same cell of Grid
.
That's what Grid
is for. You can put a grid inside the cell of a grid, or you could use the outer grid in combination with ColumnSpan
:
<Grid MaxWidth="240">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="Client Name" Grid.Column="0" />
<Border Grid.Column="1" ... />
</Grid>
The first column gets as much space as it needs, the second as much as it can get (which can be more, or less, than it needs). The MaxWidth
which I put on the grid is optional. it makes sure the Client Name is cut off if it exceeds a certain length. There are several other ways of doing this, but I find Grid
is the most flexible and the easiest to maintain, despite requiring more characters to write.
The approach given by kidshaw:
<DockPanel LastChildFill="True">
<Label Content="Client Name" DockPanel.Dock="Left" />
<Border ... />
</DockPanel>
The next one will draw the label on top of the border, but requires knowing the background color, which won't work if the background is a gradient or image:
<Border ... />
<Label HorizontalAlignment="Left" Content="Client Name" Background="White" />
Here's a different question that, although the question asked is quite different, has the same answers: How to get StackPanel's children to fill maximum space downward?
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments