如何在窗口中绘制一条线，填充xaml中的宽度

Question

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

我想绘制一条延伸到窗口宽度的水平线。

我可以通过后面的代码（在窗口调整大小事件，更改行的大小），

来做到这一点

但我正在寻找一种方法来改变xaml中的行大小，所以例如将x1，x2，y1和y2绑定到它们的父级（或窗口）大小，以便当窗口大小改变时该行调整大小。

我该怎么做？

Answer 1

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

  

Separator控件在控件中的项之间绘制线，水平或垂直，如ListBox，Menu和ToolBar。

对于Separator基类是Control，这意味着可以应用Style / ControlTemplate，当你想为他存储单独的属性时，这很舒服。

示例：

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

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

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

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

Answer 2

无论您选择哪个Panel，都会在窗口的宽度上绘制一条线。 （Canvas, Grid, StackPanel等）。

如果您需要一条与Window top不平行的线，它也可以使用。

//假设窗口名为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>

<强>截图