How to remove Stoke of Rectangle from sides

Question

Here's what I've got so far:

Each Patern ... cell in Form 1 and Form 14 has a Rectangle defined like this:

var rightThickness = headGrid.ColumnDefinitions.Count == subGroupsCount ? 0 : 1;  
var rect = new Rectangle() {  
    Stroke = Brushes.Black,  
    //StrokeThickness = new Thickness(0, 1, rightThickness, 0);  
    StrokeDashArray = { 4d, 4d},  
    SnapsToDevicePixels = true  
};  

initially, I started with Border BUT I couldn't find a way to use Dashed stroke in that SO ended up with Rectangle approach. Border on the top of the Rectangle in both Forms is alright BUT it looks odd on the sides because the adjacent Rectangles' stoke on sides overlaps.

How to remove the border from sides?

Answer 1

The headerGrid in your Form1 has columns. I set ShowGridLines=True;, the border is in the cell. So the right side of the Border cannot overlap with the GridLines.

You could try to refer to the layout below.

<Grid Name="headGrid" ShowGridLines="True" Width="200" Height="100">  
            <Grid.RowDefinitions>  
                <RowDefinition Height="40"/>  
                <RowDefinition/>  
                <RowDefinition/>  
            </Grid.RowDefinitions>  
            <TextBlock  Grid.Row="0" Text="form1" Height="20" Width="200" TextAlignment="Center" />  
            <Grid Grid.Row="1" ShowGridLines="True">  
                <Grid.ColumnDefinitions>  
                    <ColumnDefinition/>  
                    <ColumnDefinition/>  
                    <ColumnDefinition/>  
                </Grid.ColumnDefinitions>  
                <TextBlock Height="20" TextAlignment="Center" >pattern1</TextBlock>  
                <TextBlock Height="20" TextAlignment="Center" Grid.Column="1">pattern2</TextBlock>  
                <TextBlock Height="20" TextAlignment="Center" Grid.Column="2">pattern3</TextBlock>  
            </Grid>  
            <Grid Grid.Row="2" ShowGridLines="True">  
                <Grid.ColumnDefinitions>  
                    <ColumnDefinition/>  
                    <ColumnDefinition/>  
                    <ColumnDefinition />  
                </Grid.ColumnDefinitions>  
                <Grid.RowDefinitions>  
                    <RowDefinition/>  
                </Grid.RowDefinitions>  
            </Grid>  
        </Grid>  

The picture of result:

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

With both Rectangle and Border it works BUT Vertical Stokes isn't aligned with the dashed lines of the Grid:

Both of the vertical lines right to Patterns 1 and Pattern 2 under Form 1 are not aligned with the vertical lines of the grid. Under Form 14, only the line right to Pattern 2 looks perfectly aligned with the grid line. Also, those lines are not as thick as the lines of the Grid are! Here's the piece of code that generated those lines:

var rightThickness = headGrid.ColumnDefinitions.Count == subGroupsCount ? 0 : 1;  
var rect = new Rectangle() {  
    Stroke = Brushes.Gray,  
    //StrokeThickness = 3,  
    //StrokeDashCap = PenLineCap.Round,  
    StrokeDashArray = { 4d, 4d },  
    //SnapsToDevicePixels = true  
};  
var border = new Border() {  
    BorderBrush = new VisualBrush() { Visual = rect },  
    BorderThickness = new Thickness(0, 1, rightThickness, 0),  
    SnapsToDevicePixels = true  
};  
rect.SetBinding(Rectangle.WidthProperty, new Binding("ActualWidth") { Source = border });  
rect.SetBinding(Rectangle.HeightProperty, new Binding("ActualHeight") { Source = border });  

How to fix that problem?