数据绑定:是一种 XAML 和后台数据交互的方式(桥梁)
通过后台进行数据绑定
     <Grid>
<TextBox
x:Name="txtHello"
Text="{Binding}"
Header="{Binding Path=Value}"/>
<Button
x:Name="btnHello"
Content="按钮"
Click="btnHello_Click"/>
</Grid>
     public class MainPageData
{
public string Value { get; set; }
}

MainPageData

         public MainPageData Data { get; set; }
private void btnHello_Click(object sender, RoutedEventArgs e)
{
Data = new MainPageData();
Data.Value = DateTime.Now.ToString();
//当前页面对象,数据上下文可以被“继承”
this.DataContext = Data;
}

通过前台进行数据绑定

 <Page
x:Class="Myapp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Myapp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" DataContext="{Binding Data,RelativeSource={RelativeSource Self}}" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<TextBox Text="{Binding Text1}"/>
<TextBox Text="{Binding Text2}"/>
</StackPanel>
</Page>
     public class DataBindingPageData
{
public string Text1 { get; set; }
public string Text2 { get; set; }
}

DataBindingPageData

     public sealed partial class MainPage : Page
{
//当前页面数据源
public DataBindingPageData Data { get; set; }
public MainPage()
{
//该操作必须在页面初始化之前
Data = new DataBindingPageData();
Data.Text1 = "Hello";
Data.Text2 = "World";
//界面元素初始化操作
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
}
数据绑定的概念
 <Page
x:Class="Myapp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Myapp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" DataContext="{Binding Data,RelativeSource={RelativeSource Self}}" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<TextBox Text="{Binding Text1.Value}"/>
<TextBox Text="{Binding Text2}"/> <TextBox x:Name="tb1"/>
</StackPanel>
</Page>
 namespace MyApp
{ /// <summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// </summary>
public sealed partial class MainPage : Page
{
//当前页面数据源
public DataBindingPageData Data { get; set; }
public MainPage()
{
//该操作必须在页面初始化之前
Data = new DataBindingPageData();
Data.Text1 = new SubData { Value = "Hello" };
Data.Text2 = "World";
//界面元素初始化操作
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
}
/// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。
/// 此参数通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
#region 数据绑定四个组成部分(目标.依赖属性{绑定}数据源.数据源属性)
//绑定桥梁(两头分别是谁)
Binding binding = new Binding();
//指定数据源和数据源属性
binding.Source = Data;
binding.Path = new PropertyPath("Text2");
//指定绑定的目标依赖属性
tb1.SetBinding(TextBox.TextProperty, binding);
#endregion
}
}
public class DataBindingPageData
{
public SubData Text1 { get; set; }
public string Text2 { get; set; }
}
public class SubData
{
public string Value { get; set; }
}
}
数据上下文(DataContext)
     <Page.Resources>
<SolidColorBrush x:Key="color" Color="AliceBlue"/>
<!--资源中定义数据源对象-->
<local:ResourceBindingPageData
x:Key="myData"
Value="Hello World"/>
</Page.Resources>
<Grid DataContext="{StaticResource myData}">
<TextBox Text="{Binding Value}"/>
</Grid>
     public class ResourceBindingPageData
{
public string Value { get; set; }
}
元素值绑定

数据绑定的数据源不仅仅可以是一个自定义对象,还可以使用 UI 元素对象

就是将一个界面元素对象作为绑定的数据源,轻松实现两个控件之间的交互

基本语法:

Width="{Binding ElementName=sliderDiameter, Path=Value}"

ElementName 就是指定数据源控件的 Name 属性

     <StackPanel>
<Slider
x:Name="slider"
Minimum="50"
Maximum="300"/>
<Ellipse
x:Name="ellipse"
Width="{Binding ElementName=slider,Path=Value}"
Height="{Binding ElementName=slider,Path=Value}"
Fill="HotPink"/>
</StackPanel>
绑定数值类型转换

当数据源和目标属性类型或格式不相同时,比如URL链接,可以自定义两者之间的转换方式

具体就是实现 IValueConverter 接口

     <Page.Resources>
<local:BookIdToBookUrlConverter x:Key="BookIdToBookUrlConverter"/>
</Page.Resources>
<Grid>
<TextBox Text="{Binding BookId,Converter={StaticResource BookIdToBookUrlConverter}}"/>
</Grid>
 namespace MyApp
{
/// <summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// </summary>
public sealed partial class MainPage : Page
{
public ValueConverterPegaData Data { get; set; }
public MainPage()
{
Data = new ValueConverterPegaData { BookId = };
//Data.BookUrl = string.Format("http://www.itcast.cn/book/{0}", Data.BookId);
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
this.DataContext = Data;
} /// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。
/// 此参数通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
// TODO: 准备此处显示的页面。 // TODO: 如果您的应用程序包含多个页面,请确保
// 通过注册以下事件来处理硬件“后退”按钮:
// Windows.Phone.UI.Input.HardwareButtons.BackPressed 事件。
// 如果使用由某些模板提供的 NavigationHelper,
// 则系统会为您处理该事件。
}
}
public class ValueConverterPegaData
{
public int BookId { get; set; }
public string BookUrl { get; set; }
}
public class BookIdToBookUrlConverter : IValueConverter
{
//从原数据转换成目标数据
public object Convert(object value, Type targetType, object parameter, string language)
{
return string.Format("http://www.itcast.cn/book/{0}", value);
}
//从目标数据转换成原数据
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return null;
}
}
}

IValueConverter接口实现数值类型转换

     <StackPanel>
<StackPanel.Resources>
<local:ValueToColorConverter x:Key="ValueToColorConverter"/>
</StackPanel.Resources>
<Slider
x:Name="slider"
Minimum="0"
Maximum="255"/>
<Ellipse
x:Name="ellipse"
Width="{Binding ElementName=slider,Path=Value}"
Height="{Binding ElementName=slider,Path=Value}"
Fill="{Binding ElementName=slider,Path=Value,Converter={StaticResource ValueToColorConverter}}"/>
</StackPanel>
     public class ValueToColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
var d = (double)value;
var b = (byte)d;
return new SolidColorBrush(Color.FromArgb(, b, b, b));
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return null;
}
}
绑定模式

OneTime:一次绑定,即数据上下文初始化时更新目标属性

OneWay:单向绑定,仅当数据源属性发生变更时更新目标属性

TwoWay:双向绑定,当目标属性发生变更通知数据源变更(同步)

     <Grid x:Name="LayoutRoot">

         <Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions> <!-- 标题面板 -->
<StackPanel Grid.Row="0" Margin="19,0,0,0">
<TextBlock Text="MY APPLICATION" Style="{ThemeResource TitleTextBlockStyle}" Margin="0,12,0,0"/>
<TextBlock
Text="绑定模式"
Margin="0,-6.5,0,26.5"
Style="{ThemeResource HeaderTextBlockStyle}"
CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}"/>
</StackPanel> <!--TODO: 应将内容放入以下网格-->
<Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions> <Slider
x:Name="slider"
Grid.Row="0"
Value="10"/> <!--默认形式是OneWay-->
<TextBox
Grid.Row="1"
Header="Default"
Text="{Binding ElementName=slider, Path=Value}"/> <!--OneTime是在进行数据绑定时同步一次-->
<TextBox
Grid.Row="2"
Header="One Time"
Text="{Binding ElementName=slider, Path=Value, Mode=OneTime}"/> <!--OneWay会实时同步数据源变化,但是不会将自身变化同步到数据源-->
<TextBox
Grid.Row="3"
Header="One Way"
Text="{Binding ElementName=slider, Path=Value, Mode=OneWay}"/> <!--OneWay会实时同步数据源变化,会将自身变化同步到数据源-->
<TextBox
Grid.Row="4"
Header="Two Way"
Text="{Binding ElementName=slider, Path=Value, Mode=TwoWay}"/> </Grid>
</Grid>

数据变更通知(一)

使用自定义数据源进行数据绑定时,不管绑定模式是哪一种,都不会造成目标对象实时同步

如果想要实现数据变更实时同步,就必须要让自定义数据类型实现 INotifyPropertyChanged 接口

INotifyPropertyChanged 具有 PropertyChanged 的事件,在数据源被绑定时注册,数据源变更时被触发(需要自己写代码手动触发)

数据变更通知(二)

TwoWay 绑定会在目标和源中的任一个发生更改时同时更新目标和源

此行为的一个例外是,在每次用户击键之后,不会将 TextBox.Text 的更改发送给绑定源

除非将 Binding.UpdateSourceTrigger 设置为 PropertyChanged

默认情况下,仅当 TextBox 失去焦点时才发送更改

INotifyPropertyChanged 封装

     <StackPanel>
<TextBlock/>
<TextBox/>
<Slider/>
</StackPanel>
     public class NotifyPropertyChangedPageViewModel : ViewModelBase
{
public string Text1 { get; set; }
private string text2;
public string Text2
{
get { return text2; }
set
{
SetProperty(ref text2, value);
}
}
public double number;
public double Number
{
get { return number; }
set
{
SetProperty(ref number, value);
}
}
private string hello;
public string Hello
{
get { return hello; }
set
{
SetProperty(ref hello, value);
}
}
}
public abstract class ViewModelBase : NotifyPropertyChanged
{
protected void SetProperty<TProperty>(ref TProperty current, TProperty value, [CallerMemberName]string propertyName = null)
{
if (object.Equals(current, value))
{
//属性值没有发生变化,减轻应用程序负担
return;
}
current = value;
OnPropertyChanged(propertyName);
}
}
public abstract class NotifyPropertyChanged : INotifyPropertyChanged
{
/// <summary>
/// 当属性发生变化时调用
/// </summary>
/// <param name="propertyName"></param>
protected void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null && !string.IsNullOrEmpty(propertyName))
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
集合数据绑定(列表控件元素)

列表控件主要是 ListBox、ListView、GridView 等

为列表控件绑定数据不再是为 DataContext 属性赋值,应该使用列表控件自有的 ItemsSource 属性

当列表数据元素由 ItemsSource 绑定,就不能再动态操作(增删改) Items 属性

ObservableCollection<T>

绑定集合元素和普通绑定一样,界面显示默认不会跟随数据源变化而变化

如果要实现一个动态绑定的列表,通常我们需要用到 ObservableCollection<T> 类型作为数据源集合的类型

     <Grid>
<ListView
x:Name="list"
ItemsSource="{Binding DateTimes}"/>
<Button
Content="加载更多"
Click="Button_Click"/>
</Grid>
     public sealed partial class MainPage : Page
{
public MainPageViewModel ViewModel { get; set; }
public MainPage()
{
ViewModel = new MainPageViewModel();
ViewModel.DateTimes = new ObservableCollection<string>();
for (int i = ; i < ; i++)
{
ViewModel.DateTimes.Add(string.Format("{0}\t{1}", i, DateTime.Now));
}
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
}
/// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。
/// 此参数通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{ }
private void Button_Click(object sender, RoutedEventArgs e)
{
//for (int i = 0; i < 20; i++)
//{
// //使用数据绑定过后不可以再使用这种形式添加数据
// list.Items.Add(DateTime.Now);
//}
var max = ViewModel.DateTimes.Count + ;
for (int i = ViewModel.DateTimes.Count - ; i < max; i++)
{
ViewModel.DateTimes.Add(string.Format("{0}\t{1}", i, DateTime.Now));
}
}
}
public class MainPageViewModel
{
//ObservableCollection可以做到数据与界面列表控件实时同步
public ObservableCollection<string> DateTimes { get; set; }
}
数据展示模版

列表控件中每一个列表项都是又一个默认展示结构的

我们可以通过设置每一个列表控件的 ItemTemplate 属性达到自定义模版的效果

数据展示模版使用

直接为特定 List 控件设置特殊的 DataTemplate

将 DataTemplate 定义到资源当中

     <Grid>
<!--<ListView
x:Name="list"
ItemsSource="{Binding DateTimes}"/>
<Button
Content="加载更多"
Click="Button_Click"/>-->
<ListView
x:Name="list"
ItemsSource="{Binding Person}">
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="HotPink" BorderThickness="0,0,0,1">
<StackPanel>
<TextBlock FontSize="20">
<Run Text="Id is"/>
<Run Text="{Binding Id}"/>
</TextBlock>
<TextBlock FontSize="32" Text="{Binding Name}"/>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
     public sealed partial class MainPage : Page
{
public MainPageViewModel ViewModel { get; set; }
public MainPage()
{
ViewModel = new MainPageViewModel();
ViewModel.DateTimes = new ObservableCollection<string>();
for (int i = ; i < ; i++)
{
ViewModel.DateTimes.Add(string.Format("{0}\t{1}", i, DateTime.Now));
}
ViewModel.Person = new ObservableCollection<Person>
{
new Person{Id=,Name="Hello"},
new Person{Id=,Name="World"},
new Person{Id=,Name="Hello World"}
};
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
}
/// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。
/// 此参数通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{ }
private void Button_Click(object sender, RoutedEventArgs e)
{
//for (int i = 0; i < 20; i++)
//{
// //使用数据绑定过后不可以再使用这种形式添加数据
// list.Items.Add(DateTime.Now);
//}
var max = ViewModel.DateTimes.Count + ;
for (int i = ViewModel.DateTimes.Count - ; i < max; i++)
{
ViewModel.DateTimes.Add(string.Format("{0}\t{1}", i, DateTime.Now));
}
}
}
public class MainPageViewModel
{
//ObservableCollection可以做到数据与界面列表控件实时同步
public ObservableCollection<string> DateTimes { get; set; }
public ObservableCollection<Person> Person { get; set; }
}
public class Person
{
public int Id { get; set; }
public string Name { get; set; }
public override string ToString()
{
return string.Format("id:{0};name:{1}", Id, Name);
}
}

Windows Phone 十、数据绑定的更多相关文章

  1. Windows Phone 十二、设计器同步

    在设计阶段为页面添加数据源 Blend或者VS的可视化设计器会跑我们的代码,然后来显示出来,当我们Build之后,设计器会进入页面的构造函数,调用InitializeComponent();方法来将U ...

  2. windows快捷键十八式(win10)

    胖友,如果你的电脑是windows系统,下面这十八招windows快捷键都不会,还敢说你会用windows? 说到windows的快捷键,当然不是只有ctrl+c,ctrl+v这么简单,今天我整理了一 ...

  3. Windows phone开发数据绑定系列(1)--了解数据绑定

    (部分内容参考MSDN文档) 数据绑定是在应用程序UI与业务逻辑之间建立连接的过程.通过数据绑定的方式实现了后台数据和前台UI元素的关联, 为用户提供了更好地交互体验. 数据绑定一般有以下几种体现方式 ...

  4. Windows Phone 十九、罗盘

    磁力计概述 拥有磁力计硬件支持的设备可以根据磁力计来确定相对于北极的角度 磁力计的访问 API 定义在 Compass 类中 调用方式和加速计类似 <Grid Background=" ...

  5. Windows Phone 十八、加速计

    加速度传感器 手机的加速度传感器工作时是通过 x.y.z 三个轴的偏移来计算的 在代码基本的 API 主要集中在 Accelerometer 类型中 主要是使用该类型的对象捕获 ReadingChan ...

  6. Windows Phone 十六、HttpClient

    HttpClient 对象也可以实现网络请求 相对于 HttpWebRequest 对象来说,HttpClient 操作更简单,功能更强大 HttpClient 提供一系列比较简单的API来实现基本的 ...

  7. Windows Phone 十五、HttpWebRequest

    Windows 运行时中支持网络资源访问的对象:HttpWebRequest 对象 发送 GET/POST 请求,HttpHelper 封装,超时控制. HttpClient 对象 发送 GET/PO ...

  8. Windows Phone 十四、磁贴通知

    磁贴(Tile) Windows Phone 磁贴种类: 小尺寸 SmallLogo:71x71: Square71x71 中等 Logo:150x150: Square150x150 宽 WideL ...

  9. Win32 Windows编程 十二

    一.对话框 1.对话框的分类 2.对话框的基本使用方式 3.对话框资源 4.有模式对话框的使用 5. 无模式对话框的使用 5.1 加入对话框资源 5.2 定义窗体处理函数 BOOL CALLBACK ...

随机推荐

  1. win下sass安装失败的一种可能

    首先声明,本篇转自CSDN的LZGS_4. 今天我也遇到这个问题,就把文章擅自转载了,方便自己也方便更多的人吧. 因为sass和compass依赖于ruby环境,所以装之前先确认装了ruby.可到官网 ...

  2. 【Linux】unzip命令,记一次遇到的问题

    最近在做BOSS系统云平台部署脚本,联调时发现Shell脚本中存在问题,下方记录 某个地方提示是否覆盖 [root@haiwai test]# unzip /home/redis/test/main- ...

  3. oracle 取小数位数

    select ltrim('124532.62879'-floor('124532.62879'),'0.') from dual;select length(66695) from dual; 这两 ...

  4. 爬虫, 获取登录者的外网IP

    笔者学习了一下用爬虫, 获取登录者的外网IP. 首先导入Jsoup的jar包 public class RetrivePage { private static String url="ht ...

  5. scrollview 嵌套 折叠效果

    ------------------------------- --@ CreateDate: 2015.08.05 --@ Author:     王成成 --@ FileName:   BaoSh ...

  6. Android——Toast.makeText()

    1.Toast 作用 它是android中一种简单的消息提示框,它没有焦点(即不能被点击),会根据设置的时间自动消失. 2.介绍下Toast的参数 Toast t = Toast.makeText(M ...

  7. canvas绘制二次贝塞尔曲线----演示二次贝塞尔四个参数的作用

    canvas中绘制二次贝塞尔曲线的方法为ctx.quadraticCurveTo(x1,y1,x2,y2); 四个参数分别为两个控制点的坐标.开始点即当前canvas中目前的点,如果想从指定的点开始, ...

  8. 掌握Thinkphp3.2.0----自动完成

    自动完成,是在create数据的时候自动执行的一个或多个动作 自动完成也分为动态和静态两种 格式: //完成规则array( array(完成字段1,完成规则,[完成条件,附加规则]), array( ...

  9. Ionic + AngularJS

    Ionic Framework Ionic framework is the youngest in our top 5 stack, as the alpha was released in lat ...

  10. Nodejs:fs模块 & rimraf模块

      模块fs:可以通过他管理文件系统,文件的写入,删除等操作 模块rimraf: 递归删除文件的node插件,在项目的文件编译之前,可以清除dist文件夹里的内容   API样例: var fs = ...