Windows Phone 8.1 Controls

If you've already started your Windows Phone 8.1 study, you'll find that many of the controls under 8.0 have changed in 8.1, with a few 8.1 new controls and 8.0 controls.

1. TextBox, Autosuggestbox

TextBox finally has the Header property, no longer need to write a bunch of TextBlock for the textbox.

<Header= "Textboxwithheader"/>

When some controls do not have a header property, you can bind the TextBlock style to Controlheadertextblockstyle, which is the same as the header style of the TextBox.

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

Interface for this:

The use of Autosuggestbox simply binds the 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));
}

Interface for this:

2. Messagedialog, Contentdialog

Just learned 8.1 met the first problem is the MessageBox disappeared, in fact, it is only replaced by Messagedialog.

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

Interface:

Contentdialog can be set to partial or full screen, or create a new contentdialog directly in the project.

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

Interface:

The display of Dialog is an asynchronous method.

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>

Interface:

Button.Flyout.MenuFlyout

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

Interface:

4. Bottombar

The previous applicationbar was replaced by 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>

Interface:

5. StatusBar

The previous systemtray is changed to StatusBar and can only be controlled by C # code and cannot be controlled with XAML.

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

Interface: