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

问题

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)

回答1:

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:

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:

回答2:

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:

来源：https://stackoverflow.com/questions/55709909/drawing-a-wpf-shape-as-a-rectangle-strokethickness-halve-if-stroke-is-transpar

标签

wpf

visual-studio-2013

stroke