freiberuflicher Software Entwickler C#, vb.Net, vba, UWP, WPF, WinForms, SQL Server, Access, Excel, ASP.Net Core MVC Telefon: 07022/9319004   Kontakt
#

WPF/UWP: Canvas mit relativen Positionen und Größen

 

Dieses Code Beispiel zeigt eine Windows XAML Anwendung, bei welcher sich die Positionen und Größe der Elemente in einem Canvas Control zur Laufzeit anpassen, relativ zur Größe des Fensters oder des Canvas Elements

Dabei wird im Canvas_ChangedSize die absolute Position in eine relative Position für alle Elemente berechnet, welche sich innerhalb des Canvas Controls befinden.

 

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

 

 

Windows 10 Desktop Classic WPF und UWP Universal Windows Platform App

 

 

 

Video Tutorial

 

 

Über den Canvas_SizeChanged Event werden alle Child-Elemente innerhalb des Canvas Controls neu berechnet

 

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 sind im Beispiel einfach Rechtecke enthalten zur 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 mit relativen Positionen und Größen
»
C#, WPF, UWP: ScreenShot einer App oder Fenster-Bereich als Datei speichern
»
C#: Windows ScreenShot als Datei speichern
»
WPF Color Picker on a White-Black Color Cube
»
WPF: ColorWheel in C# zeichnen
»
WPF: Snap Element Size to Next Lines
»
WPF Code: Usercontrol mit anpassbarer Größe zur Laufzeit
»
WPF: Speichern des Hintergrunds einer Windows App als ScreenShot
»
WPF: Transparentes Fenster App erstellen
»
WPF: Relative Position eines Elements ermitteln

.

Jobs, Projekte, Angebote für Freiberufler, Selbstständig an Raimund.Popp@Microsoft-Programmierer.de