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"

        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 / 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
»
WPF: Snap In to Next Lines of Elements
»
WPF Code: Usercontrol with customizable size at runtime
»
WPF: Save the background of a Windows app as a ScreenShot
»
WPF, UWP: Create transparent app window
»
WPF: Determine the relative position of an element

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de