Home

Welcome to the RichCanvas!

Important

You are reading the docs for RichCanvas v3.0.0 or greater. Versions before v3.0.0 will not be actively maintained anymore. Old documentation will still be available for a while as well as the code for anyone still interested.

For migrating to v3.0.0 please refer to the changelog or read the current updated docs.

Please update to v3.0.0 in order to keep up with new features, improvements or bug fixes coming with next versions.

RichCanvas is a WPF control that aims to deliver an enhanced and performant Canvas control with built-in features like panning, zooming, scrolling, drawing while also being able to hold items which can be selected and dragged.

RichCanvas is designed to work with MVVM.

Requirements

Install RichCanvas from Nuget

Install-Package RichCanvas

Quick start

Decalre the namespace: xmlns:rc="clr-namespace:RichCanvas;assembly=RichCanvas"

Use the following XAML:

<rc:RichCanvas Background="AliceBlue" />

Important

Set a Background on the RichCanvas control in order to become hit-testable.

Now you have a canvas with panning, zooming, scrolling and selecting.

Common XAML structure for MVVM:

<rc:RichCanvas ItemsSource="{Binding Items}">
    <rc:RichCanvas.ItemContainerStyle>
        <Style TargetType="rc:RichCanvasContainer">

            <Setter Property="Top"
                    Value="{Binding Top, Mode=TwoWay}" />

            <Setter Property="Left"
                    Value="{Binding Left, Mode=TwoWay}" />

            <Setter Property="Width"
                    Value="{Binding Width, Mode=TwoWay}" />

            <Setter Property="Height"
                    Value="{Binding Height, Mode=TwoWay}" />

            <Style.Triggers>
                <Trigger Property="IsSelected"
                         Value="True">
                    <Setter Property="Opacity"
                            Value="0.6" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </rc:RichCanvas.ItemContainerStyle>
</rc:RichCanvas>