Freelance Project Requests info@CodeDocu.de 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"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:wpf_Canvas_Percent"

        mc:Ignorable="d"

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

    </Canvas>

</Window>

 

 

Mobile
»
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: raimund.popp@microsoft-programmierer.de