Kolumne: XAML Expertise

XAML-Tipp: UWP – Eingabesteuerelemente abrunden mit „CornerRadius“
Keine Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: UWP: Eingabesteuerelemente abrunden mit „CornerRadius“

Die Windows 10 SDK Preview 17738 beinhaltet eine weitere vielversprechende CornerRadius-Eigenschaft für Eingabesteuerelemente, die mit dem nächsten großen Windows-10-Update (Build 17738 oder höher) erscheinen soll. Bis jetzt waren die meisten Eingabesteuerelemente rechteckig, nun sind auch abgerundete Ecken möglich.

Beim XAML-Code in Listing 1 ist eine kleine Demoseite erstellt worden, in der ich ein paar Eingabesteuerelemente in einem StackPanel platziert habe. Für alle Steuerelemente habe ich den CornerRadius auf 8 gesetzt. Das Ergebnis zeigt Abbildung 1. Der Button, die TextBox, die PasswordBox und die ComboBox haben nun abgerundete Ecken. Leider funktioniert der TimePicker nicht. Ich hoffe, dass dieses Problem bis zur Veröffentlichung behoben sein wird. Das Fokusrechteck eines Buttons ist ebenfalls noch rechteckig, hier ist allerdings zu erwarten, dass das so bleibt.

<Page x:Class="App2.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:App2"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid>
    <StackPanel HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Spacing="8">
      <Button Content="Hello"
              HorizontalAlignment="Stretch"
              CornerRadius="8"
              FontSize="20"
              Margin="0,0,0,0"
              VerticalAlignment="Center" />
      <TextBox Text="World"
               CornerRadius="8" />
      <PasswordBox CornerRadius="8" />
      <ComboBox SelectedIndex="0"
                HorizontalAlignment="Stretch"
                CornerRadius="8">
        <ComboBoxItem Content="A" />
        <ComboBoxItem Content="B" />
        <ComboBoxItem Content="C" />
      </ComboBox>
      <TimePicker CornerRadius="8" />
    </StackPanel>
  </Grid>
</Page>
Abb. 1: Eingabesteuerelemente abrunden mit „CornerRadius“

Abb. 1: Eingabesteuerelemente abrunden mit „CornerRadius“

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -