ComboBox wie in Windows 10 Calculator App

Question

Screenshot von ComboBox in der Windows 10-Rechner App

In UWP gibt es einen eingebauten Stil für Tasten, die es wie ein Link macht, die TextBlockButtonStyle.

Ich möchte den Stil der ComboBox in der Windows 10 Calculator App wie ich oben gepostet replizieren.

Ich habe versucht, den Standard-Stil ComboBox zu bearbeiten, aber ich bin nicht sicher, ob dies der Teil ist, wo der „Ausgewählten Text“ im Stil erscheint:

<ContentPresenter x:Name="ContentPresenter" 
       Grid.Row="1" 
       Margin="{TemplateBinding Padding}" 
       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
       VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> 
    <TextBlock x:Name="PlaceholderTextBlock" 
      Text="{TemplateBinding PlaceholderText}" 
      Foreground="{ThemeResource ComboBoxPlaceHolderForeground}" /> 
</ContentPresenter> 

Und wenn das der rechte Teil ist zu bearbeiten , wie werde ich anfangen? Vielen Dank!

Answer 1

Sie müssen Ihre Steuerung neu erstellen, damit dies funktioniert.

Die Grenze auf dem tatsächlichen ComboBox kann BorderBrush="{x:Null}"

Aber die tatsächliche Pressed und Focused Visuelle Staaten werden noch BorderBrush und Background an die Steuer hinzufügen Verwendung entfernt werden. Also müssen wir diese visuellen Zustände entfernen.

Kopieren Sie den Style von ComboBox styles and templates.

gibt ihm einen Schlüssel x:Key="ComboBoxStyle"

Ist das erledigt, entfernt Inhalt in

<VisualState x:Name="Pressed" /> 
<VisualState x:Name="Focused" /> 

Und dann verwenden, wie unten.

<ComboBox HorizontalAlignment="Center" VerticalAlignment="Center" 
      BorderBrush="{x:Null}" SelectedIndex="0" 
      Style="{StaticResource ComboBoxStyle}" /> 

Ende Ausgangs

Dies ist nicht genau wie es in Calculator App ist, aber Sie sollten eine Vorstellung bekommen.

Spielen Sie mit den Stilen und Sie sollten in der Lage sein, die gewünschte Ausgabe zu erhalten.