WP8.1 Study4：WP8.1中控件集合应用

1、AutoSuggestBox的应用

在xaml里代码可如下：

<AutoSuggestBox Name="autobox"
                            Header="suggestions" 

                            GotFocus="autobox_GotFocus"
                            TextChanged="autobox_TextChanged">
                <AutoSuggestBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding}"/>
                    </DataTemplate>
                </AutoSuggestBox.ItemTemplate>
            </AutoSuggestBox>

在C#代码添加类似代码，注意要用 Gotfocus事件和TextChaged事件（用来筛选）

 ObservableCollection<string> items = new ObservableCollection<string>() { "w1", "w2", "w3", "msmdms","我的","你要" };
        private void autobox_GotFocus(object sender, RoutedEventArgs e)
        {
            autobox.ItemsSource=items;//数据源items
        }

        private void autobox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
        {
            string change = sender.Text;
            autobox.ItemsSource = items.Where(s =>s.Contains(change));//筛选s, 如同数据库操作
        }

2、MessageDialog, ContentDialog的应用

（1）WP8.1中的messagebox变成了MessageDiaglog,用法是用C#代码调用，简单的调用程序如下：

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

（2）ContentDialog 则可以设置为部分或者全屏，或者直接在项目里新建一个 ContentDialog，其C#代码如下：

 private async void Button_Click_2(object sender, RoutedEventArgs e)
        {

            ContentDialog dialog=new ContentDialog(){
                Title="这是一个项目",
                Content="密匙",
                PrimaryButtonText="um1",
                SecondaryButtonText="um2"
            };
            dialog.FullSizeDesired = true;//设置全屏
            ContentDialogResult result=await dialog.ShowAsync();
            if (result == ContentDialogResult.Primary)
            {
                show.Content = "nonshow";
            }
            else if (result==ContentDialogResult.Secondary)
            {
                show.Content = "showagain";
            }
        }

3、Flyout应用

下面用Button 嵌入一个flyout，下面xaml代码如下：

<Button Name="show" Content="show">
                <Button.Flyout>
                    <Flyout>
                        <StackPanel>
                            <TextBlock Text="我的项目"/>
                            <Button Content="你好" Click="Button_Click_2"/>
                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>

还可以内嵌menuflyout，xaml代码如下：

 <Button Name="show" Content="show">
                <Button.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Text="123"/>
                        <MenuFlyoutItem Text="456" Click="showBt_Click"/>
                    </MenuFlyout>
                </Button.Flyout>
            </Button>

还可以用ListPickerFlyout 内嵌

 <Button Name="show" Content="show">
                <Button.Flyout>
                    <ListPickerFlyout ItemsSource="{Binding items}">
                        <ListPickerFlyout.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding}"/>
                            </DataTemplate>
                        </ListPickerFlyout.ItemTemplate>
                    </ListPickerFlyout>
                </Button.Flyout>
            </Button>

4、BottumAppBar

就是ApplicationBar ，xaml代码如下:

<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

可以在设计页面隐藏起来，也可以用C#来设计它。

 private async void statusBt_Click(object sender, RoutedEventArgs e)
        {

            Windows.UI.ViewManagement.StatusBar statusbar = Windows.UI.ViewManagement.StatusBar.GetForCurrentView();
            await statusbar.HideAsync();//隐藏

        }

使用它的progress inditator， C#代码如下：

 private async void statusBt_Click(object sender, RoutedEventArgs e)
        {

            Windows.UI.ViewManagement.StatusBar statusbar = Windows.UI.ViewManagement.StatusBar.GetForCurrentView();
           // await statusbar.HideAsync();
            statusbar.BackgroundColor = Colors.White;
            statusbar.ForegroundColor = Colors.Blue;
            var progress = statusbar.ProgressIndicator;//获取状态栏的指示器
            progress.Text = "连接中";
            await progress.ShowAsync();

        }

6、ListBox及Listview

ListView继承于ListBox，详细的可以查阅相关文档。下面用例子介绍ListView。

在Page.xaml代码中

<ListView Name="view1" ScrollViewer.VerticalScrollBarVisibility="Auto"
                          ScrollViewer.IsScrollInertiaEnabled="True"
                          Height=""
                          SelectionChanged="view1_SelectionChanged">
                    <ListView.ItemTemplate>
                        <DataTemplate>

                            <StackPanel Orientation="Horizontal">
                                <TextBlock Style="{ThemeResource ListViewItemContentTextBlockStyle}" Text="{Binding Path=Id}" Width="" TextAlignment="Left"/>
                                <TextBlock Style="{ThemeResource ListViewItemContentTextBlockStyle}" Text="{Binding Path=Name}" Width="" TextAlignment="Left"/>
                            </StackPanel>

                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

在Page.xaml.cs中SelectionChanged（）事件和Datading 部分代码如下：

 private async void view1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            string str = "";
            foreach (var item in e.AddedItems)
            {
                str = (item as School).Id + (item as School).Name;
            }
            MessageDialog diolog = new MessageDialog(str);
            await diolog.ShowAsync();
        }
...
        ObservableCollection<School> school = new ObservableCollection<School>()
        {
            new School{Id=,Name="华农"},
            new School{Id=,Name="华工"},
            new School{Id=,Name="华农"},
        };
 view1.ItemsSource = school;

public class School
    {
        private string name;
        private int id;

        public string Name
        {
            get { return name; }
            set { name = value; }
        }
        public int Id
        {
            get { return id; }
            set { id = value; }
        }
    }

7. Magic Number：10

在 8.0 时代，Magic Number 为 12，也就是间距最好都设为 12 的倍数，或者 6。

但到了 8.1，微软将 12 改成了 10。

以上内容大部分是参考http://www.cnblogs.com/xiaoshi3003/p/3739510.html 的。

----------------------------------------------------------------------------------------------------------------------------

总结

1、容器Panel Controls：

　　Canvas, StackPanel, Grid…

2、文本控件Text Handling Controls：

　　TextBlock、RichTextBlock、TextBox、PasswordBox、AutoSuggestBox...

3、按钮Buttun控件：

　　ToggleButton、CheckBox、RadioButton、AppBarButton、AppBarToggleButton...

4、进度显示控件：

　　ProgressRing、ProgressBar

5、一些好用的控件：

　　DatePicker / TimePicker、Flyout（包括MenuFlyout、List Picker Flyouts、Date/TimePicker Flyouts、Generic Picker Flyouts）、ContentDialog

6、系统的UI：

　　CommandBar、StatusBar、Soft Buttons（一些没有用）

注：RequestedTheme是可以设置空间及页面的主题的属性。