Click here to Skip to main content
15,897,148 members
Articles / Desktop Programming / WPF

WPF rounded corners polygon

Rate me:
Please Sign up or sign in to vote.
4.89/5 (51 votes)
18 Nov 2010CPOL3 min read 114.4K   4.4K   67  
A custom WPF polygon that supports round corners.
<UserControl x:Class="CustomRoundedCornersPolygon.ExamplesRoundedCornersPolygon"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:CustomRoundedCornersPolygon="clr-namespace:CustomRoundedCornersPolygon" mc:Ignorable="d" 
             d:DesignHeight="600" d:DesignWidth="600">    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="200"></RowDefinition>
            <RowDefinition Height="20"></RowDefinition>
            <RowDefinition Height="200"></RowDefinition>
            <RowDefinition Height="20"></RowDefinition>
            <RowDefinition Height="200"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"></ColumnDefinition>
            <ColumnDefinition Width="200"></ColumnDefinition>
            <ColumnDefinition Width="200"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Canvas Grid.Column="0" Grid.Row="0">            
            <TextBlock>1. Rounded corners triangle</TextBlock>
            <CustomRoundedCornersPolygon:RoundedCornersPolygon Points="100,10 190,180 10,180 " 
                StrokeThickness="1" ArcRoundness="25" UseRoundnessPercentage="False" Stroke="Black" IsClosed="True">                
            </CustomRoundedCornersPolygon:RoundedCornersPolygon>
        </Canvas>
        <Canvas Grid.Column="1" Grid.Row="0">
            <TextBlock>2. Rounded corners rectangle</TextBlock>
            <CustomRoundedCornersPolygon:RoundedCornersPolygon Points="10,50 180,50 180,150 10,150" 
                StrokeThickness="1" Stroke="Black" ArcRoundness="25" UseRoundnessPercentage="False" IsClosed="True"/>
        </Canvas>
        <Canvas Grid.Column="2" Grid.Row="0">
            <TextBlock>3. Rounded corners octagon</TextBlock>
            <CustomRoundedCornersPolygon:RoundedCornersPolygon Points="60,20 140,20 180,70 180,140 140,190 60,190 20,140 20,70" 
                StrokeThickness="1" Stroke="Black" ArcRoundness="15" UseRoundnessPercentage="False" IsClosed="True"/>
        </Canvas>

        <TextBlock Grid.Row="1" Grid.ColumnSpan="3" FontWeight="Bold">The same shapes but with the property UseAnglePercentage="True"</TextBlock>

        <Canvas Grid.Column="0" Grid.Row="2">
            <TextBlock>1. Rounded corners triangle</TextBlock>
            <CustomRoundedCornersPolygon:RoundedCornersPolygon Points="100,10 190,180 10,180 " 
                StrokeThickness="1" ArcRoundness="25" UseRoundnessPercentage="True" Stroke="Black" IsClosed="True">
            </CustomRoundedCornersPolygon:RoundedCornersPolygon>
        </Canvas>
        <Canvas Grid.Column="1" Grid.Row="2">
            <TextBlock>2. Rounded corners rectangle</TextBlock>
            <CustomRoundedCornersPolygon:RoundedCornersPolygon Points="10,50 180,50 180,150 10,150" 
                StrokeThickness="1" Stroke="Black" ArcRoundness="25" UseRoundnessPercentage="True" IsClosed="True"/>
        </Canvas>
        <Canvas Grid.Column="2" Grid.Row="2">
            <TextBlock>3. Rounded corners octagon</TextBlock>
            <CustomRoundedCornersPolygon:RoundedCornersPolygon Points="60,20 140,20 180,70 180,140 140,190 60,190 20,140 20,70" 
                StrokeThickness="1" Stroke="Black" ArcRoundness="15" UseRoundnessPercentage="True" IsClosed="True"/>
        </Canvas>

        <TextBlock Grid.Row="3" Grid.ColumnSpan="3" FontWeight="Bold">The same shapes but with the property IsClosed="False"</TextBlock>

        <Canvas Grid.Column="0" Grid.Row="4">
            <TextBlock>1. Rounded corners triangle</TextBlock>
            <CustomRoundedCornersPolygon:RoundedCornersPolygon Points="100,10 190,180 10,180 " 
                StrokeThickness="1" ArcRoundness="25" UseRoundnessPercentage="True" Stroke="Black" IsClosed="False">
            </CustomRoundedCornersPolygon:RoundedCornersPolygon>
        </Canvas>
        <Canvas Grid.Column="1" Grid.Row="4">
            <TextBlock>2. Rounded corners rectangle</TextBlock>
            <CustomRoundedCornersPolygon:RoundedCornersPolygon Points="10,50 180,50 180,150 10,150" 
                StrokeThickness="1" Stroke="Black" ArcRoundness="25" UseRoundnessPercentage="True" IsClosed="False"/>
        </Canvas>
        <Canvas Grid.Column="2" Grid.Row="4">
            <TextBlock>3. Rounded corners octagon</TextBlock>
            <CustomRoundedCornersPolygon:RoundedCornersPolygon Points="60,20 140,20 180,70 180,140 140,190 60,190 20,140 20,70" 
                StrokeThickness="1" Stroke="Black" ArcRoundness="15" UseRoundnessPercentage="True" IsClosed="False"/>
        </Canvas>
    </Grid>
</UserControl>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
Germany Germany
.NET & JavaScript Senior Software Lead Developer & Architect.
Since 2005 worked with most of .NET technologies (Windows Forms, ASP.NET, WCF, WPF, XNA) and for some years passionate about JavaScript and client JavaScript Architecture.

Comments and Discussions