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

2024-03-28 17:01:22

介绍
与众不同 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
[源码下载]

码农公寓

相关文章