Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to prevent double thickness borders at overlap?

Tags:

c#

wpf

xaml

If you have:

<Grid >
  <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="2*"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
</Grid>

and put a border of thickness 1 into each grid, you will get double thickness on the border between the grid rows. Is the only way to deal with this to specify the thickness on each edge of the border or is there some control that will create borders around the grid for each column without having double thickness?

Currently attempting it with this:

                    <Border  
                      BorderBrush="Black"
                      BorderThickness="1"
                      Margin="19,0,0,0"  
                      Background="LightGray"
                      >
                      <Viewbox VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                        <Grid>
                          <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="2*"/>
                            <RowDefinition Height="*"/>
                          </Grid.RowDefinitions>
                          <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                      </Grid.ColumnDefinitions>

                      <TextBlock
                        Grid.Row="1"
                        Grid.Column="0"
                        x:Name="TreeViewHeaderTextBox" 
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center" 
                        Text="Time"
                        Foreground="Black"
                        />


                      <TextBlock
                        Grid.Row="1"
                        Grid.Column="1"
                        Text="X"
                        TextAlignment="Center"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Center"
                        />

                      <TextBlock 
                        Grid.Row="1"
                        Grid.Column="2"
                        Text="O"
                        TextAlignment="Center"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Center"
                        />

                    </Grid>
                  </Viewbox>
                </Border>

However, I started making changes to the old code so this isn'ta really good example of the double borders. However, I am also getting double borders from this template.

              <Border Name="Bd"
                      Grid.Column="1"
                      Background="{TemplateBinding Background}"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}"
                      Padding="{TemplateBinding Padding}"
                      SnapsToDevicePixels="true">
                <ContentPresenter x:Name="PART_Header"
                                  ContentSource="Header"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
              </Border>

as each item ends up with a double thickness border where it touches the next item.

edit 2: After reading the comments I realized I probably should not have a border defined on the datatemplate for the control and instead just set the border through the control and change the template on the controltemplate. May be getting double borders from that.

like image 933
James Joshua Street Avatar asked Aug 26 '13 16:08

James Joshua Street


People also ask

How to prevent a double border around an object in CSS?

Another solution one might consider is using the CSS Adjacent sibling selector. I'm late to the show but try using the outline property, like so: Outlines in CSS do not occupy physical space and will therefore overlap to prevent a double border.

How do I avoid overlaps between columns in HTML?

You need to give your middle column position: relative; and negatively position them out of it (meaning in the html the left and right divs must go inside the middle div also). Absolutely positioned elements are removed from the document flow, which means they don’t affect elements further down in the markup. That’s why you get overlaps.

How do I keep a border around a polygon?

Select the polygon feature whose border you want to maintain. The other polygon will be clipped back to match it. Click the Editor menu and click Clip . Set the buffer distance to 0 and choose to discard the area that intersects. Click OK . Feedback on this topic?

How to break overlapping dimension lines in AutoCAD?

AutoCAD: Breaking overlapping Dimensions lines - AutoCAD: Breaking overlapping Dimensions lines DIMBREAK command allows the user to modify overlapping Dimension Lines with a break (This creates a space in one of the Dimension Lines that overlaps another Dimension Line or other Geometry) Helps create a more technical looking drawing.


Video Answer


2 Answers

If you wrap grid in a border element and set the thickness I believe that puts a border between each grid item and avoids your doubled border - trying to test this now.

like image 53
Matthew Avatar answered Sep 29 '22 18:09

Matthew


Thickness can be set to ="left, top, right, bottom", which means you can set the overlapping parts to half.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Border BorderThickness="1,1,1,0.5" BorderBrush="Black"/>
    <Border BorderThickness="1,0.5" BorderBrush="Black" Grid.Row="1" />
    <Border BorderThickness="1,0.5,1,1" BorderBrush="Black"  Grid.Row="2" />
</Grid>
like image 36
denis morozov Avatar answered Sep 29 '22 17:09

denis morozov