Skip to main content

WPF C#/VB
Shapes: Part 1 (Rectangles, Circles & Triangles)

Watch the video

C#

// AZUL CODING ---------------------------------------
// WPF C#/VB - Shapes: Part 1 (Rectangles, Circles & Triangles)
// https://youtu.be/OQhBTPEIKs8


using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Drawing;

namespace Shapes
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private string CurrentShape = "Rectangle";

        public MainWindow()
        {
            InitializeComponent();
        }

        private void ShapeRadios_Click(object sender, RoutedEventArgs e)
        {
            RectangleShape.Visibility = Visibility.Collapsed;
            EllipseShape.Visibility = Visibility.Collapsed;
            TriangleShape.Visibility = Visibility.Collapsed;

            switch (((RadioButton)sender).Name)
            {
                case "RectangleRadio":
                    RectangleShape.Visibility = Visibility.Visible;
                    CurrentShape = "Rectangle";
                    break;
                case "EllipseRadio":
                    EllipseShape.Visibility = Visibility.Visible;
                    CurrentShape = "Ellipse";
                    break;
                case "TriangleRadio":
                    TriangleShape.Visibility = Visibility.Visible;
                    CurrentShape = "Triangle";
                    break;
                default:
                    break;
            }
        }

        private void WidthSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            RectangleShape.Width = WidthSlider.Value * 25;
            EllipseShape.Width = WidthSlider.Value * 25;

            //        100,0
            //          △
            //   0,200     200,200

            List<double> shapepoints = new List<double>() { };
            PointCollection newpoints = new PointCollection();

            foreach (System.Windows.Point pt in TriangleShape.Points)
            {
                shapepoints.Add(pt.X);
            }
            shapepoints = shapepoints.Distinct().ToList();

            foreach (System.Windows.Point pt in TriangleShape.Points)
            {
                if (pt.X == shapepoints.Max())
                {
                    newpoints.Add(new System.Windows.Point(WidthSlider.Value * 25, pt.Y));
                }
                else if (pt.X != shapepoints.Min())
                {
                    newpoints.Add(new System.Windows.Point(WidthSlider.Value * 25 / 2, pt.Y));
                }
                else
                {
                    newpoints.Add(new System.Windows.Point(pt.X, pt.Y));
                }
            }

            TriangleShape.Points = newpoints;
        }

        private void HeightSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            RectangleShape.Height = HeightSlider.Value * 25;
            EllipseShape.Height = HeightSlider.Value * 25;

            List<double> shapepoints = new List<double>() { };
            PointCollection newpoints = new PointCollection();

            foreach (System.Windows.Point pt in TriangleShape.Points)
            {
                shapepoints.Add(pt.Y);
            }
            shapepoints = shapepoints.Distinct().ToList();

            foreach (System.Windows.Point pt in TriangleShape.Points)
            {
                if (pt.Y == shapepoints.Max())
                {
                    newpoints.Add(new System.Windows.Point(pt.X, HeightSlider.Value * 25));
                }
                else if (pt.Y != shapepoints.Min())
                {
                    newpoints.Add(new System.Windows.Point(pt.X, HeightSlider.Value * 25 / 2));
                }
                else
                {
                    newpoints.Add(new System.Windows.Point(pt.X, pt.Y));
                }
            }

            TriangleShape.Points = newpoints;
        }

        private void FillColourPicker_SelectedColorChanged(object sender, RoutedPropertyChangedEventArgs<System.Windows.Media.Color?> e)
        {
            SolidColorBrush clr = new SolidColorBrush((System.Windows.Media.Color)FillColourPicker.SelectedColor);
            RectangleShape.Fill = clr;
            EllipseShape.Fill = clr;
            TriangleShape.Fill = clr;
        }
    }
}

Enjoying this tutorial?

Leave a comment Subscribe

VB.NET

' AZUL CODING ---------------------------------------
' WPF C#/VB - Shapes: Part 1 (Rectangles, Circles & Triangles)
' https://youtu.be/OQhBTPEIKs8


Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Drawing

Class MainWindow
    Private CurrentShape As String = "Rectangle"

    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub ShapeRadios_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        RectangleShape.Visibility = Visibility.Collapsed
        EllipseShape.Visibility = Visibility.Collapsed
        TriangleShape.Visibility = Visibility.Collapsed

        Select Case (CType(sender, RadioButton)).Name
            Case "RectangleRadio"
                RectangleShape.Visibility = Visibility.Visible
                CurrentShape = "Rectangle"
            Case "EllipseRadio"
                EllipseShape.Visibility = Visibility.Visible
                CurrentShape = "Ellipse"
            Case "TriangleRadio"
                TriangleShape.Visibility = Visibility.Visible
                CurrentShape = "Triangle"
            Case Else
        End Select
    End Sub

    Private Sub WidthSlider_ValueChanged(ByVal sender As Object, ByVal e As RoutedPropertyChangedEventArgs(Of Double))
        RectangleShape.Width = WidthSlider.Value * 25
        EllipseShape.Width = WidthSlider.Value * 25

        '        100,0
        '          △
        '   0,200     200,200

        Dim shapepoints As List(Of Double) = New List(Of Double) From {}
        Dim newpoints As PointCollection = New PointCollection()

        For Each pt As System.Windows.Point In TriangleShape.Points
            shapepoints.Add(pt.X)
        Next

        shapepoints = shapepoints.Distinct().ToList()

        For Each pt As System.Windows.Point In TriangleShape.Points

            If pt.X = shapepoints.Max() Then
                newpoints.Add(New System.Windows.Point(WidthSlider.Value * 25, pt.Y))
            ElseIf pt.X <> shapepoints.Min() Then
                newpoints.Add(New System.Windows.Point(WidthSlider.Value * 25 / 2, pt.Y))
            Else
                newpoints.Add(New System.Windows.Point(pt.X, pt.Y))
            End If
        Next

        TriangleShape.Points = newpoints
    End Sub

    Private Sub HeightSlider_ValueChanged(ByVal sender As Object, ByVal e As RoutedPropertyChangedEventArgs(Of Double))
        RectangleShape.Height = HeightSlider.Value * 25
        EllipseShape.Height = HeightSlider.Value * 25

        Dim shapepoints As List(Of Double) = New List(Of Double) From {}
        Dim newpoints As PointCollection = New PointCollection()

        For Each pt As System.Windows.Point In TriangleShape.Points
            shapepoints.Add(pt.Y)
        Next

        shapepoints = shapepoints.Distinct().ToList()

        For Each pt As System.Windows.Point In TriangleShape.Points

            If pt.Y = shapepoints.Max() Then
                newpoints.Add(New System.Windows.Point(pt.X, HeightSlider.Value * 25))
            ElseIf pt.Y <> shapepoints.Min() Then
                newpoints.Add(New System.Windows.Point(pt.X, HeightSlider.Value * 25 / 2))
            Else
                newpoints.Add(New System.Windows.Point(pt.X, pt.Y))
            End If
        Next

        TriangleShape.Points = newpoints
    End Sub

    Private Sub FillColourPicker_SelectedColorChanged(ByVal sender As Object, ByVal e As RoutedPropertyChangedEventArgs(Of System.Windows.Media.Color))
        Dim clr As SolidColorBrush = New SolidColorBrush(CType(FillColourPicker.SelectedColor, System.Windows.Media.Color))
        RectangleShape.Fill = clr
        EllipseShape.Fill = clr
        TriangleShape.Fill = clr
    End Sub
End Class

XAML

<!-- AZUL CODING --------------------------------------- -->
<!-- WPF C#/VB - Shapes: Part 1 (Rectangles, Circles & Triangles) -->
<!-- https://youtu.be/OQhBTPEIKs8 -->


<Window x:Class="Shapes.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:Shapes" xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
        mc:Ignorable="d"
        Title="Shapes - Azul Coding" Width="875" MinHeight="475" ResizeMode="CanMinimize" SizeToContent="Height">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="500"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid Margin="20,20,0,20" Grid.Column="0">
            <Rectangle x:Name="RectangleShape" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="200" Fill="#108beb"/>
            <Ellipse x:Name="EllipseShape" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="200" Fill="#108beb" Visibility="Collapsed"/>
            <Polygon x:Name="TriangleShape" HorizontalAlignment="Center" VerticalAlignment="Center" Points="0,200 100,0 200,200" Fill="#108beb" Visibility="Collapsed"/>
        </Grid>
        <StackPanel Grid.Column="1" Margin="20">
            <Label x:Name="ShapeLbl" Content="Choose a shape" FontSize="14"/>
            <StackPanel Orientation="Horizontal">
                <RadioButton Name="RectangleRadio" Content="Rectangle" GroupName="ShapeRadios" Margin="10,5,0,0" IsChecked="True" Click="ShapeRadios_Click"/>
                <RadioButton Name="EllipseRadio" Content="Ellipse" GroupName="ShapeRadios" Margin="20,5,0,0" Click="ShapeRadios_Click"/>
                <RadioButton Name="TriangleRadio" Content="Triangle" GroupName="ShapeRadios" Margin="20,5,0,0" Click="ShapeRadios_Click"/>
            </StackPanel>
            <Label x:Name="WidthLbl" Content="Width" FontSize="14" Margin="0,20,0,0"/>
            <Slider x:Name="WidthSlider" Orientation="Horizontal" Margin="10,5,10,0" Value="8" IsSnapToTickEnabled="True" Minimum="1" Maximum="16" ValueChanged="WidthSlider_ValueChanged"/>
            <Label x:Name="HeightLbl" Content="Height" FontSize="14" Margin="0,20,0,0"/>
            <Slider x:Name="HeightSlider" Orientation="Horizontal" Margin="10,5,10,0" Value="8" IsSnapToTickEnabled="True" Minimum="1" Maximum="16" ValueChanged="HeightSlider_ValueChanged"/>
            <Label x:Name="FillColourLbl" Content="Fill colour" FontSize="14" Margin="0,20,0,0"/>
            <xctk:ColorPicker x:Name="FillColourPicker" Height="26" ColorMode="ColorCanvas" UsingAlphaChannel="False" Margin="10,5,10,0" SelectedColor="#108beb" SelectedColorChanged="FillColourPicker_SelectedColorChanged"/>
        </StackPanel>
    </Grid>
</Window>

Discover more

4 Open-Source Windows & Android Apps for Your Next Project

View

I Made a 100% Free Language Learning Website with Eleventy

View