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

How to draw a line in windows which fill width in xaml

提问by mans

I have a window which is its size can be change during run time by user.

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

I want to draw a horizontal line which extends to the width of window.

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

I can do this by code behind (on window resize event, change the size of line),

我可以通过后面的代码来做到这一点（在窗口调整大小事件上，更改行的大小），

but am looking for a way to change the size of line in xaml, so for example bind x1,x2,y1 and y2 to their parents (or window) size in a way that line resize itself when the size of window changes.

但是我正在寻找一种方法来更改 xaml 中行的大小，因此例如将 x1,x2,y1 和 y2 绑定到它们的父（或窗口）大小，当窗口大小更改时，该行会自行调整大小。

How can I do this?

我怎样才能做到这一点？

回答by Anatoliy Nikolaev

In this case, the maybe try use Separator:

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

A Separatorcontrol draws a line, horizontal or vertical, between items in controls, such as ListBox, Menu, and ToolBar.

甲Separator控制绘制线，水平或垂直，在对照中的物品，如列表框，菜单和工具栏之间。

For Separator base class is Control, this means that it is possible to apply a Style/ControlTemplate, that is comfortable when you want stored separately properties for him.

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

Example:

例子：

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

This example draws a line in bottom on the entire Width of the Window. Setting properties Width="Auto"and HorizontalAlignment="Stretch"can automatically stretch Separator at the Width of the Window.

本示例在Window. 设置属性Width="Auto"并HorizontalAlignment="Stretch"可以在窗口的宽度处自动拉伸分隔符。

To specify an arbitrary Heightfor Separator, use the following style:

要Height为 Separator指定任意值，请使用以下样式：

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

回答by Walt Ritscher

This draws a line the width of the Window, regardless of which Panelyou choose. (Canvas, Grid, StackPanel, etc.).

无论Panel您选择哪条线，这都会绘制一条与 Window 宽度相同的线。（Canvas, Grid, StackPanel等）。

It also works if you need a line that is not parallel to the Window top.

如果您需要一条与窗口顶部不平行的线，它也适用。

// Assumes the Window is named MainWindow

// 假设窗口名为 MainWindow

XAML

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>

Screenshots

截图