WPF 在标签周围放置一个白色间隙答案

【问题标题】：WPF puts a white gap around a labelWPF 在标签周围放置一个白色间隙
【发布时间】：2021-02-21 10:38:27
【问题描述】：

我在网格中有一个网格，里面有一个标签。当我保持标签的填充不变时，一切都很好。但是当我将填充设置为 0 时，会发生这种情况：

（那里不应该有白色边框）
这是我的 XAML 代码：

<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>

【问题讨论】：

标签： wpf xaml user-interface ui-design

【解决方案1】：

那不是边框，而是窗口的背景。您定义包含您的TitleBar Grid 的Grid 具有星型高度的行：0.02* 和"0.98*"。这意味着，第一行将始终被缩放以占据可用高度的 2%，而第二行将占据可用高度的 98%。

但是，您已将 TitleBar 的 Grid 的 VerticalAlignment 设置为 Center，因此它将仅缩放到显示其内容所需的大小，然后居中。这也意味着，如果有多余的空间，TitleBar 会居中，在它之上和之外会有空白空间，这就是你所看到的并且将其视为边界。如果你放大你的应用程序窗口，你可以观察到同样的效果。因此，这与Label 的Padding 无关。

以这种方式设置星型高度可能会导致布局错误，甚至在调整父容器大小时导致控件无法使用。例如，如果您缩小窗口，TitleBar 在某些时候将不可读。

您可以将第一行设为Auto 大小，第二行设为星号大小（* 是默认值）。

<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>

如果您这样定义列，第一行将始终缩小到显示其内容所需的最小大小，第二行占用剩余空间。

【讨论】：