Windows Phone 8.1 控制項

標籤：des   style   blog   class   c   code   

如果你已經開始了 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. BottomBar

之前的 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>

介面：

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();}

介面：