如何在XAML中单独设计边框

Question

如何在XAMl中设计仅边框的顶部,左侧,右侧或底部？

在CSS中可以使用Border-Top:...

Answer 1

边框厚度是左,上,右和下厚度的复合属性(注意CSS的顺序差异).如果只指定了一个值,则可以设置所有值,但可以单独指定它们:

BorderThickness="1,2,3,4"

Answer 2

在XAML中,您没有像CSS中那样的元素的border属性.但是,您可以像使用<Border>CSS一样使用元素并设置单独的厚度(设置左右和上下边框粗细):

<Border BorderBrush="Blue" BorderThickness="2,4">
  <TextBlock Text="Inside border"/>
</Border>

或(设置左,上,右,下厚度):

<Border BorderBrush="Blue" BorderThickness="1,2,3,4">
  <TextBlock Text="Inside border"/>
</Border>

如果您需要更多边框控制,可以使用面板进行布局.例如使用<Grid>:

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>
  <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BorderBrush="Blue" BorderThickness="2"/>
  <Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" BorderBrush="Green" BorderThickness="4"/>
  <Border Grid.Row="1" Grid.Column="0" BorderBrush="Red" BorderThickness="3"/>
  <Border Grid.Row="1" Grid.Column="2" BorderBrush="Red" BorderThickness="3"/>
  <TextBlock Grid.Row="1" Grid.Column="1" Text="Inside border"/>
</Grid>

您可以自由地将其他可视元素放入网格单元格中.