Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In WPF, how to set an outer, centered, and inner border?

Tags:

c#

border

wpf

xaml

When I set a border for a button, for example, it is an outer border. But What if I would want it to be centered or inner, what would be the simplest way?

Here is what I mean:

http://i.imgur.com/88ibeiz.jpg

like image 602
Michael Haddad Avatar asked Apr 07 '16 15:04

Michael Haddad


People also ask

How do you center something in WPF?

How do I center text in a label in WPF? If you want to center each line, use a TextBlock instead, and set TextAlignment="Center" .

How do you make a grid border in WPF?

<Grid> <Border BorderBrush="Black" BorderThickness="2"> <Grid Height="166" HorizontalAlignment="Left" Margin="12,12,0,0" Name="grid1" VerticalAlignment="Top" Width="479" Background="#FFF2F2F2" /> </Border> ... and so on ...

How do you add a border in XAML?

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.


1 Answers

So to re-create your example, here's quickie concept example alternatives. However there's a bunch of different ways you can accomplish the same effects but here's at least a few...

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="Border">
            <Setter Property="BorderBrush" Value="#570000FF"/>
            <Setter Property="BorderThickness" Value="10"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="Margin" Value="10"/>
        </Style>
        <Style TargetType="Rectangle">
            <Setter Property="Stroke" Value="Black"/>
            <Setter Property="StrokeThickness" Value="1"/>
        </Style>
    </StackPanel.Resources>

    <Border>
        <Rectangle/>
    </Border>

    <Border>
        <Rectangle Margin="-5"/>
    </Border>

    <Border BorderBrush="Black" BorderThickness="1">
        <Rectangle Stroke="#570000FF" StrokeThickness="10"/>
    </Border>

</StackPanel>

Result:

enter image description here

Hope this helps, cheers.

like image 182
Chris W. Avatar answered Sep 19 '22 11:09

Chris W.