Alexander Ananev
Alexander Ananev

Reputation: 165

Circle in path geometry

Please help me make a circle with a thickness of 2. I was able to draw a filled circle (code below). How do I make it unfilled with a thickness of 2?

M 0,0 A 180,180 180 1 1 1,1 Z

Upvotes: 2

Views: 3015

Answers (2)

Sam Saarian
Sam Saarian

Reputation: 1146

I have attached two images; one is the actual control image (radio button), and a graphic explanation of the Path/Data.

                            <Border x:Name="Border"
                                Width="24"
                                Height="24"
                                CornerRadius="10"
                                BorderBrush="{StaticResource Light5Brush}"
                                Background="White" 
                                Margin="0"
                                BorderThickness="2">
                            <Grid>
                                <Path x:Name="CheckMark"
                                      Visibility="Collapsed"
                                      Width="18"
                                      Height="18"
                                      SnapsToDevicePixels="False"
                                      StrokeThickness="3"
                                      Fill="{StaticResource PrimaryBrush}"
                                      Stroke="{StaticResource PrimaryBrush}"
                                      Data="M 9,2 A 7,7 180 1 1 9 16 A 7,7 180 1 1 9 2 Z">
                                </Path>

Hope it is self explanatory enough

Upvotes: 0

Clemens
Clemens

Reputation: 128013

You can't create a full circle with path markup because start and end point would be identical. You can only draw at least two circle segments, e.g. two semi-circles:

<Path Stroke="Blue" StrokeThickness="2"
      Data="M 0,100 A 100,100 0 1 1 200,100 A 100,100 0 1 1 0,100"/>

You may perhaps better use an EllipseGeometry:

<Path Stroke="Blue" StrokeThickness="2">
    <Path.Data>
        <EllipseGeometry Center="100,100" RadiusX="100" RadiusY="100"/>
    </Path.Data>
</Path>

Upvotes: 5

Related Questions