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: 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: 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: Defining an instance in XAML

This entry is part 30 of 54 in the series Learn WPF

In WPF, we can actually create an instance of a Class such as the PopStar in the example below by defining it in the XML namespace.

<Window x:Class="CustType.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:CustType"
        Title="MainWindow" Height="350" Width="525">
    <Label FontSize="20">
        <local:PopStar Name="Pitbull" 
             Album="Wild Wild Love" Price="12" 
               YearReleased="2013" />
    </Label>
</Window>

Notice that line 7 is actually the content of the Label control.

In line 7, we are actually creating an instance of a class called PopStar.  We have local:PopStar and so when the XAML is compiled, it will look for a class defined in clr-namespace:Custtype.

This actually corresponds to CustType namespace in MainWindow.xaml.cs.

using System.Windows;

namespace CustType
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    /// 
    class PopStar
    {
        public string Name { get; set; }
        public string Album { get; set; }
        public decimal Price { get; set; }
        public int YearReleased { get; set; }


        public override string ToString()
        {
            return string.Format("{0} by {1}\nReleased {2}", Album, Name, YearReleased);
        }

    }

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

The output from running the above code is as below.  The output is actually formatted by line 32 by overriding the ToString method.

instanceXAML

To illustrate the example better, I can also add another instance in the XAML.

<Window x:Class="CustType.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:CustType"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel>
     <Label FontSize="20">
        <local:PopStar Name="Pitbull" 
             Album="Wild Wild Love" Price="12" 
               YearReleased="2013" />
     </Label>
     <Label FontSize="20">
        <local:PopStar Name="Madonna" 
         Album="Immaculate Collection" Price="10" 
           YearReleased="1991" />
     </Label>
    </StackPanel>
</Window>

The output from running the above code will be:

instance2