绑定模板中的属性

Question

我有以下HeaderTemplate用于Expander ：

<Expander.HeaderTemplate>
    <DataTemplate>
        <Grid Background="#939393">
            <Grid.RowDefinitions>
                <RowDefinition Height="22"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.Resources>
                <Style TargetType="{x:Type ToggleButton}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ToggleButton}">
                                <Border HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="border" CornerRadius="5,5,5,5" 
                                        Background="Transparent" BorderBrush="#FF000000" Margin="1" BorderThickness="1,1,1,1" SnapsToDevicePixels="True">
                                    <ContentPresenter x:Name="contentPresenter"/>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsChecked" Value="true">
                                        <Setter Property="Background" TargetName="border" Value="DarkGray"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Grid.Resources>
            <TextBlock Grid.Column="0" Background="#6E6E6E"/>
            <ToggleButton Grid.Column="0" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType=Expander}}" Focusable="False">
                <Image Source="{Binding IsExpanded, RelativeSource={RelativeSource FindAncestor, AncestorType=Expander}, Converter={StaticResource boolToExpanderDirectionConverter}}"/>
            </ToggleButton>
            <TextBlock Grid.Column="1" Text="General" Margin="5,1,1,1" VerticalAlignment="Top" FontWeight="Bold"/>
        </Grid>
    </DataTemplate>
</Expander.HeaderTemplate>

我直接在一个Expander定义了此Headertemplate。 现在，我想将此模板移至资源，并将其应用于所有扩展器。 我现在的问题是，我不知道如何将模板中TextBlock的标题设置为Expander的标题。

我knwo有一个办法TemplateBinding ，但不幸的是，我不知道怎么用这个。

Answer 1

TemplateBinding只能在ControlTemplate中使用。TemplateBinding用于绑定到模板定义中的元素属性。

在您的示例中，您已经将controltemplate用于toggleButton。

模板绑定 示例

   <Style TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter TextElement.Foreground="{TemplateBinding Foreground}" x:Name="contentPresenter"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            .....
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
    </Style>

<ToggleButton Grid.Column="0" Background="Red" BorderBrush="Black" BorderThickness="1" Foreground="White"/>

在这里Border和Contentpresnter将绑定ToggleButton的属性，该属性通常是在其定义中定义的。

---

但是在您的示例中，您使用了Datatemplate..so，所以您不能使用TemplateBinding ..，请单击此链接获取绑定语法。

您的示例解决方案

使用绑定语法，我们可以将Header属性绑定到不同的exapnder Text =“ {Binding Path = Header，RelativeSource = {RelativeSource AncestorType = {x：Type Expander}}}}”“

  <Window.Resources>
    <DataTemplate x:Key="ExpanderHeaderTemplate">
        <Grid Background="#939393">
            <Grid.RowDefinitions>
                <RowDefinition Height="22"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.Resources>
                <Style TargetType="{x:Type ToggleButton}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ToggleButton}">
                                <Border HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="border" CornerRadius="5,5,5,5" 
                                    Background="{TemplateBinding Background}" BorderBrush="#FF000000" Margin="1" BorderThickness="1,1,1,1" SnapsToDevicePixels="True">
                                    <ContentPresenter x:Name="contentPresenter"/>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsChecked" Value="true">
                                        <Setter Property="Background" TargetName="border" Value="DarkGray"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Grid.Resources>
            <TextBlock Grid.Column="0" Background="#6E6E6E"/>
            <ToggleButton Grid.Column="0" Background="Red" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType=Expander}}" Focusable="False">
                <Image Source="{Binding IsExpanded, RelativeSource={RelativeSource FindAncestor, AncestorType=Expander}, Converter={StaticResource boolToExpanderDirectionConverter}}"/>
            </ToggleButton>
            <TextBlock Grid.Column="1" Text="{Binding Path=Header,RelativeSource={RelativeSource AncestorType={x:Type Expander}}}" Margin="5,1,1,1" VerticalAlignment="Top" FontWeight="Bold"/>
        </Grid>
    </DataTemplate>
</Window.Resources>

 <StackPanel>
    <Expander Header="General1" HeaderTemplate="{StaticResource ExpanderHeaderTemplate}"/>
    <Expander Header="General2" HeaderTemplate="{StaticResource ExpanderHeaderTemplate}"/>
</StackPanel>

Answer 2

您可以通过下面的代码了解模板绑定，这是我在学习XAML时实现的。

<Button Template="{DynamicResource CircleButton}" Background="Green" Content="1"></Button>

<ControlTemplate x:Key="CircleButton" TargetType="{x:Type Button}">
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" MinHeight="36" MinWidth="36">
            <Ellipse Fill="{TemplateBinding Background}"></Ellipse>
            <ContentPresenter TextBlock.FontFamily="Calibri" TextBlock.FontSize="24" TextBlock.Foreground="Wheat" HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
        </Grid>

您必须提供ax：Key来控制Template，并在将其与某些特定元素绑定时定义x：key，就像我执行Template =“ {DynamicResource CircleButton}”一样。

以下是您的情况：

<Style  TargetType="{x:Type Expander}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Expander}">
                     // Do your thing.
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

这将适用于整个应用程序中的所有Expander。 您可以将此样式放入App.xaml文件中以实现代码清洁。 希望对您有帮助。

Answer 3

由于您是通过DataTemplate指定HeaderTemplate，因此模板的DataContext是Header。 这个简单的例子起作用：

<Expander Header="Test">
    <Expander.HeaderTemplate>
        <TextBlock Text="{Binding}"/>
    </Expander.HeaderTemplate>
</Expander>