Rubrik: Controls | VB-Versionen: VB2008 | 06.05.10 |
WPF Button, dessen Inhalt sich stufenlos an eine Grössenänderung anpasst Der Tipp beschreibt die Grundlagen, um einen Button mit stufenlos skalierbarem Inhalt zu erstellen. Der Code kann in ein UserControl aufgenommen werden. | ||
Autor: Thomas Vinkmann | Bewertung: | Views: 10.490 |
ohne Homepage | System: Win2k, WinXP, Win7, Win8, Win10, Win11 | Beispielprojekt auf CD |
WPF bietet die Möglichkeit der Skalierung. Die kann man nutzen um den Inhalt eines Steuerelemnts stufenlos an eine Größenänderung anzupassen. Die dabei auftretenden Verzerrungen werden in Kauf genommen.
Die XAML Datei enthält folgende Beschreibung:
<Window x:Class="Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation; xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml; Title="Window1" Height="300" Width="300"> <Grid> <!-- Ein Canvas als Container für den Button Mit Margin wird das Canvas im Fenster positioniert ACHTUNG: Es dürfen KEINE festen Gößensangaben verwendet werden da sich die Größe nicht anpasst --> <Canvas Name="Container_1" SizeChanged="Container_1_SizeChanged" Margin="150,200,10,10" > <!-- In den Container wird ein Button eingefügt Mit Margin wird der Button im Canvas positioniert ACHTUNG: Es dürfen KEINE festen Gößensangaben verwendet werden da sich die Größe nicht anpasst --> <Button Name="SkalierbarerButton_1" Content="SkalierbarerButton" Margin="1,1,1,1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/> </Canvas> </Grid> </Window>
Alles weitere wird im "CodeBehind" verarbeitet:
1. Schritt Variablen und Objekte
- Variablen für Höhe/Breite des Canvas
- Variablen für Höhe/Breite des Button
- Variablen für das Verhälnis der Canvas Breite/Höhe zu Button Breite/Höhe
- Transformierung vom Typ ScaleTransform
Class Window1 #Region " Variablen " ''' <summary> ''' Variable für Container Breite ''' </summary> ''' <remarks>Nimmt die aktuelle Breite des Canvas auf</remarks> Private ContainerBreite As Double ''' <summary> ''' Variable für Container Hoehe ''' </summary> ''' <remarks>Nimmt die aktuelle Höhe des Canvas auf</remarks> Private ContainerHoehe As Double ''' <summary> ''' Variable für Button Breite ''' </summary> ''' <remarks>Nimmt die aktuelle Breite des Buttons auf</remarks> Private ButtonBreite As Double ''' <summary> ''' Variable für Button Höhe ''' </summary> ''' <remarks>Nimmt die aktuelle Höhe des Buttons auf</remarks> Private ButtonHoehe As Double ''' <summary> ''' Variable für Verhältnis in X-Richtung ''' </summary> ''' <remarks>Das Verhälnis aus Canvas Breite zu Button Breite</remarks> Private Skalierung_X As Double ''' <summary> ''' Variable für Verhältnis in Y-Richtung ''' </summary> ''' <remarks>Das Verhälnis aus Canvas Höhe zu Button Höhe</remarks> Private Skalierung_Y As Double ''' <summary> ''' Transformation Object ''' </summary> ''' <remarks>Hat den Typ ScaleTransform</remarks> Private MyScaleTransform As ScaleTransform #End Region ... ... ...
2. Reaktion auf die Größenänderung des Canvas und Berechnung der Skalierung
Für ScaleTransform werden nur die Parameter
- ScaleX
- ScaleY
#Region " Methoden " ''' <summary> ''' EVENT: Wird bei Grössenänderung des Containers ausgelöst ''' </summary> ''' <remarks>Berechnet die Skalierung des Buttons</remarks> Private Sub Container_1_SizeChanged(ByVal sender As System.Object, _ ByVal e As System.Windows.SizeChangedEventArgs) ' Aktuelle Container Breite ContainerBreite = Me.Container_1.ActualWidth ' Aktuelle Container Hoehe ContainerHoehe = Me.Container_1.ActualHeight ' Aktuelle Button Breite ButtonBreite = Me.SkalierbarerButton_1.ActualWidth ' Aktuelle Button Hoehe ButtonHoehe = Me.SkalierbarerButton_1.ActualHeight ' Verhälnis in X-Richtung berechnen Skalierung_X = ContainerBreite / ButtonBreite ' Verhälnis in Y-Richtung berechnen Skalierung_Y = ContainerHoehe / ButtonHoehe ' Transformation vom Typ ScaleTransform erstellen MyScaleTransform = New ScaleTransform(Skalierung_X, Skalierung_Y) ' Dem Button das neue Layout zuweisen Me.SkalierbarerButton_1.LayoutTransform = MyScaleTransform End Sub #End Region End Class
Dieser Code diente als Grundlage für ein UserControl Button, der eine Grafik und einen Text enthielt. Der komplette Inhalt sollte stufenlos skalierbar sein.