WindowsPhone 8&8.1 高仿《每日一文》之光有界面没数据怎么行？

本文将接着上文来解决界面数据绑定的的实现。

先来根据自己的理解来谈谈wp数据绑定的认识，当然这只是我现在的浅薄认识。。

一、前端（即XAML）内部的绑定。

通常用于自定义样式、模板等。使用静态的调用，写在Resources里面，程序中的例子。

自定义Panorama的Header样式：

@第一步：在Resources中定义样式

    <!--自定义Panorama的Header样式-->
    <phone:PhoneApplicationPage.Resources>
        <Style x:Key="HeadText" TargetType="TextBlock">
            <Setter Property="FontSize" Value="55"/>
            <Setter Property="Foreground" Value="#FFBDBDBD"/>
        </Style>
    </phone:PhoneApplicationPage.Resources>

@第二步：使用对应的Key调用：

            <!--Panorama 项目二-->
            <phone:PanoramaItem Header="书架" >
                <!--自定义PanoramaItem的Header-->
                <phone:PanoramaItem.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding}" Style="{StaticResource HeadText}"/>
                    </DataTemplate>
                </phone:PanoramaItem.HeaderTemplate>

这样 Panorama的Header样式就是我们自定义的文字大小和颜色了。细心的小伙伴一定也看到了Text=“{Binding}”，这个是PanoramaItem的内部数据，直接使用Binding，标题就会使用前面的Header，如果重新设定，就会覆盖之前的，这符合所有语言的覆盖原则。

二、前端数据与后端数据的绑定。

通常有两种方式，

***一种是最简单的直接使用控件的名字加属性值，如xaml中有

<TextBlock x:Name= “test”>

可以直接在*.cs源文件中使用

this.test.Text = "内吼啊！"来给界面设定Text属性。

***另一种是使用广泛的，使用{Binding name}来设置。

下面通过“其他”页面的数据作为例子。

@第一步：xaml中使用x:Name和{Binding}绑定对应关系

           <!--Panorama 项目四-->
            <phone:PanoramaItem Header="其他">
                <phone:PanoramaItem.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding}" Style="{StaticResource HeadText}"/>
                    </DataTemplate>
                </phone:PanoramaItem.HeaderTemplate>
                <phone:LongListSelector x:Name="Other_list"  Margin="0,-38,0,0" ItemsSource="{Binding Items}" >
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <local:tilttable Margin="5">
                                <Grid toolkit:TiltEffect.IsTiltEnabled="True">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="8"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Rectangle x:Name="Other_rectangle" Fill="{Binding color}"/>
                                    <StackPanel Grid.Column="1" Margin="5,0,0,0">
                                        <TextBlock x:Name="Other_option" Text="{Binding option}" FontSize="40" Foreground="#FFBDBDBD" />
                                        <TextBlock x:Name="Other_content" Text="{Binding content}"  FontSize="20" Foreground="#FFBDBDBD" TextWrapping="Wrap"/>
                                    </StackPanel>
                                </Grid>
                            </local:tilttable>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </phone:PanoramaItem>

就是其中的这几句代码：

<phone:LongListSelector x:Name="Other_list"ItemsSource="{Binding Items}" >

<Rectangle x:Name="Other_rectangle" Fill="{Binding color}"/>
<TextBlock x:Name="Other_option" Text="{Binding option}" />
<TextBlock x:Name="Other_content" Text="{Binding content}"/>

@第二步：后端新建一个类

    class OtherItem
    {
        public String option { get; set; }
        public String content { get; set; }
        public String color { get; set; }
    }

@第三步：设定数据

        public void Set_Other()
        {
            var item1 = new OtherItem { option = "收藏和缓存", content = "查看你收藏和缓存的文章和音乐", color = "Orange" };
            var item2 = new OtherItem { option = "设置", content = "设置阅读字体大小、默认邮件分享地址、清理缓存、管理下载等", color = "Gray" };
            var item3 = new OtherItem { option = "关于", content = "关于每日一文", color = "Purple" };
            var item4 = new OtherItem { option = "意见反馈", content = "点此发送邮件给我或加QQ群：1468779979", color = "Green" };
            var item5 = new OtherItem { option = "求好评", content = "求五星评价o(^_^)o", color = "Blue" };
            var item6 = new OtherItem { option = "去除广告", content = "少吃一个煎饼果子，永久去除广告", color = "Red" };

            var items = new[] { item1, item2, item3, item4, item5, item6 };

            this.Other_list.ItemsSource = items;
        }

在初始化的时候调用Set_Other()就可以了。

后面的各个页面都将使用Set_XX()来绑定数据。

至于这些代码放的位置都好说，只要能包含进来，建议复杂的类新建文件，这样结构清晰，步骤明了，程序的可读性强。我这里为了说明就直接写在主函数了，不要学我T.T。。。

.cs文件的所有代码：

using System;
using System.Net;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;

namespace PanoramaApp3
{
    public class tilttable : Grid
    {
    }

    class OtherItem
    {
        public String option { get; set; }
        public String content { get; set; }
        public String color { get; set; }
    }
    public partial class MainPage : PhoneApplicationPage
    {       
        // 构造函数
        public MainPage()
        {
            InitializeComponent();
            // 把TiltEffect效果的使用权给tilttable
            TiltEffect.TiltableItems.Add(typeof(tilttable));

            Set_Other();

            // 将 listbox 控件的数据上下文设置为示例数据
            DataContext = App.ViewModel;
        }

        // 设置”其他“页的数据
        public void Set_Other()
        {
            var item1 = new OtherItem { option = "收藏和缓存", content = "查看你收藏和缓存的文章和音乐", color = "Orange" };
            var item2 = new OtherItem { option = "设置", content = "设置阅读字体大小、默认邮件分享地址、清理缓存、管理下载等", color = "Gray" };
            var item3 = new OtherItem { option = "关于", content = "关于每日一文", color = "Purple" };
            var item4 = new OtherItem { option = "意见反馈", content = "点此发送邮件给我或加QQ群：1468779979", color = "Green" };
            var item5 = new OtherItem { option = "求好评", content = "求五星评价o(^_^)o", color = "Blue" };
            var item6 = new OtherItem { option = "去除广告", content = "少吃一个煎饼果子，永久去除广告", color = "Red" };

            var items = new[] { item1, item2, item3, item4, item5, item6 };

            this.Other_list.ItemsSource = items;
        }
        
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            if (!App.ViewModel.IsDataLoaded)
            {
                App.ViewModel.LoadData();
            }
        }

        private void imagetap(object sender, System.Windows.Input.GestureEventArgs e)
        {
        	// 在此处添加事件处理程序实现。
        }   
    }
}