Viewbox

<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            x:Class="Kuonen.UI.Galerie.Seiten.ViewboxVorfuehrung"
            Spacing="8">
  <TextBlock Text="Breite der Fläche" FontWeight="SemiBold" />
  <Slider Minimum="60" Maximum="360" Value="200" Width="240" HorizontalAlignment="Left" ValueChanged="Breite_ValueChanged" />
  <!-- Text und Knöpfe in einer Viewbox, deren Fläche der Regler ändert. -->
  <Border x:Name="Flaeche" Width="200" Height="120" BorderBrush="#A0A0A0" BorderThickness="1" HorizontalAlignment="Left">
    <Viewbox x:Name="Gross">
      <StackPanel Spacing="4">
        <TextBlock Text="Die Viewbox streckt ihr Kind." />
        <Button Content="OK" />
        <Button Content="Abbrechen" />
      </StackPanel>
    </Viewbox>
  </Border>
  <TextBlock Text="Die vier Stretch-Arten" FontWeight="SemiBold" />
  <StackPanel Orientation="Horizontal" Spacing="8">
    <StackPanel Spacing="2">
      <TextBlock Text="None" FontWeight="SemiBold" />
      <Border Width="110" Height="70" BorderBrush="#A0A0A0" BorderThickness="1">
        <Viewbox x:Name="Keine" Stretch="None">
          <Border Width="50" Height="30" Background="#C8E1FA" BorderBrush="#A0A0A0" BorderThickness="2"><TextBlock Text="Ab" HorizontalAlignment="Center" /></Border>
        </Viewbox>
      </Border>
    </StackPanel>
    <StackPanel Spacing="2">
      <TextBlock Text="Fill" FontWeight="SemiBold" />
      <Border Width="110" Height="70" BorderBrush="#A0A0A0" BorderThickness="1">
        <Viewbox x:Name="Fuellen" Stretch="Fill">
          <Border Width="50" Height="30" Background="#C8E1FA" BorderBrush="#A0A0A0" BorderThickness="2"><TextBlock Text="Ab" HorizontalAlignment="Center" /></Border>
        </Viewbox>
      </Border>
    </StackPanel>
    <StackPanel Spacing="2">
      <TextBlock Text="Uniform" FontWeight="SemiBold" />
      <Border Width="110" Height="70" BorderBrush="#A0A0A0" BorderThickness="1">
        <Viewbox x:Name="Gleichmaessig" Stretch="Uniform">
          <Border Width="50" Height="30" Background="#C8E1FA" BorderBrush="#A0A0A0" BorderThickness="2"><TextBlock Text="Ab" HorizontalAlignment="Center" /></Border>
        </Viewbox>
      </Border>
    </StackPanel>
    <StackPanel Spacing="2">
      <TextBlock Text="UniformToFill" FontWeight="SemiBold" />
      <Border Width="110" Height="70" BorderBrush="#A0A0A0" BorderThickness="1">
        <Viewbox x:Name="Ausfuellen" Stretch="UniformToFill">
          <Border Width="50" Height="30" Background="#C8E1FA" BorderBrush="#A0A0A0" BorderThickness="2"><TextBlock Text="Ab" HorizontalAlignment="Center" /></Border>
        </Viewbox>
      </Border>
    </StackPanel>
  </StackPanel>
  <TextBlock x:Name="Richtung" Text="StretchDirection: Both" />
  <StackPanel Orientation="Horizontal" Spacing="8">
    <Button Content="Both" Click="Beide_Click" />
    <Button Content="UpOnly" Click="NurHoch_Click" />
    <Button Content="DownOnly" Click="NurRunter_Click" />
  </StackPanel>
</StackPanel>

using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Ereignisse;
using Kuonen.UI.Layout;
using Kuonen.UI.Media;

namespace Kuonen.UI.Galerie.Seiten;

public sealed partial class ViewboxSeite
{
    protected override Func<UIElement>? KxamlFabrik => () => new ViewboxVorfuehrung();
}

/// <summary>KXAML-Fassung der Viewbox-Seite: der Baum steht in ViewboxSeite.kxaml, hier nur das Verhalten.</summary>
public sealed partial class ViewboxVorfuehrung
{
    public ViewboxVorfuehrung() => InitializeComponent();

    private void Breite_ValueChanged(object? sender, WertGeaendertArgs e) => Flaeche.Width = Math.Round(e.Neu);

    private void Setze(StretchDirection richtung)
    {
        foreach (var box in new[] { Gross, Keine, Fuellen, Gleichmaessig, Ausfuellen }) box.StretchDirection = richtung;
        Richtung.Text = $"StretchDirection: {richtung}";
    }

    private void Beide_Click(object sender, RoutedEventArgs e) => Setze(StretchDirection.Both);

    private void NurHoch_Click(object sender, RoutedEventArgs e) => Setze(StretchDirection.UpOnly);

    private void NurRunter_Click(object sender, RoutedEventArgs e) => Setze(StretchDirection.DownOnly);
}

using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Layout;
using Kuonen.UI.Media;

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: <see cref="Viewbox"/>.</summary>
public sealed partial class ViewboxSeite : GalerieSeite
{
    public override string Titel => "Viewbox";

    public override string Beschreibung =>
        "Die Viewbox streckt ihr Kind auf die eigene Fläche: Text, Knöpfe und alles andere wachsen und schrumpfen mit. Stretch "
        + "bestimmt, wie (None, Fill, Uniform, UniformToFill), StretchDirection, ob nur vergrössert, nur verkleinert oder beides. "
        + "Ziehen Sie den Regler und wählen Sie eine Richtung. Bei UniformToFill wird an der Fläche beschnitten.";

    public override string Stichworte => "Viewbox Stretch StretchDirection Uniform UniformToFill Fill None skalieren zoomen vergrössern Zoom PictureBox";

    public override string Datei => nameof(ViewboxSeite);

    private static readonly SolidColorBrush Rand = new(Color.FromRgb(160, 160, 160));
    private static readonly SolidColorBrush Hell = new(Color.FromRgb(200, 225, 250));

    public override UIElement Baue()
    {
        // Oben: Text und Knöpfe in einer Viewbox, deren Fläche ein Regler ändert.
        var inhalt = new StackPanel { Spacing = 4 };
        inhalt.Children.Add(new TextBlock { Text = "Die Viewbox streckt ihr Kind." });
        inhalt.Children.Add(new Button { Content = "OK" });
        inhalt.Children.Add(new Button { Content = "Abbrechen" });
        var gross = new Viewbox { Child = inhalt };
        var flaeche = new Border { Width = 200, Height = 120, BorderBrush = Rand, BorderThickness = new Thickness(1), HorizontalAlignment = HorizontalAlignment.Left, Child = gross };
        var breite = new Slider { Minimum = 60, Maximum = 360, Value = 200, Width = 240, HorizontalAlignment = HorizontalAlignment.Left };
        breite.ValueChanged += (_, e) => flaeche.Width = Math.Round(e.Neu);

        // Darunter: dieselbe Form in den vier Stretch-Arten, je in einer Zelle von 110 × 70.
        var kasten = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 8 };
        var boxen = new Viewbox[4];
        Stretch[] arten = [Stretch.None, Stretch.Fill, Stretch.Uniform, Stretch.UniformToFill];
        for (int i = 0; i < arten.Length; i++)
        {
            boxen[i] = new Viewbox
            {
                Stretch = arten[i],
                Child = new Border
                {
                    Width = 50, Height = 30, Background = Hell, BorderBrush = Rand, BorderThickness = new Thickness(2),
                    Child = new TextBlock { Text = "Ab", HorizontalAlignment = HorizontalAlignment.Center },
                },
            };
            var zelle = new StackPanel { Spacing = 2 };
            zelle.Children.Add(new TextBlock { Text = arten[i].ToString(), FontWeight = 600 });
            zelle.Children.Add(new Border { Width = 110, Height = 70, BorderBrush = Rand, BorderThickness = new Thickness(1), Child = boxen[i] });
            kasten.Children.Add(zelle);
        }

        var richtung = new TextBlock { Text = "StretchDirection: Both" };
        var knoepfe = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 8 };
        foreach (var r in new[] { StretchDirection.Both, StretchDirection.UpOnly, StretchDirection.DownOnly })
        {
            var knopf = new Button { Content = r.ToString() };
            knopf.Click += (_, _) =>
            {
                foreach (var box in boxen) box.StretchDirection = r;
                gross.StretchDirection = r;
                richtung.Text = $"StretchDirection: {r}";
            };
            knoepfe.Children.Add(knopf);
        }

        var seite = new StackPanel { Spacing = 8 };
        seite.Children.Add(new TextBlock { Text = "Breite der Fläche", FontWeight = 600 });
        seite.Children.Add(breite);
        seite.Children.Add(flaeche);
        seite.Children.Add(new TextBlock { Text = "Die vier Stretch-Arten", FontWeight = 600 });
        seite.Children.Add(kasten);
        seite.Children.Add(richtung);
        seite.Children.Add(knoepfe);
        return seite;
    }
}