Create a Scrollable Canvas Control : Canvas « Windows Presentation Foundation « C# / CSharp Tutorial

<Window x:Class="WpfApplication1.Window1"
    Title="WPF" Height="200" Width="400" >

        <Style TargetType="Button">
            <Setter Property="Width" Value="Auto" />
            <Setter Property="Height" Value="24" />

            <ColumnDefinition Width="0.5*"/>
            <ColumnDefinition Width="0.5*"/>

        <ScrollViewer Grid.Column="0">
                <Button Canvas.Top="80" Canvas.Left="80">In View</Button>
                <Button Canvas.Top="300" Canvas.Left="80">Out of view</Button>

        <ScrollViewer Grid.Column="1">
                <Button Canvas.Top="80" Canvas.Left="80">In View</Button>
                <Button Canvas.Top="300" Canvas.Left="80">Out of View</Button>


using System.Windows;
using System;
using System.Windows;
using System.Windows.Controls;
namespace WpfApplication1
    public partial class Window1 : Window
        public Window1()

    public class ScrollableCanvasControl : Canvas
        static ScrollableCanvasControl()
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ScrollableCanvasControl), new FrameworkPropertyMetadata(typeof(ScrollableCanvasControl)));

        protected override Size MeasureOverride(Size constraint)
            double bottomMost = 0d;
            double rightMost = 0d;

            foreach(object obj in Children)
                FrameworkElement child = obj as FrameworkElement;

                if(child != null)

                    bottomMost = Math.Max(bottomMost,GetTop(child) +child.DesiredSize.Height);
                    rightMost = Math.Max(rightMost, GetLeft(child) + child.DesiredSize.Width);
            return new Size(rightMost, bottomMost);
WPF Create A Scrollable Canvas Control

24.37.1.Simple Canvas LayoutSimple Canvas Layout
24.37.2.Put Nested Canvas to TabItemPut Nested Canvas to TabItem
24.37.3.Positioning on a CanvasPositioning on a Canvas
24.37.4.Canvas without ViewboxCanvas without Viewbox
24.37.5.Animation target Canvas Left, TopAnimation target Canvas Left, Top
24.37.6.Pixel Not SnappedPixel Not Snapped
24.37.7.Rotate Shape in a CanvasRotate Shape in a Canvas
24.37.8.Canvas dependantCanvas dependant
24.37.12.Canvas PreviewMouseDown action and MouseDown actionCanvas PreviewMouseDown action and MouseDown action
24.37.13.Create a Scrollable Canvas ControlCreate a Scrollable Canvas Control
24.37.14.Create a Zoomable Canvas ControlCreate a Zoomable Canvas Control
24.37.15.Set control position for CanvasSet control position for Canvas
24.37.16.Canvas Positioning Properties SampleCanvas Positioning Properties Sample
24.37.17.Get position on a Canvas with Canvas.GetLeftGet position on a Canvas with Canvas.GetLeft
24.37.18.Canvas size changed event