Question

我是WPF的新手。我的要求是制作一个带圆角矩形的闪屏。我做了一些搜索，实现了圆角矩形。但问题在于它在某些方面失败了。请查看截图并查看下面的代码。 enter image description here

在该图像中，您可以看到黑色边框在角落处断裂

这是我的xaml

<Window x:Class="TimeLogger.StartWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"   Width="470" Height="270"      ShowInTaskbar="False" WindowStartupLocation="CenterScreen" 
        ResizeMode="NoResize"  WindowStyle="None" AllowsTransparency="True" Background="Transparent"  >
    <Border BorderBrush="#FF000000" BorderThickness="2,2,2,2" CornerRadius="8,8,8,8">
        <Grid Background="#012a7a"   >
            <Label Margin="-5,-7,5,7">
                <TextBlock Foreground="Black"  FontFamily="Segoe UI" FontSize="25" FontStretch="UltraExpanded" Height="71" Width="177">
                    TimeLogger
                </TextBlock>
            </Label>
        </Grid>
    </Border>
</Window>

Answer 1

我看到了你的问题。

Border是件好事。它们重量轻，对外观有很大的控制。 问题是您已经提供了Grid Background颜色，而您应该将其提供给Border。通常情况下，网格不会很好风格的元素，特别是当你在这里使用边框时。网格非常适合简单到复杂的布局，偶尔给它们Background是有意义的，但它几乎总是最适合布局。

只需复制粘贴：

<Border BorderBrush="#FF000000" Background="#012a7a" BorderThickness="2,2,2,2" CornerRadius="8,8,8,8">
    <Grid>
        <Label Margin="-5,-7,5,7">
            <TextBlock Foreground="Black"  FontFamily="Segoe UI" FontSize="25" FontStretch="UltraExpanded" Height="71" Width="177">
                TimeLogger
            </TextBlock>
        </Label>
    </Grid>
</Border>

Answer 2

将边角半径应用于边框不会缩小边框内容的大小，使其受到限制。你看到网格绘画在边框顶部，因为它仍然填满了边框所说的可用区域。修复很容易：

设置边框的背景颜色，而不是网格。保持网格透明。
将填充应用于边框或网格的边距，以便为应用的角半径留出空间。玩具有确切价值，直到得到你喜欢的东西。

这样的事情：

<Border 
    BorderBrush="#FF000000" 
    Background="#012a7a" 
    BorderThickness="2" 
    CornerRadius="8"
    Padding="5"
    >
    <Grid>
        <!-- In a code review, I'd question the value of negative margin on this label -->
        <Label Margin="-5,-7,5,7">
            <TextBlock Foreground="Black"  FontFamily="Segoe UI" FontSize="25" FontStretch="UltraExpanded" Height="71" Width="177">
                TimeLogger
            </TextBlock>
        </Label>
    </Grid>
</Border>

Answer 3

Border只是一个内容控件，但其中的TextBlock

<Border Background="#012a7a" BorderBrush="#FF000000" Margin ="6" BorderThickness="4" CornerRadius="8,8,8,8">
    <TextBlock Foreground="Black" Margin="-5,-7,5,7" Height="71" Width="177"
               VerticalAlignment="Center" HorizontalAlignment="Center" 
               FontFamily="Segoe UI" FontSize="25" FontStretch="UltraExpanded" 
               Text="TimeLogger" />
</Border>

边界不覆盖整个地区

3 个答案: