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>

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

我知道TemplateBinding有一种方式，但不幸的是我不知道如何使用它。

Answer 1

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

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

示例 TemplateBinding

   <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 ..所以你不能使用TemplateBinding ..请关注这个link的绑定语法。

您的示例解决方案

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

  <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：控制模板的键，当你用一些特定的元素绑定它时，定义x：key就像我做的模板=＆＃34; {DynamicResource CircleButton}＆＃34;。

以下是您的情况：

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

这将适用于您的应用程序中的所有Expander。您可以将此Style放入App.xaml文件以获得代码清洁。希望这会帮助你。

Answer 3

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

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

在模板中绑定属性

3 个答案: