Drawing a WPF shape, as a Rectangle: StrokeThickness halve if Stroke is Transparent

1
votes

the problem: I have some UCControl than design geometric shapes. I can configure at runtime, dimensions (size and stroke thickness), colours (background and stroke) and all work fine until I use solid colors. Problems happened if I use, for stroke, Transparent brush: the shape appears with correct dimensions and colours, but the strokethikness is halve.

<Grid x:Name="_grid" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Rectangle Grid.Row="0" Grid.Column="0" Margin="0,0,0,0"
        Width="{Binding ActualWidth, ElementName=_grid}"
        Height="{Binding ActualHeight, ElementName=_grid}" 
        Stroke="{Binding Rectangle.BorderColorBrush}"
        StrokeThickness="{Binding Rectangle.Thick}" 
        Fill="{Binding Rectangle.BackgroundBrush}"/>

</Grid>

I need than if stroke is a solid color or Transparent, the stroke thick on the draw is the same. I found at this moment this: the Brown is background color, Black or Transparent the Stroke. StrokeThickness is 20 for both (see dot grid: distanced 10) render

2
c#wpfvisual-studio-2013stroke
It's transparent... means the background is visible. When not transparent it covers the background... doesn't mean that the size reduced. – Nawed Nabi Zada
I think this is not the answer: why transparent just for 10 pixel? see first rectangle: drawed border is 20 pixel, in the second is just 10, but the values of size (ActualWidth, ActualHeight) and StrokeThickness (Rectangle.Thick) is the same (20) – Roberto
The centerpoint is in the middle... it expands to both sides... While you have the background in the middle there is nothing in the other end... therefor the background is not covered when transparent – Nawed Nabi Zada

2 Answers

3
votes

The StrokeThickness of a Rectangle or Ellipse element contributes to its total width and height, while the actual outline of the underlying geometry lies in the center of the stroke. This becomes quite evident when you use a dashed stroke like

<Rectangle Width="100" Height="100" Fill="Red" Stroke="Black"
           StrokeThickness="10" StrokeDashArray="1 1"/>

It results in this:

enter image description here

The size of the filled area is only 90 x 90.

For a filled area that is precisely the size you want, use a Path with a RectangleGeometry:

<Path Fill="Red" Stroke="Black" StrokeThickness="10" StrokeDashArray="1 1">
    <Path.Data>
        <RectangleGeometry Rect="0,0,100,100"/>
    </Path.Data>
</Path>

Result:

enter image description here

0
votes

In this particular case, I need to use StrokeThickness as a border around the shape, if I want border size 20 I need all around the shape a border of 20, doesn't matter if the color is a solid color, or Transparent, and the total size of shape (border + background) must not mutate. So, considering how the Stroke is drawed (it make an internal offset of the shape, for half of StrokeThickness, and draw half stroke inside, and half stroke outside this offset) I need simply to duplicate the StrokeThickness if the stroke color is Transparent. Yes, it's a little bit confusing, I hope it be clear and useful anyway... here the code just for Rectangle.StrokeThickness element:

<Rectangle.StrokeThickness>
    <MultiBinding Converter="{StaticResource MyConverter}">
        <Binding Path="Rectangle.Thick"></Binding>
        <Binding Path="Rectangle.BorderColorBrush"></Binding>
    </MultiBinding>
</Rectangle.StrokeThickness>

..and converter just duplicate Rectangle.Thick value if (Rectangle.BorderColorBrush == Brushes.Transparent). the final result is what I wanted:

final draw