如何在XAML中绘制填满窗口宽度的线条？

Question

我有一个窗口，在运行时可以由用户更改大小。

我想画一条水平线，使其宽度延伸到整个窗口。

我可以通过代码后台实现这一点（在窗口调整大小事件中，更改线的大小），

但是我正在寻找一种在xaml中更改线的大小的方法，例如将x1、x2、y1和y2绑定到它们的父项（或窗口）大小，以便当窗口大小发生变化时，线可以自动调整大小。

如何做到这一点？

- mans

---

<Rectangle Fill="Red" Height="1"/> = 所需皆备，或者将宽度设置为1以实现垂直效果。 - Chris W.

@ChrisW. 但这在 Canvas 或 WrapPanel 中不起作用。 - Walt Ritscher

@WaltRitscher 谢谢，他指定了一个窗口，而不是面板。我只是试图让它尽可能简单易懂。不过还是感谢您为 OP 提供的澄清。 - Chris W.

Answer 1

在这种情况下，可以尝试使用Separator ：

Separator控件在诸如ListBox、Menu和ToolBar等控件中的项之间绘制一个水平或垂直的线条。

由于Separator基类是Control，因此可以应用样式/控件模板，这对于希望将属性单独存储的用户非常方便。

示例：

<Grid>
    <Separator Name="MySeparator" 
               Height="4"
               Width="Auto"
               HorizontalAlignment="Stretch"
               VerticalAlignment="Bottom"                   
               Background="Black" />
</Grid>

此示例在整个窗口宽度的底部绘制一条线。将属性 Width="Auto" 和 HorizontalAlignment="Stretch" 设置为自动将分隔符拉伸到窗口的宽度。

要为分隔符指定任意高度，请使用以下样式：

<Style TargetType="{x:Type Separator}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="SnapsToDevicePixels" Value="True" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Separator}">
                <Rectangle SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                           Height="{TemplateBinding Height}"
                           Width="{TemplateBinding Width}"
                           Fill="{TemplateBinding Background}" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

- Anatoliy Nikolaev

---

请注意，在UWP中，Separator控件不可用。 - bunkerdive

Answer 2

无论您选择哪个Panel(Canvas、Grid、StackPanel等)，此代码将绘制与窗口宽度相同的线条。

如果需要一条不平行于窗口顶部的直线，也可以使用此代码。

// 假设窗口名为MainWindow

XAML

<Canvas>
    <Line X1='0'
          X2='{Binding ActualWidth, Mode=OneWay, 
               RelativeSource={RelativeSource FindAncestor, 
               AncestorType={x:Type local:MainWindow}}}'
          Y1='50'
          Y2='90'
          Stroke="Orange"
          StrokeThickness='2' />

   <Line X1='0'
         X2='{Binding ActualWidth, Mode=OneWay, 
              RelativeSource={RelativeSource FindAncestor,
              AncestorType={x:Type local:MainWindow}}}'
          Y1='110' 
          Y2='110'
          Stroke="Green"
          StrokeThickness='2' />

  </Canvas>

屏幕截图

- Walt Ritscher