背水一战 Windows 10 (19) - 绑定: TemplateBinding 绑定, 与 RelativeSource 绑定, 与 StaticResource 绑定

介绍
背水一战 Windows 10 之绑定

TemplateBinding 绑定
与 RelativeSource 绑定
与 StaticResource 绑定

示例
1、演示 TemplateBinding 的用法
Bind/TemplateBindingDemo.xaml

<Page

    x:Class="Windows10.Bind.TemplateBindingDemo"

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

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

    xmlns:local="using:Windows10.Bind"

    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="10 0 10 10">

            <!--

                演示 TemplateBinding 的用法

                TemplateBinding 是一个简单版的 Binding，用于在 ControlTemplate 中做属性之间的绑定（如果需要 Binding 的其他特性该怎么做呢？参见 BindingRelativeSource.xaml）

            -->

            <StackPanel.Resources>

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

                    <Setter Property="Template">

                        <Setter.Value>

                            <ControlTemplate TargetType="Button">

                                <StackPanel>

                                    <!--

                                        ContentPresenter 的 Width 绑定 Button 的 Width

                                        ContentPresenter 的 Height 绑定 Button 的 Width

                                    -->

                                    <ContentPresenter HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="White" Background="Orange"

                                                      Width="{TemplateBinding Width}" Height="{TemplateBinding Width}" />

                                </StackPanel>

                            </ControlTemplate>

                        </Setter.Value>

                    </Setter>

                </Style>

            </StackPanel.Resources>

            <Button Content="我是 Button" Width="128" Style="{StaticResource ButtonStyle}" />

        </StackPanel>

    </Grid>

</Page>

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

<Page

    x:Class="Windows10.Bind.BindingRelativeSource"

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

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

    xmlns:local="using:Windows10.Bind"

    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="10 0 10 10">

            <!--

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

            -->

            <!--

                RelativeSource={RelativeSource TemplatedParent} - 仅在 ControlTemplate 中适用，用于指定数据源来自引用了该 ControlTemplate 的 Control

            -->

            <StackPanel.Resources>

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

                    <Setter Property="Template">

                        <Setter.Value>

                            <ControlTemplate TargetType="Button">

                                <StackPanel>

                                    <ContentPresenter Foreground="White" />

                                    <!--

                                        TemplateBinding 是一个简单版的 Binding，他是 OneWay 的

                                        如果在设计 ControlTemplate 时需要 Binding 的其他特性（比如我想要 TwoWay 的模式）该怎么办呢？

                                        那就需要通过 Binding 来做绑定（这样就可以使用 Binding 的各种特性了），然后通过 RelativeSource={RelativeSource TemplatedParent} 来指定数据源来自引用了该 ControlTemplate 的 Control

                                    -->

                                    <Slider Minimum="1" Maximum="100" Foreground="White" IsThumbToolTipEnabled="False"

                                            Width="{TemplateBinding Width}" Value="{Binding Content, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />

                                </StackPanel>

                            </ControlTemplate>

                        </Setter.Value>

                    </Setter>

                </Style>

            </StackPanel.Resources>

            <Button Width="300" Content="50" Style="{StaticResource ButtonStyle}" Margin="5" />

            <!--

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

            -->

            <TextBlock Text="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" Tag="webabcd" Margin="5" />

        </StackPanel>

    </Grid>

</Page>

3、演示如何与 StaticResource 绑定
Bind/BindingStaticResource.xaml

<Page

    x:Class="Windows10.Bind.BindingStaticResource"

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

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

    xmlns:local="using:Windows10.Bind"

    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="10 0 10 10" x:Name="panel">

            <!--

                演示如何与 StaticResource 绑定

                关于 StaticResource 的说明请参见：/Resource/StaticResourceDemo.xaml

            -->

            <StackPanel.Resources>

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

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

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

                    <!--绑定 StaticResource 资源-->

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

                    <!--绑定 StaticResource 资源的简化写法-->

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

                </Style>

            </StackPanel.Resources>

            <!--绑定 StaticResource 资源-->

            <TextBox Text="我是TextBox" Style="{Binding Source={StaticResource MyStyle}}" Margin="5" />

            <!--绑定 StaticResource 资源的简化写法-->

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

            <!--演示如何在 C# 端绑定 StaticResource-->

            <TextBox Name="textBox" Text="我是TextBox" Margin="5" />

        </StackPanel>

    </Grid>

</Page>

Bind/BindingStaticResource.xaml.cs

/*

 * 演示如何与 StaticResource 绑定（关于 StaticResource 的说明请参见：/Resource/StaticResourceDemo.xaml）

 */

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Data;

namespace Windows10.Bind

{

    public sealed partial class BindingStaticResource : Page

    {

        public BindingStaticResource()

        {

            this.InitializeComponent();

            this.Loaded += BindingStaticResource_Loaded;

        }

        // 在 C# 端绑定 StaticResource

        private void BindingStaticResource_Loaded(object sender, RoutedEventArgs e)

        {

            // 实例化 Binding 对象

            Binding binding = new Binding()

            {

                Source = panel.Resources["MyStyle"]

            };

            // 将目标对象的目标属性与指定的 Binding 对象关联

            BindingOperations.SetBinding(textBox, TextBox.StyleProperty, binding);

        }

    }

}

OK
[源码下载]

巴特西

背水一战 Windows 10 (19) - 绑定: TemplateBinding 绑定, 与 RelativeSource 绑定, 与 StaticResource 绑定

最新文章

热门文章