与众不同 windows phone (52) - 8.1 新增控件: AutoSuggestBox, ListView, GridView, SemanticZoom

[源码下载]

与众不同 windows phone (52) - 8.1 新增控件: AutoSuggestBox, ListView, GridView, SemanticZoom

作者：webabcd

介绍
与众不同 windows phone 8.1 之 新增控件

• AutoSuggestBox - 自动建议文本框
• ListView, GridView, SemanticZoom - 同 Windows Store Apps 中的控件

示例
1、演示 AutoSuggestBox 的应用
AutoSuggestBoxDemo.xaml

<Page
    x:Class="Demo.Control.AutoSuggestBoxDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo.Control"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel Orientation="Vertical">

            <AutoSuggestBox Name="autoSuggestBox">
                <AutoSuggestBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding ImageUrl}" Width="20" Height="20" />
                            <TextBlock Text="{Binding Title}" FontSize="20" />
                        </StackPanel>
                    </DataTemplate>
                </AutoSuggestBox.ItemTemplate>
            </AutoSuggestBox>

            <TextBlock Name="lblMsg" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>
</Page>

AutoSuggestBoxDemo.xaml.cs

/*
 * AutoSuggestBox - 自动建议文本框（wp only）
 *     AutoMaximizeSuggestionArea - 建议框（即下拉部分）的区域是否最大化
 *     MaxSuggestionListHeight - 建议框（即下拉部分）的最大高度
 *     Header - AutoSuggestBox 的标头对象
 *     PlaceholderText - 占位文本
 *     Text - 文本框内显示的文本
 *     TextBoxStyle - 文本框的样式
 *     IsSuggestionListOpen -  建议框（即下拉部分）是否是打开状态
 *     TextMemberPath - 建议框中的对象映射到文本框中时的字段名（如果建议框中显示的只是字符串，就不用设置这个了）
 *     UpdateTextOnSelect - 单击建议框中的项时，是否将其中的 TextMemberPath 指定的值赋值给文本框
 *
 *     SuggestionChosen - 在建议框（即下拉部分）中选择了某一项后触发的事件
 *     TextChanged - 文本框中的输入文本发生变化时触发的事件
 */

using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;

namespace Demo.Control
{
    public sealed partial class AutoSuggestBoxDemo : Page
    {
        private ObservableCollection<SuggestionModel> _suggestions = new ObservableCollection<SuggestionModel>();

        public AutoSuggestBoxDemo()
        {
            this.InitializeComponent();

            autoSuggestBox.Header = "AutoSuggestBox";
            autoSuggestBox.PlaceholderText = "AutoSuggestBox";

            // 数据源有 Title 字段和 ImageUrl 字段，当用户在建议框中选中某一个对象时，会将 Title 字段指定的值赋值给文本框
            autoSuggestBox.TextMemberPath = "Title";
            // 用户选中建议框中的对象时，是否将 TextMemberPath 指定的值赋值给文本框
            autoSuggestBox.UpdateTextOnSelect = true;

            // 将 AutoSuggestBox 的数据源设置为一个对象集合
            autoSuggestBox.ItemsSource = _suggestions;

            autoSuggestBox.TextChanged += autoSuggestBox_TextChanged;
            autoSuggestBox.SuggestionChosen += autoSuggestBox_SuggestionChosen;
        }

        void autoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
        {
            if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
            {
                _suggestions.Clear();

                // 根据用户的输入，修改 AutoSuggestBox 的数据源
                for (int i = ; i < ; i++)
                {
                    _suggestions.Add(new SuggestionModel()
                    {
                        Title = (sender.Text + "_" + i.ToString()),
                        ImageUrl = "/Assets/Kid.png"
                    });
                }
            }
        }

        void autoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
        {
            lblMsg.Text = "选中的是：" + ((SuggestionModel)args.SelectedItem).Title;
        }

        class SuggestionModel
        {
            public string Title { get; set; }
            public string ImageUrl { get; set; }
        }
    }
}

2、ListView, GridView, SemanticZoom 的用法同 Windows Store Apps 中的控件，本例演示如何通过他们替代原 LongListSelector 控件（在 wp8.1 中已经没有 LongListSelector 了）
MainPage.xaml

<Page
    x:Class="Demo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>
        <!--索引视图的背景色，Enabled代表有效索引，Disabled代表无效索引（比如此group内无item）-->
        <JumpListItemBackgroundConverter x:Key="BackgroundConverter" Enabled="Blue" Disabled="Red"/>
        <!--索引视图的前景色，Enabled代表有效索引，Disabled代表无效索引（比如此group内无item-->
        <JumpListItemForegroundConverter x:Key="ForegroundConverter" Enabled="White" Disabled="Gray"/>

        <!--索引视图的 ItemTemplate-->
        <DataTemplate x:Key="IndexTemplate">
            <Border Padding="5">
                <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="400" Height="58" HorizontalAlignment="Left">
                    <!--绑定 Group.Title，即此对应的 group 的 Title 字段-->
                    <TextBlock Text="{Binding Group.Title}" Foreground="{Binding Converter={StaticResource ForegroundConverter}}"
                               FontSize="24" Padding="6" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                </Border>
            </Border>
        </DataTemplate>

        <!--详细视图的 ItemTemplate-->
        <DataTemplate x:Key="ItemTemplate">
            <StackPanel VerticalAlignment="Top">
                <Grid Tag="{Binding Url}" Tapped="Grid_Tapped">
                    <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="Wrap" />
                </Grid>
            </StackPanel>
        </DataTemplate>

        <!--详细视图的 HeaderTemplate-->
        <DataTemplate x:Key="HeaderTemplate">
            <Border Background="Transparent" Padding="5">
                <!--
                    类似 PhoneAccentBrush 这类的本地资源，其定义在 generic.xaml
                -->
                <Border Background="{StaticResource PhoneAccentBrush}" BorderBrush="{StaticResource PhoneAccentBrush}"
                        BorderThickness="2" Height="58" Margin="0,0,18,0" HorizontalAlignment="Left">
                    <TextBlock Text="{Binding Title}" Foreground="{StaticResource PhoneForegroundBrush}"
                               FontSize="24" Padding="6" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                </Border>
            </Border>
        </DataTemplate>
    </Page.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0" Margin="24,16,0,24">
            <TextBlock Text="与众不同 windows phone 8.1 系列" Style="{ThemeResource TitleTextBlockStyle}" />
        </StackPanel>

        <Grid Grid.Row="1">
            <SemanticZoom>
                <!--详细视图-->
                <SemanticZoom.ZoomedInView>
                    <ListView Name="listView" ItemTemplate="{StaticResource ItemTemplate}">
                        <ListView.GroupStyle>
                            <!--如果此group下无item，是否隐藏此group的header-->
                            <GroupStyle HidesIfEmpty="True" HeaderTemplate="{StaticResource HeaderTemplate}"/>
                        </ListView.GroupStyle>
                    </ListView>
                </SemanticZoom.ZoomedInView>
                <!--索引视图-->
                <SemanticZoom.ZoomedOutView>
                    <GridView Name="gridView" ItemTemplate="{StaticResource IndexTemplate}" Background="Black">
                    </GridView>
                </SemanticZoom.ZoomedOutView>
            </SemanticZoom>
        </Grid>
    </Grid>
</Page>

MainPage.xaml.cs

/*
 * 本系列教程的索引页，同时演示了用 ListView 和 SemanticZoom 取代 LongListSelector
 */

using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Navigation;

namespace Demo
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            this.NavigationCacheMode = NavigationCacheMode.Required;

            this.Loaded += MainPage_Loaded;
        }

        void MainPage_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            XElement root = XElement.Load("SiteMap.xml");
            var items = LoadData(root);

            // 构造数据源
            CollectionViewSource groupData = new CollectionViewSource();
            groupData.IsSourceGrouped = true;
            groupData.Source = items;
            groupData.ItemsPath = new PropertyPath("Items");

            listView.ItemsSource = groupData.View; // item，即详细视图
            gridView.ItemsSource = groupData.View.CollectionGroups; // group，即索引视图
        }

        // 获取数据
        private List<GroupModel> LoadData(XElement root)
        {
            if (root == null)
                return null;

            var items = from n in root.Elements("node")
                        select new GroupModel
                        {
                            Title = (string)n.Attribute("title"),
                            Url = (string)n.Attribute("url"),
                            Items = LoadData(n)
                        };

            return items.ToList();
        }

        // 导航至目标页
        private void Grid_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
        {
            var className = (string)(sender as FrameworkElement).Tag;
            var frame = Window.Current.Content as Frame;
            frame.Navigate(Type.GetType(className));
        }
    }

    public class GroupModel
    {
        public string Title { get; set; }
        public string Url { get; set; }
        public List<GroupModel> Items { get; set; }
    }
}

OK
[源码下载]