Freelance Project Requests Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net

WPF / UWP: Canvas with relative positions and sizes


This code example shows a Windows XAML application, where the positions and size of the elements in a Canvas Control match the runtime, relative to the size of the window or canvas element

In the Canvas_ChangedSize, the absolute position is calculated in a relative position for all elements that are located within the CanvasControl.


Canvas, Relative Position, Top, Left, Heigth, Width, UIElement, FrameworkElement, Grid



Windows 10 Desktop Classic WPF and UWP Universal Windows Platform App




Video Tutorial



The Canvas_SizeChanged event recalculates all child elements within the CanvasControl


private void Canvas_SizeChanged(object sender, SizeChangedEventArgs e)


            //----------------< Canvas_SizeChanged() >----------------



            Canvas canvas = sender as Canvas;

            SizeChangedEventArgs canvas_Changed_Args = e;


            //< check >

            //*if size=0 then initial

            if (canvas_Changed_Args.PreviousSize.Width == 0) return;

            //</ check >


            //< init >

            double old_Height = canvas_Changed_Args.PreviousSize.Height;

            double new_Height = canvas_Changed_Args.NewSize.Height;

            double old_Width = canvas_Changed_Args.PreviousSize.Width;

            double new_Width = canvas_Changed_Args.NewSize.Width;


            double scale_Width = new_Width / old_Width;

            double scale_Height = new_Height / old_Height;

            //</ init >



            //----< adapt all children >----

            foreach (FrameworkElement element in canvas.Children )


                //< get >

                double old_Left = Canvas.GetLeft(element);

                double old_Top = Canvas.GetTop(element);

                //</ get >


                // < set Left-Top>

                Canvas.SetLeft(element, old_Left * scale_Width);

                Canvas.SetTop(element, old_Top * scale_Height );

                // </ set Left-Top >


                //< set Width-Heigth >

                element.Width = element.Width * scale_Width;

                element.Height  = element.Height  * scale_Height;

                //</ set Width-Heigth >


            //----</ adapt all children >----


            //----------------</ Canvas_SizeChanged() >----------------




In Xaml, the example contains simple rectangles for the Designtime


<Window x:Class="wpf_Canvas_Percent.MainWindow"







        Title="MainWindow" Height="350" Width="525">

    <Canvas SizeChanged="Canvas_SizeChanged">

        <Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>

        <Rectangle Fill="Red"  Height="67" Stroke="Black" Canvas.Top="101" Width="115" Canvas.Left="101"/>

        <Rectangle Fill="Yellow"   Height="57" Canvas.Left="229" Stroke="Black" Width="77" Canvas.Top="181"/>





WPF: Drag Drop Example
Read text from PDF using iTextSharp
Send emails with WPF
C # Application: Webrobot to read all Ebay Kleinanzeigen
WPF: Navigate to a page
WPF: create a selectable list
WPF: Set Startup Window
Add WPF Local SQL Database to Application and Connect Data
WPF / UWP: Canvas with relative positions and sizes
C #, WPF, UWP: ScreenShot to save an app or window area as a file


Contact for Jobs, Project Requests: