Menu
How can I design the Border only Top, Left, Right or Bottom Side in XAMl?
In CSS is this possible with Border-Top:...
644
To apply a border to a XAML element, you can place the element within a Border element, The BorderThickness and BorderBrush are two main properties of a Border The BorderBrush property represents the brush that is used to draw the border. The BorderThickness property represents the thickness of the border.
Border in XAML is its own control that can be applied to other controls or XAML elememts. To place a border around an element, WPF provides the Border element. Similar to other WPF elements, the Border has Width, Height, Background, and HorizontalAlignment and VerticalAlignment properties.
Right-click the selected elements, point to Group Into, and then click the type of layout container in which you want the group to reside. If you select Viewbox, Border, or ScrollViewer to group your elements, the elements are placed in a new Grid panel within the Viewbox, Border, or ScrollViewer.
The border thicknes is a composite property of the left, top, right and bottom thicknesses (notice the difference in order from CSS). If you specify only one value you set all of them, but you can specify them separately:
BorderThickness="1,2,3,4" In XAML you don't have border property on elements like you have in CSS. However, you can use a <Border> element and set individual thicknesses just as you can i CSS (sets left-right and top-bottom border thickness):
<Border BorderBrush="Blue" BorderThickness="2,4"> <TextBlock Text="Inside border"/> </Border> or (sets left, top, right, bottom thickness):
<Border BorderBrush="Blue" BorderThickness="1,2,3,4"> <TextBlock Text="Inside border"/> </Border> If you need more control of the border you can use a panel for layout. E.g. using a <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> You are free to put other visual elements in the grid cells.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
