WPF: Accessing attached properties

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

In the example below, the Canvas.Left and Canvas.Top are attached properties.

Now let’s try changing these properties in code. When the repeat button is clicked, let’s move the rectangle a little bit to the right.

The RepeatButton class represents a control that is similar to a Button.  The RepeatButton fires its Click event repeatedly from the time it is pressed until it is released.

MainWindow.xaml
<Window x:Class="Attached.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas>
        <RepeatButton Click="RepeatButton_Click" Content="Move" Width="80"/>
        <Rectangle 
            Name="rect" 
            Canvas.Top="60" 
            Canvas.Left="60" 
            Width="150" 
            Height="150" 
            Fill="Yellow"/>
    </Canvas>
</Window>

 

MainWindow.xaml.cs
using System.Windows;
using System.Windows.Controls;

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

        private void RepeatButton_Click(object sender, RoutedEventArgs e)
        {
            // Canvas.SetLeft(rect, 50);
            Canvas.SetLeft(rect, Canvas.GetLeft(rect) + 5);
        }
    }
}

We can access the Canvas.Left using Canvas.SetLeft(rect, 100).

However, for our case here, we want the rectangle to move to the right repeatly as long as we are clicking on the button.  The code that we are using is:

Canvas.SetLeft(rect, Canvas.GetLeft(rect) + 5);

 

 

WPF: Creating ellipse or rectangle using canvas

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

Using WPF, we can create ellipse or rectangle using XAML canvas.

The following example create a red ellipse and a blue rectangle.

MainWindow.xaml
<Window x:Class="Ellipse.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas>
        <Ellipse Fill="Red" Width="100" Height="60" />
        <Rectangle Fill="Blue" Width="80" Height="80" Canvas.Left="100" Canvas.Top="100" />
        <Button Content="Hello" Canvas.Left="130" Canvas.Top="30" FontSize="20" />
    </Canvas>
</Window>

The output from running the above code is:

ellipse

 

WPF: Creating overlapping rectangles using canvas

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

The following example produces three Rectangle elements, each element 100 pixels. The first Rectangle is red, and its upper-left (x, y) position is specified as (0, 0). The second Rectangle is green, and its upper-left position is (100, 100), which is just below, and to the right of, the first square. The third Rectangle is blue, and its upper-left position is (50, 50).

MainWindow.xaml
<Window x:Class="Ellipse.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas Height="400" Width="400">
        <Canvas Height="100" Width="100" Top="0" Left="0" Background="Red"/>
        <Canvas Height="100" Width="100" Top="100" Left="100" Background="Green"/>
        <Canvas Height="100" Width="100" Top="50" Left="50" Background="Blue"/>
    </Canvas>
</Window>

canvas_rect

 

 

WPF: Using RenderTransform on ellipse

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

Suppose we want to rotate a particular element around its center, we can use dependency property RenderTransform.

<Window x:Class="Ellipse.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas Height="400" Width="400">
        <Ellipse Fill="Red" Width="100" Height="60" 
         RenderTransformOrigin="0.1,0.6">
            <Ellipse.RenderTransform>
                <RotateTransform Angle="30" />
            </Ellipse.RenderTransform>
        </Ellipse>
    </Canvas>
</Window>

The output will be:

render

RenderTransformOrigin has a somewhat nonstandard use of the Point structure value.

Values between 0 and 1 are interpreted as a factor for the range of the current element in each x,y axis.

For example, (0.5,0.5) will cause the render transform to be centered on the element, or (1,1) would place the render transform at the bottom right corner of the element.