Steuerelemente (XAML mit C#/C++/VB)

Fügen Sie mit den neuen XAML-Steuerelementen in Windows 8.1 Ihrer Windows Store-App neue Funktionen hinzu, einschließlich einer Datums- und Uhrzeitauswahl und einer erweiterten Navigationsunterstützung. Außerdem können vorhandene Steuerelemente dank der vorgenommenen Aktualisierungen einfacher und vielseitiger eingesetzt werden. Die neuen Steuerelemente und Steuerelementaktualisierungen machen die Erstellung einer App mit zahlreichen Features so einfach wie nie.

Neue Steuerelemente und Steuerelementaktualisierungen

In Windows 8.1 werden diese neuen Steuerelemente und Features eingeführt:

Windows 8.1 enthält Aktualisierungen für vorhandene Steuerelemente:

AppBar-Steuerelemente

[Laden Sie sich gleich jetzt das Beispiel für ein XAML-AppBar-Steuerelement herunter.]

In Windows 8.1 werden neue Steuerelemente für XAML eingeführt, mit denen sich Befehlsschaltflächen für App-Leisten, die den Designrichtlinien entsprechen und das beabsichtigte Verhalten aufweisen, einfacher erstellen lassen: die Steuerelemente AppBarButton, AppBarToggleButton und AppBarSeparator.

App-Leistenschaltflächen für XAML

 

App-Leistenschaltflächen unterscheiden sich in mehreren Punkten von Standardschaltflächen:

  • Ihre Standarddarstellung ist ein Kreis (anstelle eines Rechtecks).

  • Der Inhalt wird mit den Eigenschaften Label und Icon festgelegt (anstelle der Content-Eigenschaft). Die Content-Eigenschaft wird ignoriert.

  • Die Größe der Schaltfläche wird durch ihre IsCompact-Eigenschaft gesteuert.

App-Leistenschaltflächen verfügen über zwei Größen: normal und kompakt. Standardmäßig haben sie eine Beschriftung und den vollen Abstand. Wenn die IsCompact-Eigenschaft auf true festgelegt wird, wird die Beschriftung ausgeblendet und der Abstand rund um die Schaltflächen verringert. Für das AppBarSeparator-Steuerelement ist ebenfalls ein kompakter Zustand verfügbar, in dem der Abstand reduziert wird.

Die folgende Abbildung zeigt die gleichen Befehle wie oben im kompakten Zustand.

Kompakte App-Leistenschaltflächen

 

Wenn Sie die App-Leistensteuerelemente des neuen CommandBar-Steuerelements verwenden, wird die Eigenschaft IsCompact von der CommandBar automatisch festgelegt. Wenn Sie eine App-Leistenschaltfläche außerhalb einer CommandBar verwenden, z. B. in einer AppBar oder auf der App-Canvas, müssen Sie die Eigenschaft IsCompact im Code entsprechend festlegen.

Sie können App-Leistenschaltflächen außerhalb einer App-Leiste verwenden. Eine App-Leistenschaltfläche wird z. B. oft als Zurück-Schaltfläche in der Kopfzeile verwendet. Bei der Verwendung einer Schaltfläche außerhalb einer App-Leiste sollte die Schaltfläche gemäß den Windows-Richtlinien immer kompakt dargestellt werden.

Der Inhalt der App-Leistenschaltflächen wird mit den Eigenschaften Label und Icon festgelegt. Legen Sie die Label-Eigenschaft auf eine Zeichenfolge fest, um die Beschriftung anzugeben. Die Beschriftung wird standardmäßig angezeigt und ausgeblendet, wenn die Schaltfläche in ihrem kompakten Zustand ist. Sie müssen daher auch ein aussagekräftiges Symbol definieren. Legen Sie zu diesem Zweck für die Eigenschaft Icon der Schaltfläche ein Element aus der neuen Klasse IconElement fest. Vier Arten von Symbolelementen sind verfügbar:

  • FontIcon: Das Symbol basiert auf einer Glyphe aus der angegebenen Schriftartfamilie.

  • BitmapIcon: Das Symbol basiert auf einer Bitmapbilddatei mit dem festgelegten Uri.

  • PathIcon: Das Symbol basiert auf Path-Daten.

  • SymbolIcon – Das Symbol basiert auf einer vordefinierten Liste von Glyphen der Schriftart "Segoe UI Symbol".

Erstellen einer App-Leistenschaltfläche

In diesem Beispiel wird veranschaulicht, wie die Steuerelemente AppBarButton, AppBarSeparator und AppBarToggleButton mit den jeweiligen Symboltypen erstellt werden.


<!-- App bar button with symbol icon. -->
<AppBarButton Icon="Like" Label="SymbolIcon" Click="AppBarButton_Click"/>         

<!-- App bar button with bitmap icon. -->
<AppBarButton Label="BitmapIcon" Click="AppBarButton_Click">
    <AppBarButton.Icon>
        <BitmapIcon UriSource="ms-appx:///Assets/globe.png"/>
    </AppBarButton.Icon>
</AppBarButton>

<AppBarSeparator />

<!-- App bar toggle button with font icon. -->
<AppBarToggleButton Label="FontIcon" Click="AppBarButton_Click">
    <AppBarToggleButton.Icon>
        <FontIcon FontFamily="Candara" Glyph="&#x03A3;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

<!-- App bar toggle button with path icon. -->
<AppBarToggleButton Label="PathIcon" Click="AppBarButton_Click">
    <AppBarToggleButton.Icon>
        <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

Mit diesem Beispielcode werden die folgenden Steuerelemente erstellt.

Beispiele für das Symbol einer App-Leistenschaltfläche.

 

CommandBar

[Laden Sie sich gleich jetzt das Beispiel für ein XAML-AppBar-Steuerelement herunter.]

In Windows 8.1 wird ein neues Steuerelement für XAML eingeführt, mit dem Sie ordnungsgemäß gestaltete App-Leisten ganz einfach erstellen können: das CommandBar-Steuerelement.

Die Befehlsleiste

 

Das CommandBar-Steuerelement bietet folgende Funktionen, die das Erstellen einfacher App-Leisten erleichtern:

  • Automatisches Befehlslayout mit primären Befehlen auf der rechten Seite und sekundären Befehlen auf der linken Seite.

  • Automatische Größenänderung von App-Leistenschaltflächen, wenn sich die Größe der App ändert.

Wenn Sie eine App-Leiste benötigen, die nur die Steuerelemente AppBarButton, AppBarToggleButton und AppBarSeparator enthält, verwenden Sie diese neue CommandBar. Falls Sie komplexere Inhalte benötigen (z. B. Bilder, Statusleisten oder Textblöcke), verwenden Sie ein AppBar-Steuerelement.

Standardmäßig werden Elemente, die Sie der CommandBar hinzufügen, der PrimaryCommands-Auflistung hinzugefügt. Diese Befehle werden auf der rechten Seite der CommandBar angezeigt. Sie können der SecondaryCommands-Auflistung auch Befehle hinzufügen. Diese Elemente werden auf der linken Seite angezeigt.

Die Steuerelemente von App-Leistenschaltflächen verfügen über zwei Größen: normal und kompakt. Standardmäßig haben sie eine Beschriftung und den vollen Abstand. Wenn die IsCompact-Eigenschaft auf true festgelegt wird, wird die Beschriftung ausgeblendet und der Abstand rund um die Schaltflächen verringert. Für das AppBarSeparator-Steuerelement ist ebenfalls ein kompakter Zustand verfügbar, in dem der Abstand reduziert wird. Wenn Sie diese Steuerelemente im neuen Steuerelement CommandBar verwenden, wird die Eigenschaft IsCompact jeweils automatisch festgelegt, wenn der Platz für eine Darstellung in voller Größe nicht ausreicht.

Die folgende Abbildung zeigt die gleichen primären Befehle wie oben im kompakten Zustand.

Befehlsleiste mit kompakten Schaltflächen

 

Erstellen eines CommandBar-Steuerelements

Mit folgendem Beispiel wird die oben gezeigte Befehlsleiste erstellt.


<Page.BottomAppBar>
    <CommandBar>
        <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click"/>
        <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
        <AppBarSeparator/>
        <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>

        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Like" Label="Like" Click="AppBarButton_Click"/>
            <AppBarButton Icon="Dislike" Label="Dislike" Click="AppBarButton_Click"/>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

DatePicker

[Laden Sie sich gleich jetzt das Beispiel für ein XAML-DatePicker- und -TimePicker-Steuerelement herunter.]

In Windows 8.1 wird ein neues Steuerelement für XAML eingeführt, mit dem der Benutzer ein lokalisiertes Datum in Ihrer App festlegen kann: das DatePicker-Steuerelement.

Die Datumsauswahl

 

Mit der Datumsauswahl verfügen Sie über eine standardisierte Methode, mit der Benutzer ein lokalisiertes Datum per Toucheingabe, Maus oder Tastatur auswählen können. Sie können das Steuerelement DatePicker in seiner standardmäßigen Form mit minimalem XAML- oder anderem Code verwenden, oder Sie können das Steuerelement ganz variabel anpassen.

Das DatePicker-Steuerelement unterstützt jedes der von Windows unterstützten Kalendersysteme. Diese neun Kalender sind in der Windows.Globalization.CalendarIdentifiers-Klasse angegeben. Das Steuerelement DatePicker verwendet den richtigen Kalender für die standardmäßige Sprache Ihrer App. Alternativ können Sie die CalendarIdentifier-Eigenschaft für die Verwendung eines bestimmten Kalendersystems verwenden.

Erstellen eines DatePicker-Steuerelements

Dieses Beispiel zeigt, wie Sie ein einfaches DatePicker-Steuerelement mit einer Kopfzeile erstellen.


<DatePicker x:Name=arrivalDatePicker Header="Arrival Date"/>

So sieht dieses DatePicker-Steuerelement aus, wenn die Tagesauswahl geöffnet ist.

Datumsauswahl mit geöffneter Tagesauswahl

 

Sie können das Datum im Code festlegen oder an eine Instanz von DateTimeOffset binden. Hier ist im Code für das DatePicker-Steuerelement ein Standardwert von zwei Monaten ab dem aktuellen Datum festgelegt, und das Mindestjahr ist auf das aktuelle Jahr gesetzt.


protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Set the default date to 2 months from the current date.
    arrivalDatePicker.Date = DateTimeOffset.Now.AddMonths(2);

    // Set the minimum year to the current year.
    arrivalDatePicker.MinYear = DateTimeOffset.Now;
}

Sie können den Text in jedem ComboBox mit Standardformatvorlagen formatieren. Das folgende Beispiel zeigt, wie das Tagesfeld zum Anzeigen des Monatstags und des abgekürzten Wochentags formatiert wird. Das Jahresfeld wird ausgeblendet, indem die YearVisible-Eigenschaft auf False festgelegt wird.


<DatePicker DayFormat="{}{day.integer} ({dayofweek.abbreviated})" YearVisible="False"/>

In diesem Beispiel wird dieses DatePicker-Steuerelement erstellt:

Datumsauswahl mit ausgeblendetem Jahr

 

Das DatePicker-Steuerelement unterstützt auch vertikale Layouts, indem Sie die Orientation-Eigenschaft des Steuerelements festlegen. Zudem ist das Steuerelement hochgradig anpassbar: Sie können Stile und Vorlagen verwenden, um fast alle Aspekte des DatePicker-Steuerelements und seiner Inhalte individuell anzupassen.

Flyout

[Laden Sie sich gleich jetzt das Beispiel für XAML-Flyout- und -MenuFlyout-Steuerelement herunter.]

In Windows 8.1 wird ein neues Steuerelement für XAML eingeführt, mit dem Sie vorübergehend eine UI anzeigen können, die mit den aktuellen Aktionen des Benutzers zusammenhängt: das Flyout-Steuerelement.

Schaltfläche mit einem Flyout

 

Ein Flyout zeigt eine einfache UI an (ein so genanntes Flyout), die entweder zur Information dient oder eine Benutzerinteraktion erfordert. Im Gegensatz zu einem Dialogfeld kann ein Flyout einfach geschlossen werden, indem der Benutzer auf eine Stelle außerhalb des Flyouts klickt oder tippt. Verwenden Sie Flyouts, um Benutzereingaben zu erfassen, zusätzliche Details zu einem Element anzuzeigen oder den Benutzer um die Bestätigung einer Aktion zu bitten. Flyouts sollten nur in Reaktion auf Tippen oder Klicken des Benutzers angezeigt werden. Sie werden geschlossen, sobald der Benutzer außerhalb des Flyouts tippt.

Üblicherweise wird ein Flyout an eine Schaltfläche angefügt, sodass das Button-Steuerelement eine neue Flyout-Eigenschaft aufweist, damit das Anfügen und Öffnen eines Flyout-Steuerelements vereinfacht wird. Ein an eine Schaltfläche angefügtes Flyout wird automatisch geöffnet, wenn ein Benutzer auf die Schaltfläche klickt.

Sie können auch ein Flyout-Steuerelement an ein beliebiges FrameworkElement-Objekt anfügen, indem Sie die angefügte FlyoutBase.AttachedFlyout-Eigenschaft verwenden. Dabei müssen Sie auf eine Interaktion mit dem FrameworkElement reagieren, z. B. bei der Interaktion Tapped, und das Flyout im Code öffnen.

Erstellen eines Flyouts

In diesem Beispiel wird das Button-Steuerelement mit einem Flyout erstellt, das in der obigen Abbildung gezeigt wurde.


<Button Content="Empty cart">
    <Button.Flyout>
        <Flyout>
            <StackPanel>
                <TextBlock Style="{StaticResource BasicTextStyle}">All items will be removed. Do you want to continue?</TextBlock>
                <Button Click="DeleteConfirmation_Click">Yes, empty my cart</Button>
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>

Das nächste Beispiel zeigt ein Flyout, das an einen TextBlock angefügt ist. Wie bereits dargestellt wurde, können Sie ein Flyout an ein beliebiges FrameworkElement anfügen, indem Sie die angehängte FlyoutBase.AttachedFlyout-Eigenschaft verwenden.


<TextBlock Text="{Binding ElementName=MyTextBox, Path=Text}"
           Tapped="TextBlock_Tapped" FontSize="18">
    <FlyoutBase.AttachedFlyout>
        <Flyout>
            <TextBox x:Name="MyTextBox" Text="You can edit this text by tapping it."/>
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBlock>

Um dieses Flyout zu öffnen, behandeln Sie das Tapped-Ereignis und rufen die FlyoutBase.ShowAttachedFlyout-Methode auf.


private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
{
    FrameworkElement element = sender as FrameworkElement;
    if (element != null)
    {
        FlyoutBase.ShowAttachedFlyout(element);
    }
}

Der Textblock sieht wie folgt aus.

Text mit geschlossenem Flyout

 

Wenn der Benutzer auf den Textblock tippt, wird das Flyout geöffnet, in dem das TextBox-Steuerelement enthalten ist, und der Text kann geändert werden.

Text mit geöffnetem Flyout

 

Sie können ein Flyout als Ressource erstellen und für mehrere Steuerelemente verwenden. Hier ist ein Flyout als Ressource definiert, das von zwei verschiedenen Steuerelementen gemeinsam genutzt wird.


<Page.Resources>
    <Flyout x:Key="SharedFlyout">
        <StackPanel>
            <TextBlock Text="This Flyout is shared."/>                      
        </StackPanel>
    </Flyout>
</Page.Resources>

...

<Button Content="Button" Flyout="{StaticResource SharedFlyout}"/>
<TextBlock Text="TextBlock" FlyoutBase.AttachedFlyout="{StaticResource SharedFlyout}" Tapped="TextBlock_Tapped"/>

Weitere Informationen zum Flyout finden Sie unter Schnellstart: Hinzufügen von Flyouts.

Hub

[Laden Sie sich gleich jetzt das Beispiel für ein XAML-Hub-Steuerelement herunter.]

In Windows 8.1 wird ein neues Steuerelement für XAML eingeführt, mit dem sich das Hubentwurfsmuster, das den Designrichtlinien entspricht und das beabsichtigte Verhalten aufweist, ganz einfach erstellen lässt: das Hub-Steuerelement.

Hubseite

 

Hubseiten sind der Einstiegspunkt des Benutzers in die App. Sie zeigen Inhalte in einer Ansicht mit umfassenden Verschiebungsfunktionen an, die Benutzern einen schnellen Überblick über neue und spannende Infos verschafft und ihnen die Möglichkeit bietet, anschließend tiefer in den Inhalt Ihrer App einzutauchen. Auf der Hubseite werden verschiedene Inhaltskategorien angezeigt, die den einzelnen Abschnittsseiten der App zugeordnet sind. Jeder Abschnitt sollte einen Inhalt oder eine Funktion haben. Der Hub sollte visuell vielfältig sein, die Benutzer fesseln und in die verschiedenen Teile der App ziehen.

Das XAML-Hub-Steuerelement bietet Elemente, die Ihnen die Implementierung des Hubentwurfsmusters für Ihre App erleichtern. Im Gegensatz zu einem GridView- oder ListView-Steuerelement, bei dem Daten aus einer einzelnen Quelle angezeigt werden, können in den einzelnen Hubabschnitten Daten aus verschiedenen Quellen angezeigt werden. Sie können beliebige XAML-Inhalte verwenden, um eine visuell ansprechende Hubseite zu erstellen. Um schnell mit dem Erstellen einer App mit einer Hub-Seite loslegen zu können, verwenden Sie die Vorlage Hub-App in Microsoft Visual Studio 2013.

Fügen Sie dem Hub eine Kopfzeile hinzu, damit die Benutzer den Kontext des Hubs erkennen können. Oft wird dazu der Name der App verwendet. Sie können ein einfaches Header-Textsteuerelement verwenden oder eine HeaderTemplate mit beliebigen XAML-Inhalten definieren. Obwohl beliebige Inhalte in der Kopfzeile verwendet werden können, dürfen Sie nicht vergessen, dass sich die Höhe der Kopfzeile darauf auswirkt, wie viel vertikaler Platz für den Inhalt Ihres Hubabschnitts verfügbar ist. Die Position der Kopfzeile bleibt fest und bewegt sich nicht mit den Hubabschnitten, wenn der Benutzer einen Bildlauf durchführt.

Hubabschnitte

Sie platzieren den Inhalt Ihres Hubs in verschiedenen HubSection-Steuerelementen. Wie der Hub weist jede HubSection eine Header- und eine HeaderTemplate-Eigenschaft auf, die Sie verwenden können, um eine optionale Kopfzeile für den Abschnitt festzulegen. Die Abschnittsüberschrift kann auch interaktiv gestaltet werden. Normalerweise kann der Benutzer auf eine interaktive Kopfzeile tippen, um zur entsprechenden Seite des App-Abschnitts zu navigieren. Wenn die zugehörige IsHeaderInteractive-Eigenschaft true ist, beinhaltet die standardmäßige Kopfzeile eine Chevronglyphe sowie die visuellen Zustände "Hover" und "Gedrückt". Wenn Sie eine benutzerdefinierte HeaderTemplate verwenden, stellen Sie vergleichbare visuelle Hinweise bereit, um zu zeigen, dass die Kopfzeile interaktiv ist.

Inhalte fügen Sie nicht direkt einem Hubabschnitt hinzu. Stattdessen definieren Sie den HubSection-Inhalt in einem DataTemplate-Objekt. Inhalt kann inline definiert oder an eine Datenquelle gebunden werden. Jede gültige XAML kann in einem Hubabschnitt verwendet werden.

Erstellen eines Hubs

Dieses Beispiel zeigt den grundlegenden XAML-Code zum Erstellen eines Hub-Steuerelements.


<Hub Header="News">
    <HubSection MinWidth="600" Header="Latest">
        <DataTemplate>
            <Grid>   
                <TextBlock Text="The most recent news will be here." 
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </Grid>
        </DataTemplate>
    </HubSection>

    <HubSection Header="Tech" IsHeaderInteractive="True"  
                Background="#222222" MinWidth="250">
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="Tech news goes here."
                           Style="{ThemeResource BodyTextBlockStyle}" />
                <TextBlock Text="Click the header to go to the Tech page."
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </StackPanel>
        </DataTemplate>
    </HubSection>

    <HubSection Header="Sports" IsHeaderInteractive="True" 
                Background="#444444" MinWidth="250">
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="Sports news goes here."
                           Style="{ThemeResource BodyTextBlockStyle}" />
                <TextBlock Text="Click the header to go to the Sports page." 
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </StackPanel>
        </DataTemplate>
    </HubSection>
</Hub>

Mit diesem Beispiel wird dieser Hub erstellt.

Einfaches Hub-Steuerelement

 

Hyperlink

In Windows 8.1 wird dem XAML-Textobjektmodell im Windows.UI.Xaml.Documents-Namespace das Hyperlink-Element hinzugefügt.

Mit dem Hyperlink-Element können Sie einem Text einen Link hinzufügen. Der Link wird wie der restliche Text behandelt und ebenfalls umgebrochen. Wenn der Text als Hyperlink markiert ist, wird er in einer bestimmten Farbe angezeigt. Wenn der Benutzer darauf tippt, erfolgt ein Wechsel zum Uniform Resource Identifier (URI), der in der NavigateUri-Eigenschaft festgelegt ist.

Hier sehen Sie einen Textblock mit einem eingebetteten Hyperlink-Element.

Text mit einem Hyperlink-Element

 

Verwenden eines Hyperlink-Elements

Das folgende Beispiel erstellt den oben gezeigten Text. Der Hyperlink wird mit dem Rest des Textes umgebrochen und öffnet das Windows Dev Center, wenn der Benutzer auf ihn klickt.


<RichTextBlock Width="200" Style="{StaticResource BasicRichTextStyle}">
    <Paragraph>Hyperlinks let you give readers a visual hint that certain text links to other content.
        <Hyperlink NavigateUri="http://dev.windows.com">Read more on the Windows Dev Center</Hyperlink>
        ... Text in a Hyperlink element is treated like the rest of the text and participates in line breaking.
    </Paragraph>
</RichTextBlock>

MenuFlyout

[Laden Sie sich gleich jetzt das Beispiel für XAML-Flyout- und -MenuFlyout-Steuerelement herunter.]

In Windows 8.1 wird ein neues Steuerelement für XAML eingeführt, mit dem Sie vorübergehend eine Liste von Befehlen oder Optionen anzeigen können, die mit den aktuellen Aktionen des Benutzers zusammenhängen: das MenuFlyout-Steuerelement.

Schaltfläche mit einem Flyout "Menü"

 

In einem MenuFlyout wird eine einfache UI angezeigt (ein so genanntes Flyout), die einfach geschlossen werden kann, indem der Benutzer auf eine Stelle außerhalb des Flyouts klickt oder tippt. Verwenden Sie es, um dem Benutzer eine Auswahl in einer kontextbezogenen Liste von einfachen Befehlen oder Optionen zu ermöglichen. Menü-Flyouts sollten nur in Reaktion auf Tippen oder Klicken des Benutzers angezeigt werden. Sie werden geschlossen, sobald der Benutzer außerhalb des Flyouts tippt.

Sie definieren den Inhalt des Menüs, indem Sie dem MenuFlyout die Objekte MenuFlyoutItem, ToggleMenuFlyoutItem und MenuFlyoutSeparator hinzufügen. Diese Objekte erfüllen folgende Zwecke:

Menü-Flyouts werden häufig an eine Schaltfläche angefügt, sodass das Button-Steuerelement eine neue Flyout-Eigenschaft aufweist, durch die ein MenuFlyout ganz einfach angefügt und geöffnet werden kann. Ein Menü-Flyout, das an eine Schaltfläche angefügt ist, wird automatisch geöffnet, wenn der Benutzer auf die Schaltfläche klickt.

Sie können auch ein MenuFlyout-Steuerelement an ein beliebiges FrameworkElement-Objekt anfügen, indem Sie die angefügte FlyoutBase.AttachedFlyout-Eigenschaft verwenden. Dabei müssen Sie auf eine Interaktion mit dem FrameworkElement reagieren, z. B. bei der Interaktion Tapped, und das MenuFlyout im Code öffnen.

Erstellen eines MenuFlyout-Steuerelements

In diesem Beispiel wird das Button-Steuerelement mit einem MenuFlyout erstellt, das in der obigen Abbildung gezeigt wurde.


<Button Content="Options">
    <Button.Flyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Reset" Click="Reset_Click"/>
            <MenuFlyoutSeparator/>
            <ToggleMenuFlyoutItem Text="Shuffle" IsChecked="{Binding IsShuffleEnabled, Mode=TwoWay}"/>
            <ToggleMenuFlyoutItem Text="Repeat" IsChecked="{Binding IsRepeatEnabled, Mode=TwoWay}"/>
        </MenuFlyout>
    </Button.Flyout>
</Button>

SettingsFlyout

[Laden Sie sich gleich jetzt das Beispiel für App-Einstellungen herunter.]

In Windows 8.1 wird ein neues Steuerelement für XAML eingeführt, mit dem sich Flyouts für App-Einstellungen, die den Designrichtlinien entsprechen und das beabsichtigte Verhalten aufweisen, ganz einfach erstellen lassen: das SettingsFlyout-Steuerelement.

Das SettingsFlyout-Steuerelement

 

Genau wie ein Page-Steuerelement kann auch ein SettingsFlyout-Steuerelement in XAML als Stammelement eines Dokuments deklariert werden, mit einem x:Class-Attribut, das für die Unterklasse des SettingsFlyout festgelegt ist. Sie können die Breite des Flyouts "Einstellungen" festlegen, als Höhe wird aber immer die volle Bildschirmhöhe verwendet.

Ein SettingsFlyout verfügt über einen Überschriftabschnitt und einen Inhaltsabschnitt. Die Überschrift enthält eine Zurück-Schaltfläche, den Titel und optional ein Symbol. Legen Sie HeaderBackground und HeaderForeground passend zu den Farben Ihrer App fest. Standardmäßig wird als Symbol das kleine Symbol Ihrer App angezeigt. Sie können ein anderes Symbol angeben, indem Sie die IconSource-Eigenschaft festlegen. Die Zurück-Schaltfläche ist immer sichtbar.

Ein- und Ausblenden des SettingsFlyout-Steuerelements

Der Benutzer kann über den Charm "Einstellungen" auf ein Flyout "Einstellungen" zugreifen. Ein SettingsFlyout-Steuerelement können Sie programmgesteuert anzeigen, indem Sie die Show- oder ShowIndependent-Methode aufrufen. Schließen können Sie das Flyout durch Aufrufen der entsprechenden Hide-Methode.

Standardmäßig wird das Flyout "Einstellungen" mit der Zurück-Schaltfläche geschlossen. Wenn ein SettingsFlyout-Steuerelement durch Aufrufen von Show angezeigt wird, wird das Flyout durch Klicken auf die Zurück-Schaltfläche geschlossen und der Einstellungsbereich erneut geöffnet. Wenn ein SettingsFlyout durch Aufrufen von ShowIndependent angezeigt wird, wird das Flyout durch Klicken auf die Zurück-Schaltfläche geschlossen und die App wieder für den Benutzer angezeigt. Wenn Sie z. B. ein SettingsFlyout-Steuerelement von einer Schaltfläche "Einstellungen" in Ihrer App öffnen, rufen Sie in der Regel ShowIndependent auf, sodass direkt wieder die App angezeigt wird, wenn der Benutzer das Flyout schließt.

Es kann jeweils nur ein einziges SettingsFlyout-Steuerelement angezeigt werden. Durch das Aufrufen von Show für ein SettingsFlyout werden alle anderen SettingsFlyout-Steuerelemente, die momentan angezeigt werden, geschlossen.

Die standardmäßige Funktionsweise der Zurück-Schaltfläche können Sie durch die Behandlung des BackClick-Ereignisses außer Kraft setzen. Dieses Ereignis wird jedes Mal ausgelöst, wenn der Benutzer auf die Zurück-Schaltfläche klickt. Um die standardmäßige Funktionsweise außer Kraft zu setzen, erstellen Sie einen Ereignishandler für das Ereignis und setzen die BackClickEventArgs.Handled-Eigenschaft auf true.

Verbinden mit SettingsPane

Das SettingsFlyout-Steuerelement müssen Sie dem SettingsPane-Objekt der App manuell zuordnen. Hierzu behandeln Sie das SettingsPane.CommandsRequested-Ereignis und fügen der ApplicationCommands-Auflistung einen SettingsCommand hinzu. Der SettingsCommand verfügt über eine Beschriftung für Ihr SettingsFlyout, die im Charm "Einstellungen" angezeigt wird. Ferner wird eine Methode festgelegt, die ausgeführt wird, wenn ein Benutzer den Befehl im Charm "Einstellungen" auswählt. Im Rahmen dieser Methode erstellen Sie eine Instanz des SettingsFlyout-Steuerelements und zeigen es an.

Erstellen eines SettingsFlyout-Steuerelements

Bg182878.wedge(de-de,WIN.10).gifSo fügen Sie ein SettingsFlyout-Steuerelement in Visual Studio hinzu

  1. Klicken Sie auf Projekt > Neues Element hinzufügen.

  2. Wählen Sie im Dialogfeld Neues Element hinzufügen im mittleren Bereich die Option Flyout für Einstellungen aus.

  3. Geben Sie einen Namen für die Datei des Flyouts "Einstellungen" ein, und klicken Sie auf Hinzufügen. In diesem Beispiel hat das Flyout "Einstellungen" den Namen UpdateSettingsFlyout.

    Hinweis  Wenn Sie ein Flyout "Einstellungen" hinzufügen, erstellen Sie eine von SettingsFlyout abgeleitete neue Klasse mit dem von Ihnen angegebenen Namen. Verwenden Sie zum Instanziieren des Flyouts "Einstellungen" den von Ihnen angegebenen Namen (z. B. new UpdateSettingsFlyout()).

In diesem Beispiel wird das SettingsFlyout-Steuerelement erstellt, das in der obigen Abbildung gezeigt wurde.


<SettingsFlyout
    x:Class="SettingsFlyoutExample.UpdateSettingsFlyout"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SettingsFlyoutExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    IconSource="Assets/SmallLogo.png"
    Title="App Updates"
    d:DesignWidth="346"
    Width="346" 
    HeaderBackground="#FF2B4A80">
    <SettingsFlyout.Resources>
        <Style x:Key="SettingsFlyoutSectionStyle" TargetType="StackPanel">
            <Setter Property="Margin" Value="0,0,0,39"/>
        </Style>
    </SettingsFlyout.Resources>

    <!-- This stack panel acts as a root panel for vertical layout of the content sections. -->
    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >

        <!-- The stack panels below define individual content sections. -->

        <!-- Content Section 1-->
        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">

            <!-- Section 1 header -->
            <TextBlock Style="{StaticResource TitleTextBlockStyle}"
                                 Text="Automatic updates" />

            <!-- Section 1 body -->
            <TextBlock Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,0,25" TextWrapping="Wrap">
                <TextBlock.Text>
                    Turn automatic updating on or off.
                </TextBlock.Text>
            </TextBlock>
            <ToggleSwitch Header="Download updates automatically" />
            <ToggleSwitch Header="Install updates automatically" />

        </StackPanel>

        <!-- Define more Content Sections below as necessary. -->

    </StackPanel>
</SettingsFlyout>

Dieses Beispiel zeigt, wie Sie das SettingsFlyout zum Einstellungsbereich hinzufügen.


public MainPage()
{
    this.InitializeComponent();

    Windows.UI.ApplicationSettings.SettingsPane.GetForCurrentView().CommandsRequested += MainPage_CommandsRequested;
}

void MainPage_CommandsRequested(Windows.UI.ApplicationSettings.SettingsPane sender, Windows.UI.ApplicationSettings.SettingsPaneCommandsRequestedEventArgs args)
{
    Windows.UI.ApplicationSettings.SettingsCommand updateSetting = 
        new Windows.UI.ApplicationSettings.SettingsCommand("AppUpdateSettings", "App updates", (handler) =>
    {
        UpdateSettingsFlyout updatesFlyout = new UpdateSettingsFlyout();
        updatesFlyout.Show();

    });

    args.Request.ApplicationCommands.Add(updateSetting);
}

Dieses Beispiel zeigt, wie Sie das SettingsFlyout über eine Schaltfläche in Ihrer App öffnen.


<Button Content="App update settings" Click="UpdateSettingsButton_Click"/>


private void UpdateSettingsButton_Click(object sender, RoutedEventArgs e)
{
    UpdateSettingsFlyout updatesFlyout = new UpdateSettingsFlyout();
    updatesFlyout.ShowIndependent();
}

TimePicker

[Laden Sie sich gleich jetzt das Beispiel für ein XAML-DatePicker- und -TimePicker-Steuerelement herunter.]

In Windows 8.1 wird ein neues Steuerelement für XAML eingeführt, mit dem der Benutzer einen Zeitwert in Ihrer App auswählen kann: das TimePicker-Steuerelement.

Das TimePicker-Steuerelement

 

Mit der Uhrzeitauswahl verfügen Sie über eine standardmäßige Methode, mit der die Benutzer eine Uhrzeit per Toucheingabe, Maus oder Tastatur auswählen können. Sie können das Steuerelement TimePicker in seiner standardmäßigen Form mit minimalem XAML- oder anderem Code verwenden, oder Sie können das Steuerelement ganz variabel anpassen. Für das TimePicker-Steuerelement kann das 12- oder 24-Stunden-Format verwendet werden.

Erstellen eines TimePicker-Steuerelements

Dieses Beispiel zeigt, wie Sie ein einfaches TimePicker-Steuerelement mit einer Kopfzeile erstellen.


<TimePicker x:Name=arrivalTimePicker Header="Arrival Time"/>

Dieses Beispiel zeigt, wie Sie ein TimePicker-Steuerelement im 24-Stunden-Format erstellen.


<TimePicker ClockIdentifier="24HourClock" Header="24 hour clock"/>

Das TimePicker-Steuerelement sieht in diesem Beispiel folgendermaßen aus. Die AM/PM-Auswahl wird automatisch ausgeblendet.

TimePicker-Steuerelement mit 24-Stunden-Format

 

Sie können die Uhrzeit im Code festlegen oder an eine Instanz von TimeSpan binden. Hier wird das TimePicker-Steuerelement im Code auf einen Standardwert von 8:00 festgelegt.


protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Set the default time to 8 A.M.
    arrivalTimePicker.Time = new TimeSpan(8, 0, 0);
}

Sie können das Inkrement in der Minutenauswahl auf einen für Ihre App sinnvollen Wert festlegen. Hier ist das Minuteninkrement auf 15 Minuten eingestellt.


<TimePicker x:Name=arrivalTimePicker Header="Arrival Time" MinuteIncrement="15"/>

Das TimePicker-Steuerelement in diesem Beispiel sieht folgendermaßen aus, wenn die Minutenauswahl geöffnet ist.

TimePicker-Steuerelement mit 15-Minuteninkrementen

 

Das TimePicker-Steuerelement unterstützt auch vertikale Layouts, indem Sie die Orientation-Eigenschaft des Steuerelements festlegen. Zudem ist das Steuerelement hochgradig anpassbar: Sie können Stile und Vorlagen verwenden, um fast alle Aspekte des TimePicker-Steuerelements und seiner Inhalte individuell anzupassen.

FlipView-Aktualisierungen

[Laden Sie sich gleich jetzt das Beispiel für ein XAML-FlipView-Steuerelement herunter.]

Das XAML-FlipView-Steuerelement unterstützt drei Navigationsmethoden: per Toucheingabe, per Schaltfläche und programmgesteuert. Wenn der Benutzer per Toucheingabe navigiert, führt die FlipView einen gleichmäßigen Bildlauf durch, um Elemente anzuzeigen. Navigiert der Benutzer jedoch per Maus, per Tastatur oder programmgesteuert, werden die Elemente einfach ohne Animation angezeigt. Dies führt zu einem uneinheitlichen Verhalten in den verschiedenen Navigationsmodi und verringertdie Benutzerfreundlichkeit.

In Windows 8.1 verfügt das FlipView-Steuerelement über die neue UseTouchAnimationsForAllNavigation-Eigenschaft, die ein einheitliches Verhalten für alle Navigationsmodi ermöglicht. Wenn Sie diese Eigenschaft auf true festlegen, wird bei der Navigation per Toucheingabe, per Schaltfläche sowie bei der programmgesteuerten Navigation dieselbe Animation angezeigt.

Überschriften für ComboBox-, DatePicker-, TimePicker-, Slider- und Edit-Steuerelemente

[Laden Sie sich gleich jetzt das Beispiel für wichtige XAML-Steuerelemente herunter.]

Einige Steuerelemente (z. B. ComboBox) werden in der Regel von einer Überschrift begleitet, die den Kontext des Steuerelements beschreibt. Das Hinzufügen einer Beschriftung zu diesen Steuerelementen kann umständlich sein und erfordert die Verwendung zusätzlicher Elemente (z. B. TextBlock- und StackPanel-Objekte), um das korrekte Layout herzustellen.

In Windows 8.1 wurden die Eigenschaften Header und HeaderTemplate mehreren Steuerelementen hinzugefügt, damit diese leichter beschriftet werden können. Die folgenden Steuerelemente verfügen über die neuen Eigenschaften:

Die standardmäßige Header-Eigenschaft erlaubt keine Zugriffstests, keinen Fokus und keine Eingaben per Maus oder Tastatur. Mit einem null- bzw. leeren Zeichenfolgenwert wird eine leere Überschrift erstellt. Eine leere Überschrift belegt keinen Platz und hat keinen Einfluss auf das Layout.

Sie können eine HeaderTemplate verwenden, wenn Sie mehr als eine einfache Textüberschrift benötigen. Mit einer HeaderTemplate kann ein beliebiger gültiger XAML-Code gehostet werden, auch Elemente, die Zugriffstests erlauben. Beispiel: Button.

Das folgende Beispiel zeigt, wie Sie einem ComboBox- und einem PasswordBox-Steuerelement einen Header hinzufügen.


<ComboBox Header="Colors" PlaceholderText="Pick a color">
    <x:String>Blue</x:String>
    <x:String>Green</x:String>
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
</ComboBox>
<PasswordBox Header="Password" PlaceholderText="Enter your password"/>

Mit diesem Beispiel werden folgende Steuerelemente erstellt.

ComboBox-Steuerelement mit Überschrift

 

PasswordBox-Steuerelement mit Überschrift

 

Im nächsten Beispiel enthält eine HeaderTemplate in einem schreibgeschützten RichEditBox-Steuerelement ein Button-Steuerelement. Wenn der Benutzer auf die Schaltfläche klickt, wird das Rich-Edit-Feld editierbar und die Überschrift wird geändert.


<RichEditBox x:Name="richTextBox1" IsReadOnly="True">
    <RichEditBox.HeaderTemplate>
        <DataTemplate>
            <Button Content="Click to edit" Click="Button_Click"/>
        </DataTemplate>
    </RichEditBox.HeaderTemplate>
</RichEditBox>


private void Button_Click(object sender, RoutedEventArgs e)
{
    richTextBox1.IsReadOnly = false;
    richTextBox1.HeaderTemplate = null;
    richTextBox1.Header = "Editable RichEditBox";
}

In diesem Beispiel wird folgendes RichEditBox-Steuerelement erstellt:

RichEditBox-Steuerelement mit Überschriftvorlage

 

Wenn der Benutzer auf die Schaltfläche klickt, wird das Rich-Edit-Feld editierbar und die Überschrift wird wie folgt geändert:

RichEditBox-Steuerelement mit Überschrift

 

PlaceholderText

In Windows 8.1 wird die PlaceholderText-Eigenschaft mehreren Steuerelementen hinzugefügt, die Text enthalten. Einige Steuerelemente (z. B. ComboBox oder PasswordBox) erfordern möglicherweise eine Benutzereingabe. Wenn Sie keinen Standardwert vorgeben oder kein leeres Steuerelement anzeigen möchten, können Sie Platzhaltertext hinzufügen, damit der Benutzer den Kontext erkennen kann.

Die folgenden Steuerelemente verfügen über die neue PlaceholderText-Eigenschaft:

Bei einem ComboBox-Steuerelement wird der Platzhaltertext angezeigt, wenn der Wert von SelectedIndex -1 und der Wert von SelectedItemnull lautet. Diese beiden Eigenschaften werden synchronisiert. Der Benutzer kann den Platzhaltertext nicht anzeigen, nachdem ein Element ausgewählt wurde. Sie können aber programmgesteuert SelectedIndex auf -1 oder SelectedItem auf null festlegen, sodass der Platzhaltertext wieder angezeigt wird.

Bei den Steuerelementen zur Textbearbeitung wird der Platzhaltertext angezeigt, wenn die Steuerelemente leer sind. Der Benutzer kann diesen Zustand des Steuerelements wiederherstellen, indem er den gesamten Text aus den Steuerelementen löscht.

Das folgende Beispiel zeigt, wie Sie einem ComboBox- und PasswordBox-Steuerelement Platzhaltertext hinzufügen.


<ComboBox Header="Colors" PlaceholderText="Pick a color">
    <x:String>Blue</x:String>
    <x:String>Green</x:String>
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
</ComboBox>
<PasswordBox Header="Password" PlaceholderText="Enter your password"/>

Mit diesem Beispiel werden die folgenden Steuerelemente erstellt:

ComboBox-Steuerelement mit Überschrift

 

PasswordBox-Steuerelement mit Überschrift

 

WebView-Aktualisierungen

[Laden Sie sich gleich jetzt das Beispiel für ein XAML-WebView-Steuerelement herunter.]

In Windows 8.1 ist das Hosten von HTML- und webbasierten Inhalten in der App deutlich einfacher. In Windows 8.1 werden durch das WebView-Steuerelement verschiedene Probleme behoben und die folgenden neuen Funktionen hinzugefügt:

In Windows 8.1 sind folgende WebView-API-Elemente nicht mehr verfügbar:

Windows 8-Apps, die unter Windows 8.1 ausgeführt werden, sind von diesen Änderungen nicht betroffen.

Rendern der XAML-Struktur in einer Bitmap

Die Windows-Runtime für Windows 8.1 fügt dem Windows.UI.Xaml.Media.Imaging-Namespace einen neuen Typ hinzu: RenderTargetBitmap.

Dieser Typ stellt zwei wichtige Methoden bereit:

  • RenderTargetBitmap.RenderAsync. Hier wird eine visuelle XAML-Struktur verwendet, von der eine Bitmapdarstellung erstellt wird.

    Hinweis  Durch diesen Vorgang wird die jeweilige XAML-Elementstruktur asynchron in einer Bitmap gerendert. Diese Methode ist nicht mit der Bildschirmaktualisierung synchronisiert und garantiert keine genaue zeitliche Framesteuerung. Die Bitmap kann also möglicherweise einen Sekundenbruchteil vor oder nach dem angenommenen Erfassungszeitpunkt gerendert werden.

  • RenderTargetBitmap.GetPixelsAsync. Diese Methode gibt ein Bytearray von Pixeln in einem bestimmten Format zurück.

Das folgende Beispiel zeigt, wie eine XAML-Elementstruktur gerendert wird.

var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(myElementTree);

myImage.Source = renderTargetBitmap;

RenderTargetBitmap erbt von ImageSource und kann daher direkt als Quelle für ein Image-Objekt festgelegt werden, ohne GetPixelsAsync zum Abrufen und Anzeigen der Bitmapdaten aufzurufen.

Hier sehen Sie, wie die gerenderte Bitmap in eine Datei geschrieben wird.

var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.Render(myElementTree);
var pixels = await renderTargetBitmap.GetPixelsAsync();

var picker = new FileSavePicker();
// Picker setup
var file = await picker.PickSaveFileAsync();
// File validation

using (var stream = await file.OpenAsync(FileAccessMode.ReadWrite))
{
    var encoder = await 
        BitmapEncoder.CreateAsync(BitmapEncoder.BmpEncoderId, stream);
    
    encoder.SetPixelData(BitmapPixelFormat.Rgba8, 100, 0, 96, 96,         
        await renderTargetBitmap.GetPixelsAsync());
        
    await encoder.FlushAsync();
}

Andere Steuerelementaktualisierungen

  • Verbesserungen des XAML-ScrollViewer-Steuerelements:

    In Windows 8.1 werden ScrollViewer-Eigenschaften (TopHeader, LeftHeader und TopLeftHeader) hinzugefügt, mit denen Sie "eingefrorene" Bereiche festlegen können, die mit der Bereichsfixierung in Microsoft Excel vergleichbar sind. Diese Bereiche enthalten Inhalte, für die entweder kein Bildlauf oder gemeinsam mit dem Hauptinhalt nur ein Bildlauf in eine Richtung durchgeführt wird. Für die obere linke Überschrift kann kein Bildlauf, für die linke Überschrift ein vertikaler, aber kein horizontaler Bildlauf und für die obere Überschrift ein horizontaler, aber kein vertikaler Bildlauf durchgeführt werden.

  • Verbesserungen bei der XAML-Datenbindung:

    Windows 8.1 adds the following API elements:

    • Mit dem FrameworkElement.DataContextChanged-Ereignis können Sie auf geänderte Werte der DataContext-Eigenschaft reagieren. Sie können dieses Ereignis verwenden, um Steuerelementeigenschaften manuell zu aktualisieren, anstatt eine Datenbindung einzusetzen. Dies ist bei Leistungsproblemen im Zusammenhang mit der Datenbindung hilfreich.

    • Mit den Eigenschaften Binding.FallbackValue und Binding.TargetNullValue können Sie standardmäßige Anzeigewerte für den Fall festlegen, dass ein Wert nicht von einer Bindung aufgelöst werden kann oder dass die Auflösung in einen null-Wert erfolgt.

    • Mit der Binding.UpdateSourceTrigger-Eigenschaft, der FrameworkElement.GetBindingExpression-Methode und der BindingExpression-Klasse können Sie das standardmäßige Verhalten von bidirektionalen Bindungen an die TextBox.Text-Eigenschaft festlegen. Standardmäßig aktualisieren TextBox.Text-Bindungen ihre Bindungsquelle nur, wenn das Steuerelement den Fokus verliert. Setzen Sie UpdateSourceTrigger auf PropertyChanged, um die Quelle jedes Mal zu aktualisieren, wenn der Wert der TextBox.Text-Eigenschaft geändert wird. Setzen Sie UpdateSourceTrigger auf Explicit, um die Quelle programmgesteuert mit der BindingExpression.UpdateSource-Methode zu aktualisieren.

  • Verbesserungen der XAML-Navigation:

    In Windows 8.1 sind die folgenden API-Elemente verfügbar:

    • Neue Frame-Eigenschaften BackStack, ForwardStack, BackStackProperty und ForwardStackProperty. Verwenden Sie diese Eigenschaften, um die Rückwärts- und Vorwärtsnavigationsstapel programmgesteuert durch Hinzufügen oder Entfernen von PageStackEntry-Objekten zu ändern. Dies eignet sich für Szenarien wie das Entfernen einer Anmeldeseite aus dem Navigationsverlauf, nachdem sich der Benutzer angemeldet hat, oder das Löschen des Navigationsstapels, wenn die App mit einem anderen Aktivierungsvertrag neu gestartet wird.

    • Eine Frame.Navigate-Überladung, die einen NavigationTransitionInfo-Parameterwert annimmt. Mithilfe dieser Überladung können Sie für die Navigation zu einer Seite anstelle eines in der XAML der Seite definierten Übergangs einen bestimmten animierten Übergang verwenden. Sie können auch über die Klassen NavigationEventArgs und NavigatingCancelEventArgs auf den Parameterwert in Navigationsereignishandlern zugreifen.

    • Eine NavigatingCancelEventArgs.Parameter-Eigenschaft. Verwenden Sie diese Eigenschaft, wenn Sie eine Navigation basierend auf den Navigationsparameterwerten abbrechen müssen.

  • Dynamische Designs:

    In Windows 8 wird das helle und das dunkle Design für einen starken Kontrast geladen, wenn die App gestartet wird. Wurde das Design jedoch während der Ausführung der App vom Benutzer geändert, konnte das XAML-Designsystem diese Änderung nicht erkennen und die Designs wurden nicht in der App geändert. In Windows 8.1 kann das XAML-Designsystem Designänderungen zur Laufzeit erkennen und Ressourcen erneut laden. Bei den freigegebenen Standardressourcen für XAML-Steuerelemente geschieht dies in Windows 8.1 automatisch. Um dieses Verhalten in einer benutzerdefinierten Vorlage zu aktivieren, die Sie selbst festlegen, erstellen Sie mithilfe der neuen ThemeResource-Markuperweiterung einen Verweis auf die designspezifische Ressource. Alle Ressourcen, die Sie für einzelne Designs unterschiedlich definieren, sind dann in mehreren Ressourcenverzeichnissen definiert (eins pro Design). Diese Ressourcenwörterbücher werden mit den allgemeinen für XAML definierten Ressourcen einer App zusammengeführt. Das richtige Wörterbuch wird dynamisch geladen, wenn das System eine Designänderung erkennt. Dies gilt auch, wenn die App dabei gerade ausgeführt wird.

  • Anwenden von Designs pro Steuerelement

    In Windows 8 wird das Design mit der Application.RequestedTheme-Eigenschaft festgelegt und auf die gesamte UI der App angewendet. Application.RequestedTheme kann zur Laufzeit nicht geändert werden. In Windows 8.1 können Sie festlegen, dass für bestimmte UI-Elemente ein Design verwendet wird, das von der Einstellung von Application.RequestedTheme abweicht. Hierzu legen Sie RequestedTheme als Attribut der Elemente fest, für die Sie ein anderes Design verwenden möchten. Dieses RequestedTheme ist eine Eigenschaft der FrameworkElement-Klasse und damit praktisch in jedem UI-Element vorhanden. Der pro Element geltende RequestedTheme-Wert kann zur Laufzeit festgelegt werden.

  • GetOpenPopups:

    Von Ihnen erstellte Popup-XAML-Steuerelemente werden nicht in der visuellen Struktur angezeigt. Wenn Sie Popups aus Gründen der Navigation, eines angehaltenen Zustands oder aus anderen Gründen schließen möchten, aber keinen Verweis gespeichert haben, kann es schwierig werden, die Popup-Elemente mit Windows 8-Code zu finden und zu schließen. In Windows 8.1 wird die VisualTreeHelper.GetOpenPopups-API eingeführt, sodass Sie über ein Hilfsprogramm verfügen, das alle geöffneten Popups als Liste zurückgibt. Sie können IsOpen dann für alle Popups, die Sie schließen möchten, auf false festlegen.

  • Barrierefreiheit und Benutzeroberflächenautomatisierung:

    In Windows 8.1 werden Peers für bestimmte Steuerelemente hinzugefügt, die in Windows 8 vorhanden waren, aber von der FrameworkElementAutomationPeer-Klasse unterstützt wurden. Beispielsweise verfügt das AppBar-Steuerelement über einen speziellen Peer. Falls Sie benutzerdefinierte Peers für Klassen erstellen, können Sie diese Peers als Basis verwenden und die vorhandenen API-Musterimplementierungen wiederverwenden, wenn Sie Ihren eigenen Microsoft-Benutzeroberflächenautomatisierungs-Peer implementieren. Außerdem wird verwalteter Code für die Muster unterstützt, die dem allgemeinen Benutzeroberflächenautomatisierungs-Framework für Windows 8 hinzugefügt wurden. Es gibt z. B. eine IStylesProvider-Schnittstelle, mit der Sie das Styles-Muster für einen XAML-Steuerelementpeer implementieren können. Ferner ist eine angefügte AccessibilityView-Eigenschaft auf App-Ebene verfügbar. Mit dieser Eigenschaft können Sie festlegen, wie ein UI-Element in den verschiedenen, für einen Benutzeroberflächenautomatisierungs-Client sichtbaren Strukturdarstellungen der Benutzeroberflächenautomatisierung angezeigt wird (z. B., ob das Element in der Inhaltsstruktur oder der Steuerelementstruktur erscheint).

  • MaxLines-Eigenschaft:

    (Betrifft die Steuerelemente TextBlock, RichTextBlock und RichTextBlockOverflow)

    Mit dieser Eigenschaft können Sie die maximale Anzahl der Textzeilen festlegen, die in einem Textblock angezeigt werden. Das Textsteuerelement passt seine Höhe an, sodass unabhängig von Schriftgrad, Schriftschnitt oder Textlänge nur die festgelegte Anzahl von Zeilen angezeigt wird.

  • PreventKeyboardDisplayOnProgrammaticFocus-Eigenschaft:

    (Betrifft die Steuerelemente TextBox, RichEditBox und PasswordBox)

    Legen Sie diese Eigenschaft auf true fest, um zu verhindern, dass die Bildschirmtastatur angezeigt wird, wenn der Fokus programmgesteuert auf ein Textfeld gesetzt wird. Standardmäßig wird die Bildschirmtastatur immer angezeigt, wenn der Fokus auf ein bearbeitbares Textfeld verschoben wird und die letzte Eingabe per Toucheingabe generiert wurde. Dies passiert unabhängig davon, ob der Fokus programmgesteuert oder durch eine Benutzerinteraktion festgelegt wird. In manchen Fällen ist es sinnvoll, die Tastatur nicht anzuzeigen, wenn der Fokus programmgesteuert festgelegt wird. Sie können z. B. verhindern, dass die Tastatur einen Teil Ihrer UI verdeckt, bis der Benutzer bereit ist, seine Interaktion fortzusetzen.

  • SelectionHighlightColor-Eigenschaft:

    (Betrifft die Steuerelemente TextBlock, TextBox, RichEditBox, RichTextBlock und PasswordBox)

    Sie können einen SolidColorBrush angeben, um die Hervorhebungsfarbe eines Textsteuerelements entsprechend Ihrem App-Branding zu ändern.

  • Paste-Ereignis:

    (Betrifft die Steuerelemente TextBox, RichEditBox und PasswordBox)

    Sie können eine benutzerdefinierte Behandlung des Paste-Ereignisses für Steuerelemente für editierbaren Text Ihrer App ermöglichen.

  • TextWrapping.WrapWithOverflow-Wert:

    Verwenden Sie diesen Wert, wenn kein Textumbruch in der Mitte eines Worts erfolgen soll. Das letzte Wort im Textblock wird nicht umgebrochen, sondern läuft über.

    Bei diesem Wert erfolgt der Zeilenumbruch, wenn die Zeile die verfügbare Blockbreite überläuft. Eine Zeile kann die Blockbreite jedoch überlaufen, wenn der Zeilenumbruchalgorithmus keine Möglichkeit zum Umbrechen der Zeile ermitteln kann. Dies ist z. B. der Fall bei sehr langen Wörtern in einem Container mit fester Breite, in dem kein Bildlauf zulässig ist.

  • TextTrimming.Clip-Wert:

    Bei diesem Wert wird der Text auf einer Pixelebene gekürzt, indem die überschüssigen Glyphen visuell entfernt werden.

  • TextTrimming.CharacterEllipsis-Wert:

    Bei diesem Wert wird der Text nicht an einer Wortgrenze, sondern an einer Zeichengrenze gekürzt. Anstelle des restlichen Textes werden Auslassungspunkte (...) angezeigt.

 

 

Anzeigen:
© 2014 Microsoft