WPF Graphics: Drawing a polygon using code behind

This entry is part 8 of 8 in the series WPF Graphics

Drawing a polygon using code behind,

MainWindow.xaml.cs:

using System.Windows;
using System.Windows.Media;
using System.Windows.Shapes;

namespace WpfApplication14
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private Polygon polygon;

        public MainWindow()
        {
            InitializeComponent();

            polygon = new Polygon();
            polygon.Stroke = System.Windows.Media.Brushes.Black;
            polygon.Fill = System.Windows.Media.Brushes.LightSeaGreen;
            polygon.StrokeThickness = 2;
            polygon.HorizontalAlignment = HorizontalAlignment.Left;
            polygon.VerticalAlignment = VerticalAlignment.Center;
            System.Windows.Point Point1 = new System.Windows.Point(60, 50);
            System.Windows.Point Point2 = new System.Windows.Point(80, 180);
            System.Windows.Point Point3 = new System.Windows.Point(180, 280);
            System.Windows.Point Point4 = new System.Windows.Point(450, 250);
            System.Windows.Point Point5 = new System.Windows.Point(350, 150);
            PointCollection pointCollection = new PointCollection();
            pointCollection.Add(Point1);
            pointCollection.Add(Point2);
            pointCollection.Add(Point3);
            pointCollection.Add(Point4);
            pointCollection.Add(Point5);

            polygon.Points = pointCollection;
            grid.Children.Add(polygon);
        }
    }
}

MainWindow.xaml:

<Window x:Class="WpfApplication14.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication14"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid Name="grid">
        
    </Grid>
</Window>

polygon

WPF Graphics: Drawing a square using code behind

This entry is part 7 of 8 in the series WPF Graphics

Notice in the code below, how the rectangle class was created.  Once the rect class is defined, we can define the Stroke and the Fill color.

MainWindow.xaml.cs:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfApplication13
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            System.Windows.Shapes.Rectangle rect;

            rect = new System.Windows.Shapes.Rectangle();
            rect.Stroke = new SolidColorBrush(Colors.Black);
            rect.Fill = new SolidColorBrush(Colors.AliceBlue);
            rect.Width = 200;
            rect.Height = 200;
            Canvas.SetLeft(rect, 0);
            Canvas.SetTop(rect, 0);
            canvas.Children.Add(rect);
        }
    }
}

MainWindow.xaml:

<Window x:Class="WpfApplication13.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication13"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Canvas Height="200" Width="200" Name="canvas" Grid.Row="1" Grid.Column="0">
    </Canvas>
</Window>

square_c

WPF Graphics: Drawing a square using XAML

This entry is part 6 of 8 in the series WPF Graphics

Drawing a square using XAML.

The canvas.left and canvas.right position the location of the rectangle relative to the position of the canvas.

MainWindow.xaml

<Window x:Class="WpfApplication11.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication11"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Canvas Width="300" Height="300">
            <Rectangle Width="250" Height="250" Canvas.Left="20" Canvas.Top="20" Fill="LightBlue"/>
        </Canvas>
    </Grid>

MainWindow.xaml.cs

using System.Windows;

namespace WpfApplication11
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

square

WPF Graphics: Drawing a circle with code

This entry is part 5 of 8 in the series WPF Graphics

If you have like to use the traditional method to draw a circle instead of using XAML.

Notice that I did not declare a Stackpanel in the xaml.  The stackpanel is displayed using

this.Content = stack;

MainWindow.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

namespace WpfApplication10
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        void OnLoad(object sender, RoutedEventArgs e)
        {
            StackPanel stack = new StackPanel();

            // Create a red Ellipse.
            Ellipse ellipse = new Ellipse();

            // Create a SolidColorBrush with a yellow color to fill the 
            // Ellipse with.
            SolidColorBrush colorBrush = new SolidColorBrush();

            // Describes the brush's color using RGB values. 
            // Each value has a range of 0-255.
            colorBrush.Color = Color.FromArgb(255, 255, 255, 0);
            ellipse.Fill = colorBrush;
            ellipse.StrokeThickness = 2;
            ellipse.Stroke = Brushes.Black;

            // Set the width and height of the Ellipse.
            ellipse.Width = 250;
            ellipse.Height = 250;

            // Add the Ellipse to the StackPanel.
            stack.Children.Add(ellipse);

            this.Content = stack;
        }

    }
}

MainWindow.xaml

<Window x:Class="WpfApplication10.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication10"
        mc:Ignorable="d"
        Loaded="OnLoad"
        Title="MainWindow" Height="350" Width="525">
    <Grid>

    </Grid>
</Window>

circle1

WPF Graphics: Drawing a circle

This entry is part 4 of 8 in the series WPF Graphics

So using the earlier ellipse example, we can draw a circle.

<Window x:Class="WpfApplication9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication9"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Ellipse
        Fill="Yellow"
        Height="200"
        Width="200"
        StrokeThickness="2"
        Stroke="Black"/>
</Window>

circle