綁定: 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);
        }
    }
}