Free Code Snippets in C#, Net Framework, Office 365, ASP.Net,WPF, Visual Studio, SQL Server, Antivirus free

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"/>





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
C #: Windows ScreenShot save as file
WPF Color Picker on Color Cube
WPF: Draw ColorWheel in C# by drawing Lines


Contact for Jobs, Project Requests: