时间戳

首页 > 解决方案 > 我想实现它，如图所示。（在 WPF 中绘制对角线）

wpf - 我想实现它，如图所示。（在 WPF 中绘制对角线）

问题描述

在此处输入图像描述

我想像上图那样实现它。

在此处输入图像描述

 <Grid>
    <Border BorderThickness="1" BorderBrush="#eeeeee" Height="200" Width="300">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="6*"/>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="3*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Border Background="#55a0c4">
                <TextBlock Text="묘도대교 PY1 탑정부" Padding="6" Foreground="White"/>
            </Border>
            <Border Grid.Column="1" Background="White" Margin="0 0 0 0">
                <Path Stroke="#55a0c4" StrokeThickness="1" Stretch="Fill" Margin="0 4 0 0">
                    <Path.Data>
                        <LineGeometry StartPoint="1,0" EndPoint="0,1" />
                    </Path.Data>
                </Path>
            </Border>
            <Border Background="#55a0c4" Grid.Column="2" VerticalAlignment="Top" Height="5"/>
        </Grid>
    </Border>
</Grid>

上面的图片和代码是我自己实现的，但是我不能只在上面的空白处填充背景。我该怎么办？

标签： wpfxaml

解决方案

您只需要不同的几何形状。不要画一条线，而是画一个三角形。这将填满您想要的大部分区域。然后你只需要包括一个矩形来填充三角形上方的空间。这是您想要的代码版本：

<Border BorderThickness="1" BorderBrush="#eeeeee" Height="200" Width="300">
  <Grid SnapsToDevicePixels="True">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="6*"/>
      <ColumnDefinition Width="1*"/>
      <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="auto"/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <Border Background="#55a0c4">
      <TextBlock Text="묘도대교 PY1 탑정부" Padding="6" Foreground="White"/>
    </Border>
    <Border Grid.Column="1" Background="White" Margin="0 0 0 0">
      <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Path Fill="#55a0c4" Stretch="Fill" Margin="0 5 0 0" Data="M 0,0 H 1 L 0,1 Z"/>
        <Rectangle Fill="#55a0c4" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top"/>
      </Grid>
    </Border>
    <Border Background="#55a0c4" Grid.Column="2" VerticalAlignment="Top" Height="5"/>
  </Grid>
</Border>

看起来像这样：

在此处输入图像描述

请注意，我还添加SnapsToDevicePixels="True"了父Grid元素。这对于抑制会导致图形元素之间出现微弱间隙的抗锯齿是必要的。

我还使用“路径标记语法”Path来定义三角形，而不是使用显式 XAML 元素构建对象的数据。我发现这更简洁，如果有时不那么可读。

推荐阅读