question

EmonHaque-1485 avatar image
0 Votes"
EmonHaque-1485 asked HuiLiu-MSFT edited

How to remove Stoke of Rectangle from sides

Here's what I've got so far:

129645-x1.gif

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?

windows-wpf
x1.gif (2.2 MiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

HuiLiu-MSFT avatar image
1 Vote"
HuiLiu-MSFT answered HuiLiu-MSFT edited

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.
130659-h.png
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:
130609-hh.png


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.


h.png (18.4 KiB)
hh.png (5.7 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

EmonHaque-1485 avatar image
0 Votes"
EmonHaque-1485 answered EmonHaque-1485 commented

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

129694-x2.gif

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?


x2.gif (435.0 KiB)
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi,@ EmonHaque-1485. Could you show me the code for the overall definition of your Pattern and Rectangle? Did you set the width of the border or the width of the rectangle? If so, you could try to modify the width to align the edges. It seems that setting the StrokeThickness of the Rectangle to 2 is almost the same as the lines of the grid.129748-r.png

0 Votes 0 ·
r.png (6.1 KiB)

@HuiLiu-MSFT, you can download the sample project from GitHub. In the code behind of VerbForm.xaml there's a method void getVerbs() and there the Table/Matrix creation starts at Line No 102.

In this project I've a few external references, ie, MSSqlite, HtmlAgilityPack and WebView2 for Segment view. After launching the app click on Verb Pattern button on the left to get into the view.

0 Votes 0 ·