Zum Inhalt
Kuonen.UI

TextBlock

Zeigt Text: mit Umbruch oder Kürzung („…“), ausgerichtet, in Schrift, Grösse, Gewicht und Stil. Über Inlines trägt jeder Lauf (Run, Bold, Italic, Span) sein eigenes Format; InlineBei findet den Lauf unter dem Zeiger.

Vorführung: TextBlockVorführung: TextBlock

KXAML

TextBlockSeite.kxaml
<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            x:Class="Kuonen.UI.Galerie.Seiten.TextBlockVorfuehrung"
            Spacing="12">
  <!-- Umbruch, Kürzung, Ausrichtung. -->
  <TextBlock Text="Umbruch: Franz jagt im komplett verwahrlosten Taxi quer durch Bayern, und der Text läuft weiter, als die Zeile breit ist."
             TextWrapping="Wrap" MaxWidth="360" HorizontalAlignment="Left" />
  <TextBlock Text="Kürzung: Franz jagt im komplett verwahrlosten Taxi quer durch Bayern, und der Text läuft weiter, als die Zeile breit ist."
             TextTrimming="CharacterEllipsis" MaxWidth="360" HorizontalAlignment="Left" />
  <TextBlock Text="Rechtsbündig" TextAlignment="Rechts" Width="360" HorizontalAlignment="Left" />
  <!-- Schrift: Grösse, Gewicht, Stil (als vererbte Text-Eigenschaft), Farbe. -->
  <StackPanel Orientation="Horizontal" Spacing="16">
    <TextBlock Text="Gross" FontSize="24" />
    <TextBlock Text="Fett" FontWeight="Bold" VerticalAlignment="Bottom" />
    <TextBlock VerticalAlignment="Bottom" TextElement.FontStyle="Italic" Text="Kursiv" />
    <TextBlock Text="Farbig" Foreground="#C42B1C" VerticalAlignment="Bottom" />
  </StackPanel>
  <!-- Inlines: Läufe mit eigenem Format in einem Absatz, ein harter Umbruch, Treffer je Lauf. -->
  <TextBlock x:Name="Absatz" TextWrapping="Wrap" MaxWidth="480" HorizontalAlignment="Left" PointerPressed="Absatz_PointerPressed">
    <Run Text="Ein Absatz mit " />
    <Bold><Run Text="fetten" /></Bold>
    <Run Text=", " />
    <Italic><Run Text="kursiven" /></Italic>
    <Run Text=" und " />
    <Span Foreground="#0078D4">
      <Run Text="blauen " />
      <Run Text="grossen" FontSize="20" />
    </Span>
    <Run Text=" Läufen." />
    <LineBreak />
    <Run Text="Nach dem LineBreak geht es auf einer neuen Zeile weiter." />
  </TextBlock>
  <TextBlock x:Name="Treffer" Text="Klicke auf ein Wort im Absatz." />
</StackPanel>
TextBlockSeite.kxaml.cs
using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Eingabe;

namespace Kuonen.UI.Galerie.Seiten;

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

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

    private void Absatz_PointerPressed(object sender, PointerEventArgs e)
    {
        var lauf = Absatz.InlineBei(e.PositionIn(Absatz)) as Run;
        Treffer.Text = lauf is null ? "Kein Lauf getroffen." : $"Getroffen: Lauf „{lauf.Text}“.";
    }
}

C#

TextBlockSeite.cs
using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Layout;
using Kuonen.UI.Media;
using Kuonen.UI.Text;

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: <see cref="TextBlock"/> mit Inlines.</summary>
public sealed partial class TextBlockSeite : GalerieSeite
{
    public override string Titel => "TextBlock";

    public override string Beschreibung =>
        "Zeigt Text: mit Umbruch oder Kürzung („…“), ausgerichtet, in Schrift, Grösse, Gewicht und Stil. Über Inlines "
        + "trägt jeder Lauf (Run, Bold, Italic, Span) sein eigenes Format; InlineBei findet den Lauf unter dem Zeiger.";

    public override string Stichworte => "Text Beschriftung Inlines Run Span Bold Italic fett kursiv LineBreak Umbruch Kürzung TextTrimming";

    public override string Datei => nameof(TextBlockSeite);

    public override UIElement Baue()
    {
        const string Satz = "Franz jagt im komplett verwahrlosten Taxi quer durch Bayern, und der Text läuft weiter, als die Zeile breit ist.";

        // Umbruch, Kürzung, Ausrichtung.
        var umbruch = new TextBlock { Text = "Umbruch: " + Satz, TextWrapping = TextWrapping.Wrap, MaxWidth = 360, HorizontalAlignment = HorizontalAlignment.Left };
        var kuerzung = new TextBlock { Text = "Kürzung: " + Satz, TextTrimming = TextTrimming.CharacterEllipsis, MaxWidth = 360, HorizontalAlignment = HorizontalAlignment.Left };
        var rechts = new TextBlock { Text = "Rechtsbündig", TextAlignment = TextAusrichtung.Rechts, Width = 360, HorizontalAlignment = HorizontalAlignment.Left };

        // Schrift: Grösse, Gewicht, Stil.
        var formate = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 16 };
        formate.Children.Add(new TextBlock { Text = "Gross", FontSize = 24 });
        formate.Children.Add(new TextBlock { Text = "Fett", FontWeight = 700, VerticalAlignment = VerticalAlignment.Bottom });
        var kursivBlock = new TextBlock { VerticalAlignment = VerticalAlignment.Bottom };
        kursivBlock.SetValue(TextElement.FontStyleProperty, FontStyle.Italic); // Stil als vererbte Text-Eigenschaft
        kursivBlock.Text = "Kursiv";
        formate.Children.Add(kursivBlock);
        formate.Children.Add(new TextBlock { Text = "Farbig", Foreground = new SolidColorBrush(Color.FromRgb(0xC4, 0x2B, 0x1C)), VerticalAlignment = VerticalAlignment.Bottom });

        // Inlines: Läufe mit eigenem Format in einem Absatz, ein harter Umbruch, Treffer je Lauf.
        var absatz = new TextBlock { TextWrapping = TextWrapping.Wrap, MaxWidth = 480, HorizontalAlignment = HorizontalAlignment.Left };
        absatz.Inlines.Add(new Run("Ein Absatz mit "));
        var fett = new Bold();
        fett.Inlines.Add(new Run("fetten"));
        absatz.Inlines.Add(fett);
        absatz.Inlines.Add(new Run(", "));
        var kursiv = new Italic();
        kursiv.Inlines.Add(new Run("kursiven"));
        absatz.Inlines.Add(kursiv);
        absatz.Inlines.Add(new Run(" und "));
        var farbig = new Span { Foreground = new SolidColorBrush(Color.FromRgb(0x00, 0x78, 0xD4)) };
        farbig.Inlines.Add(new Run("blauen "));
        farbig.Inlines.Add(new Run("grossen") { FontSize = 20 });
        absatz.Inlines.Add(farbig);
        absatz.Inlines.Add(new Run(" Läufen."));
        absatz.Inlines.Add(new LineBreak());
        absatz.Inlines.Add(new Run("Nach dem LineBreak geht es auf einer neuen Zeile weiter."));

        var treffer = new TextBlock { Text = "Klicke auf ein Wort im Absatz." };
        absatz.PointerPressed += (_, e) =>
        {
            var lauf = absatz.InlineBei(e.PositionIn(absatz)) as Run;
            treffer.Text = lauf is null ? "Kein Lauf getroffen." : $"Getroffen: Lauf „{lauf.Text}“.";
        };

        var seite = new StackPanel { Spacing = 12 };
        seite.Children.Add(umbruch);
        seite.Children.Add(kuerzung);
        seite.Children.Add(rechts);
        seite.Children.Add(formate);
        seite.Children.Add(absatz);
        seite.Children.Add(treffer);
        return seite;
    }
}