站长百科 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换 正文

重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换

2022-12-24,,,,

[源码下载]

重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换

作者：webabcd

介绍
重新想象 Windows 8 Store Apps 之 绑定

与 Element 绑定
与 Model 绑定
与 Indexer 绑定
对 Style 中的 Setter 进行绑定（绑定静态资源）
Binding 的一个扩展标记 RelativeSource 的应用
绑定中的数据转换

示例
1、演示如何与 Element 绑定，以及 OneTime, OneWay, TwoWay 的区别
Binding/BindingElement.xaml

<Page

    x:Class="XamlDemo.Binding.BindingElement"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:XamlDemo.Binding"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="120 0 0 0">

            <!--

                本例用于演示如何与 Element 绑定，以及 OneTime, OneWay, TwoWay 的区别

            -->

            <!--

                OneTime 方式绑定元素

            -->

            <Slider Name="sliderOneTime" Minimum="1" Maximum="100" Value="10" Width="180" HorizontalAlignment="Left" />

            <TextBox Text="{Binding ElementName=sliderOneTime, Path=Value, Mode=OneTime}" Width="150" HorizontalAlignment="Left" />

            <!--

                OneWay 方式绑定元素（OneWay 是默认方式）

            -->

            <Slider Name="sliderOneWay" Minimum="1" Maximum="100" Value="10" Width="180" HorizontalAlignment="Left" Margin="0 50 0 0" />

            <TextBox Text="{Binding ElementName=sliderOneWay, Path=Value, Mode=OneWay}" Width="150" HorizontalAlignment="Left" />

            <!--

                TwoWay 方式绑定元素

            -->

            <Slider Name="sliderTwoWay" Minimum="1" Maximum="100" Value="10" Width="180" HorizontalAlignment="Left" Margin="0 50 0 0" />

            <TextBox Text="{Binding ElementName=sliderTwoWay, Path=Value, Mode=TwoWay}" Width="150" HorizontalAlignment="Left" />

        </StackPanel>

    </Grid>

</Page>

2、演示如何与 Model 进行双向绑定
Binding/BindingModel.xaml

<Page

    x:Class="XamlDemo.Binding.BindingModel"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:XamlDemo.Binding"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="120 0 0 0" Name="root">

            <TextBlock Name="lblMsg" FontSize="14.667" />

            <TextBox FontSize="14.667" Text="{Binding Path=Name, Mode=TwoWay}" Margin="0 10 10 0" />

            <TextBox FontSize="14.667" Text="{Binding Age, Mode=TwoWay}" Margin="0 10 10 0" />

            <ToggleSwitch OffContent="女" OnContent="男" Header="性别" Margin="0 10 10 0">

                <ToggleSwitch.IsOn>

                    <Binding Path="IsMale" Mode="TwoWay" />

                </ToggleSwitch.IsOn>

            </ToggleSwitch>

        </StackPanel>

    </Grid>

</Page>

Binding/BindingModel.xaml.cs

/*

 * 演示如何与 Model 进行双向绑定

 */

using System;

using System.ComponentModel;

using Windows.System.Threading;

using Windows.UI.Core;

using Windows.UI.Xaml.Controls;

using XamlDemo.Model;

namespace XamlDemo.Binding

{

    public sealed partial class BindingModel : Page

    {

        private Employee _employee;

        public BindingModel()

        {

            this.InitializeComponent();

            this.Loaded += BindingModel_Loaded;

        }

        void BindingModel_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)

        {

            // 创建一个需要绑定的实体对象（注：Employee 实现了 INotifyPropertyChanged 接口，想要 OneWay 或者 TwoWay 的话必须要实现 INotifyPropertyChanged 接口）

            _employee = new Employee();

            _employee.Name = "webabcd";

            _employee.Age = ;

            _employee.IsMale = true;

            // 每 5 秒更新一次数据

            ThreadPoolTimer.CreatePeriodicTimer(

                (timer) =>

                {

                    var ignored = Dispatcher.RunAsync(CoreDispatcherPriority.High,

                        () =>

                        {

                            Random random = new Random();

                            _employee.Age = random.Next(, );

                            _employee.IsMale = random.Next() %  ==  ? true : false;

                        });

                },

                TimeSpan.FromMilliseconds());

            // Employee 对象的属性的值发生变化时触发的事件

            _employee.PropertyChanged += _employee_PropertyChanged;

            root.DataContext = _employee;

        }

        // 每次属性的值发生变化时，显示变化后的结果

        void _employee_PropertyChanged(object sender, PropertyChangedEventArgs e)

        {

            lblMsg.Text = "属性：“" + e.PropertyName + "”的值发生了变化";

            lblMsg.Text += Environment.NewLine;

            lblMsg.Text += string.Format("当前的值为：Name-{0}, Age-{1}, IsMale-{2}", _employee.Name, _employee.Age, _employee.IsMale);

        }

    }

}

3、演示如何与索引器进行绑定
Binding/BindingIndexer.xaml

<Page

    x:Class="XamlDemo.Binding.BindingIndexer"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:XamlDemo.Binding"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="120 0 0 0">

            <!--演示如何绑定集合中的某个元素-->

            <TextBlock Name="textBlock" FontSize="14.667" Text="{Binding Path=[3] }" />

            <!--示如何绑定集合中的某个对象的某个属性-->

            <TextBlock Name="textBlock2" FontSize="14.667" Text="{Binding Path=[5].Name }" Margin="0 10 0 0" />

            <!--演示如何绑定 string 类型的索引器-->

            <TextBlock Name="textBlock3" FontSize="14.667" Text="{Binding Path=[webabcd] }" Margin="0 10 0 0" />

            <!--演示如何绑定字典表中指定 key 的数据-->

            <TextBlock Name="textBlock4" FontSize="14.667" Text="{Binding Path=[hello] }" Margin="0 10 0 0" />

        </StackPanel>

    </Grid>

</Page>

Binding/BindingIndexer.xaml.cs

/*

 * 演示如何与索引器进行绑定

 */

using System.Collections.Generic;

using Windows.UI.Xaml.Controls;

using XamlDemo.Model;

namespace XamlDemo.Binding

{

    public sealed partial class BindingIndexer : Page

    {

        public BindingIndexer()

        {

            this.InitializeComponent();

            this.Loaded += BindingIndexer_Loaded;

        }

        void BindingIndexer_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)

        {

            // 用于演示如何绑定集合中的某个元素

            List<string> list = new List<string>();

            for (int i = ; i < ; i++)

            {

                list.Add("索引：" + i.ToString());

            }

            textBlock.DataContext = list;

            // 用于演示如何绑定集合中的某个对象的某个属性

            textBlock2.DataContext = TestData.GetEmployees();

            // 用于演示如何绑定 string 类型的索引器

            textBlock3.DataContext = this;

            // 用于演示如何绑定字典表中指定 key 的数据

            Dictionary<string, string> dic = new Dictionary<string, string>();

            dic["hello"] = "hello webabcd";

            textBlock4.DataContext = dic;

        }

        // 自定义一个索引器

        public object this[string indexer]

        {

            get

            {

                return indexer;

            }

        }

    }

}

4、演示 Style 中的 Setter 如何做数据绑定（绑定静态资源）
Binding/BindingStyleSetter.xaml

<Page

    x:Class="XamlDemo.Binding.BindingStyleSetter"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:XamlDemo.Binding"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="120 0 0 0">

            <!--

                演示 Style 中的 Setter 如何做数据绑定

            -->

            <StackPanel.Resources>

                <!--设置一些资源-->

                <x:Double x:Key="TextFontSize">24.667</x:Double>

                <SolidColorBrush x:Key="TextForeground" Color="#00FF00" />

                <!--为 Style 的 Setter 的 Value 做数据绑定-->

                <Style x:Key="MyStyle" TargetType="TextBox">

                    <Setter Property="FontSize" Value="{Binding Source={StaticResource TextFontSize}}"/>

                    <Setter Property="Foreground" Value="{Binding Source={StaticResource TextForeground}}"/>

                </Style>

            </StackPanel.Resources>

            <!--应用样式-->

            <TextBox Text="我是TextBox" Style="{StaticResource MyStyle}" />

        </StackPanel>

    </Grid>

</Page>

5、演示 Binding 中的一个扩展标记 RelativeSource 的应用
Binding/BindingRelativeSource.xaml

<Page

    x:Class="XamlDemo.Binding.BindingRelativeSource"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:XamlDemo.Binding"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="120 0 0 0">

            <!--

                演示 Binding 中的一个扩展标记 RelativeSource 的应用，其用于指定关联数据源为 Self 或 TemplatedParent

                另外简要说明 TemplateBinding 的应用

            -->

            <StackPanel.Resources>

                <Style x:Key="MyStyle" TargetType="Button">

                    <Setter Property="Template">

                        <Setter.Value>

                            <ControlTemplate TargetType="Button">

                                <StackPanel>

                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" />

                                    <!--

                                        TemplateBinding 是一个简单版的 Binding，用于在模板中绑定控件的某个属性

                                        如果设计模板时需要用到双向绑定，则 TemplateBinding 就无能为力了（TemplateBinding 是 OneWay 的）

                                        只能通过 Binding 来做双向绑定，然后通过 RelativeSource={RelativeSource TemplatedParent} 指定数据源来自引用了该 ControlTemplate 的 Control

                                    -->

                                    <Slider Minimum="1" Maximum="100" Width="{TemplateBinding Width}" Value="{Binding Content, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />

                                </StackPanel>

                            </ControlTemplate>

                        </Setter.Value>

                    </Setter>

                </Style>

            </StackPanel.Resources>

            <Button Width="300" Content="10" Style="{StaticResource MyStyle}" />

            <!--

                RelativeSource={RelativeSource Self} - 指定数据源为自己本身

            -->

            <TextBlock Text="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" Tag="webabcd" FontSize="14.667" Margin="0 10 0 0" />

        </StackPanel>

    </Grid>

</Page>

6、演示如何在绑定中做数据转换
Binding/IntegerLetterConverter.cs

/*

 * 继承 IValueConverter 以实现一个“整数-字母”转换器

 */

using System;

using Windows.UI.Xaml.Data;

namespace XamlDemo.Binding

{

    public sealed class IntegerLetterConverter : IValueConverter

    {

        /// <summary>

        /// 正向转换器。将值从数据源传给绑定目标时，数据绑定引擎会调用此方法

        /// </summary>

        /// <param name="value">转换之前的值</param>

        /// <param name="targetType">转换之后的类型</param>

        /// <param name="parameter">转换器所使用的参数（它是通过 Binding 的 ConverterParameter 传递过来的）</param>

        /// <param name="language">转换器所使用的区域信息（它是通过 Binding 的 ConverterLanguage 传递过来的）</param>

        /// <returns>转换后的值</returns>

        public object Convert(object value, Type targetType, object parameter, string language)

        {

            if ((double)value == )

                return "a";

            else if ((double)value == )

                return "b";

            else if ((double)value == )

                return "c";

            else

                return "unknown";

        }

        /// <summary>

        /// 反向转换器。将值从绑定目标传给数据源时，数据绑定引擎会调用此方法

        /// </summary>

        /// <param name="value">转换之前的值</param>

        /// <param name="targetType">转换之后的类型</param>

        /// <param name="parameter">转换器所使用的参数（它是通过 Binding 的 ConverterParameter 传递过来的）</param>

        /// <param name="language">转换器所使用的区域信息（它是通过 Binding 的 ConverterLanguage 传递过来的）</param>

        /// <returns>转换后的值</returns>

        public object ConvertBack(object value, Type targetType, object parameter, string language)

        {

            if ((string)value == "a")

                return ;

            else if ((string)value == "b")

                return ;

            else if ((string)value == "c")

                return ;

            else

                return ;

        }

    }

}

Binding/ValueConverter.xaml

<Page

    x:Class="XamlDemo.Binding.ValueConverter"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:XamlDemo.Binding"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="120 0 0 0">

            <!--配置 IValueConverter 资源-->

            <StackPanel.Resources>

                <local:IntegerLetterConverter x:Key="IntegerLetterConverter"/>

            </StackPanel.Resources>

            <Slider Name="slider" Minimum="1" Maximum="3" Value="1" Width="180" HorizontalAlignment="Left" />

            <TextBox Width="150" HorizontalAlignment="Left"

                     Text="{Binding Value,

                                    Mode=TwoWay,

                                    ElementName=slider,

                                    Converter={StaticResource IntegerLetterConverter},

                                    ConverterParameter=param,

                                    ConverterLanguage=zh_cn}" />

            <!--注：ConverterParameter 和 ConverterLanguage 不能实现动态的绑定，只能传递静态的参数-->

        </StackPanel>

    </Grid>

</Page>

OK
[源码下载]

重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换的相关教程结束。

《重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!