时间戳

首页 > 解决方案 > WPF 在标签周围放置一个白色间隙

wpf - WPF 在标签周围放置一个白色间隙

问题描述

我在网格中有一个网格，里面有一个标签。当我保持标签的填充不变时，一切都很好。但是当我将填充设置为 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>

标签： wpfxamluser-interfaceui-design

解决方案

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

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

以这种方式设置星型高度可能会导致布局错误，甚至在调整父容器大小时控件不可用。例如，如果您缩小窗口，则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>

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

推荐阅读