CODEWITHSUNDEEP
wpfxamluser-interfaceui-design
Lysander Mealy
Lysander Mealy

Reputation: 21

WPF puts a white gap around a label

I have a grid inside a grid, that has a label inside. When I leave the label's padding as it is, everything's fine. But when I set the padding to 0, this happens:

Border around Label

(There's not supposed to be a white border there)
Here's my XAML code:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.2*"></ColumnDefinition>
        <ColumnDefinition Width="0.8*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="0.02*"></RowDefinition>
        <RowDefinition Height="0.98*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid VerticalAlignment="Center" Margin="0px" x:Name="TitleBar" Background="#121212" Grid.ColumnSpan="2" Grid.Row="0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.2*"></ColumnDefinition>
        <ColumnDefinition Width="0.6*"></ColumnDefinition>
        <ColumnDefinition Width="0.2*"></ColumnsDefinition>
        </Grid.ColumnDefinitions>
        <Label Padding="5px 0px 0px 0px" Grid.Column="0" Grid.Row="0" Foreground="White">WorkChatApp</Label>
    </Grid>
    <ScrollViewer x:Name="Channels" Background="#232323" Grid.Column="0" Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"></ScrollViewer>
    <ScrollViewer x:Name="Messages" Grid.Column="1" Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"></ScrollViewer>
</Grid>

Upvotes: 0

Views: 61

Answers (1)

thatguy
thatguy

Reputation: 22079

That is not a border, but the background of the window. You define the Grid that contains your TitleBar Grid with rows that have star-sized heights: 0.02* and "0.98*". That means, the first row will always be scaled to occupy 2% of the available height and the second row will occupy 98% of the available height.

However, you have set the VerticalAlignment of the TitleBar Grid to Center, so it will be scaled only to the size that is necessary to display its content and then centered. That also means, if there is more space than necessary, the TitleBar is centered and above and beyond it there will be empty space and that is what you see and perceive as a border. If you scale your application window up, you can observe the same effect. Consequently, this is not related to the Padding of the Label.

Setting star-sized heights in this manner can lead to bad layout or even unusable controls when resizing the parent container. For example, if you scale your window down, the TitleBar will not be readable at some point.

Instead of this, you could make the first row Auto-sized and the second star-sized (* is the default).

<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="0.2*" />
      <ColumnDefinition Width="0.8*" />
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
   </Grid.RowDefinitions>
   <!-- ...other grid content. -->
</Grid>

If you define the columns like this, the first row will always shrink to the minimum size that is necessary to display its content and the second row takes up the remaining space.

Upvotes: 1

Related Questions