WPF Graphics: Drawing a line

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

In windows, you can draw a line using line or pen.  The example here shows using a line with a StrokeThickness set to 5px.

MainWindow.xaml:

<Window x:Class="WpfApplication7.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:WpfApplication7"
        mc:Ignorable="d"
        Loaded="OnLoad"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel Name="stack">

    </StackPanel>
</Window>

MainWindow.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication7
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private Line line;

        public MainWindow()
        {
            InitializeComponent();
        }

        void OnLoad(object sender, RoutedEventArgs e)
        {
            line = new Line();
            line.Stroke = Brushes.LightSteelBlue;

            line.X1 = 10;
            line.X2 = 500;
            line.Y1 = 10;
            line.Y2 = 300;

            line.StrokeThickness = 5;
            stack.Children.Add(line);
        }
    }
}

line

WPF Graphics: Draw some lines using pure XAML

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

I just realised that it is possible to draw lines using pure XAML.  No code-behind is needed.

This example is taken from Microsoft site.

MainWindow.xaml:

<Window x:Class="WpfApplication8.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:WpfApplication8"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">

    <Canvas Height="300" Width="300">

        <!-- Draws a diagonal line from (10,10) to (50,50). -->
        <Line
    X1="10" Y1="10"
    X2="250" Y2="250"
    Stroke="Black"
    StrokeThickness="4" />

        <!-- Draws a diagonal line from (10,10) to (50,50)
       and moves it 100 pixels to the right. -->
        <Line
    X1="10" Y1="10"
    X2="280" Y2="280"
    StrokeThickness="4"
    Canvas.Left="100">
            <Line.Stroke>
                <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                    <RadialGradientBrush.GradientStops>
                        <GradientStop Color="Red" Offset="0" />
                        <GradientStop Color="Blue" Offset="0.25" />
                    </RadialGradientBrush.GradientStops>
                </RadialGradientBrush>
            </Line.Stroke>
        </Line>

        <!-- Draws a horizontal line from (10,60) to (150,60). -->
        <Line
     X1="10" Y1="60"
     X2="350" Y2="60"
     Stroke="Black"
     StrokeThickness="4"/>

    </Canvas>

</Window>

MainWindow.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

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

xamlline

WPF Graphics: Draw an ellipse using pure XAML

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

An example from Microsoft:

MainWindows.xaml:

<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="100"
        Width="200"
        StrokeThickness="2"
        Stroke="Black"/>
</Window>

MainWindows.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

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

ellipse

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

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