vb@rchiv
VB Classic
VB.NET
ADO.NET
VBA
C#

https://www.vbarchiv.net
Rubrik: Controls   |   VB-Versionen: VB200806.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 VinkmannBewertung:  Views:  10.490 
ohne HomepageSystem:  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
benutzt.

#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.



Anzeige

Kauftipp Unser Dauerbrenner!Diesen und auch alle anderen Tipps & Tricks finden Sie auch auf unserer aktuellen vb@rchiv  Vol.6
(einschl. Beispielprojekt!)

Ein absolutes Muss - Geballtes Wissen aus mehr als 8 Jahren vb@rchiv!
- nahezu alle Tipps & Tricks und Workshops mit Beispielprojekten
- Symbol-Galerie mit mehr als 3.200 Icons im modernen Look
Weitere Infos - 4 Entwickler-Vollversionen (u.a. sevFTP für .NET), Online-Update-Funktion u.v.m.
 
 
Copyright ©2000-2024 vb@rchiv Dieter OtterAlle Rechte vorbehalten.


Microsoft, Windows und Visual Basic sind entweder eingetragene Marken oder Marken der Microsoft Corporation in den USA und/oder anderen Ländern. Weitere auf dieser Homepage aufgeführten Produkt- und Firmennamen können geschützte Marken ihrer jeweiligen Inhaber sein.