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

Posted 2020-07-30 webabcd - 专注于 asp.net, html5,

背水一战 Windows 10 之 绑定: TemplateBinding 绑定, 与 RelativeSource 绑定, 与 StaticResource 绑定

[源码下载]

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

作者：webabcd


介绍
背水一战 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
[源码下载]