Windows Phone 8.1 控件

若是你已經開始了 Windows Phone 8.1 的學習，就會發現許多在 8.0 下的控件在 8.1 中都發生了變化，如下就談談幾個 8.1 下的新控件以及與 8.0 控件的改變。

 

1. TextBox, AutoSuggestBox

TextBox 終於有了 Header 屬性，不再用爲 TextBox 寫一堆 TextBlock 了。

<TextBox Header="TextBoxWithHeader"/>

當某些控件沒有 Header 屬性的時候，能夠將 TextBlock 的 Style 綁定爲 ControlHeaderTextBlockStyle，這樣就能夠與 TextBox 的 Header 樣式相同了。

<TextBlock Text="TextBoxWithoutHeader" Style="{StaticResource ControlHeaderTextBlockStyle}"/>
<RadioButton Content="RadioButton"/>

界面爲這樣：

 

AutoSuggestBox 的使用則只需綁定 ItemsSource。

XAML：

<AutoSuggestBox x:Name="autoBox" 
                Header="AutoSuggestBox"
                GotFocus="autoBox_GotFocus"
                TextChanged="autoBox_TextChanged">
    <AutoSuggestBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}"/>
        </DataTemplate>
    </AutoSuggestBox.ItemTemplate>
</AutoSuggestBox>

C#：

List<string> suggestions = new List<string>(){ "S1", "S2", "S3", "U1", "U2", "U3" };

private void autoBox_GotFocus(object sender, RoutedEventArgs e)
{
     autoBox.ItemsSource = suggestions;
}

private void autoBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
     string filter = sender.Text.ToUpper();
     autoBox.ItemsSource = suggestions.Where(s => s.ToUpper().Contains(filter));
}

界面爲這樣：

2. MessageDialog, ContentDialog

剛學 8.1 遇到的第一個問題就是 MessageBox 不見了，其實它只是換成了 MessageDialog。

private async void messageDialogButton_Click(object sender, RoutedEventArgs e)
{
    MessageDialog messageDialog = new MessageDialog("MessageBox --> MessageDialog", "MessageDialog");
    await messageDialog.ShowAsync();
}

界面：

ContentDialog 則能夠設置爲部分或者全屏，或者直接在項目裏新建一個 ContentDialog。

private async void partialDialogButton_Click(object sender, RoutedEventArgs e)
{
    ContentDialog contentDialog = new ContentDialog();
    contentDialog.FullSizeDesired = false;
    contentDialog.Title = "Partial ContentDialog";
    contentDialog.Content = "Partial";
    await contentDialog.ShowAsync();
}

private async void fullDialogButton_Click(object sender, RoutedEventArgs e)
{
    ContentDialog contentDialog = new ContentDialog();
    contentDialog.FullSizeDesired = true;
    contentDialog.Title = "Full ContentDialog";
    contentDialog.Content = "Full";
    await contentDialog.ShowAsync();
}

private async void customDialogButton_Click(object sender, RoutedEventArgs e)
{
    CustomDialog customDialog = new CustomDialog();
    await customDialog.ShowAsync();
}

界面：

Dialog 的顯示都爲異步方法。

3. Button

Button.Flyout.Flyout

<Button Content="Button.Flyout.Flyout"
        HorizontalAlignment="Center">
    <Button.Flyout>
        <Flyout>
            <StackPanel HorizontalAlignment="Center">
                <TextBlock Text="Button.Flyout"
                           FontSize="40"/>
                <Button Content="OK"
                        HorizontalAlignment="Center"/>
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>

界面：

Button.Flyout.MenuFlyout

<Button Content="Button.Flyout.MenuFlyout"
        HorizontalAlignment="Center">
    <Button.Flyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="MenuFlyoutItem"/>
            <ToggleMenuFlyoutItem Text="ToggleMenuFlyoutItem"/>
        </MenuFlyout>
    </Button.Flyout>
</Button>

界面：

4. BottomAppBar

以前的 ApplicationBar 更換成了 BottomAppBar。

<Page.BottomAppBar>
    <CommandBar>
        <CommandBar.PrimaryCommands>
            <AppBarButton Icon="Accept" Label="Accept"/>
            <AppBarButton Icon="Cancel" Label="Cancel"/>
        </CommandBar.PrimaryCommands>
        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Help" Label="Help"/>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

界面：

還有就是 AppBarButton 一樣支持 Flyout。

5. StatusBar

以前的 SystemTray 更改成 StatusBar，而且只能經過 C# 代碼控制，不能用 XAML 控制。

private async void Button_Click(object sender, RoutedEventArgs e)
{
    Windows.UI.ViewManagement.StatusBar statusBar = Windows.UI.ViewManagement.StatusBar.GetForCurrentView();
    await statusBar.HideAsync();
}

界面：

6. Magic Number：10

在 8.0 時代，Magic Number 爲 12，也就是間距最好都設爲 12 的倍數，或者 6。

但到了 8.1，微軟將 12 改爲了 10。