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

Question

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

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

我可以通过后面的代码执行此操作(在窗口调整大小事件,更改行的大小),

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

我怎样才能做到这一点？

Answer 1

在这种情况下,可以尝试使用Separator:

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

对于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为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>

Answer 2

无论Panel您选择哪种方式,都会在窗口的宽度上绘制一条线.(Canvas, Grid, StackPanel等).

如果您需要一条与Window顶部不平行的线,它也可以工作.

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

截图