Question

我想为＆＃34;色样＆＃34;定义WPF ControlTemplate。按钮。基本上，我希望能够使用这样的模板：

<Button Template="{StaticResource SwatchButtonTemplate}" Background="{Binding ActiveColor}">

其中ActiveColor是数据上下文中的Color属性。我已经能够通过这个模板实现这一目标：

<ControlTemplate x:Key="SwatchButtonTemplate" TargetType="{x:Type Button}">
    <Border Name="OuterBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{StaticResource BorderBrush}" Background="{TemplateBinding Background}">
        <Border Name="InnerBorder" BorderThickness="0" BorderBrush="White" Background="{TemplateBinding Background}">
            <ContentPresenter/>
        </Border>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="OuterBorder" Property="BorderThickness" Value="1"/>
            <Setter TargetName="InnerBorder" Property="BorderThickness" Value="1"/>
            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource MouseOverAccentBrush}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

但是现在我要做的是如果颜色是透明的，则使用特殊的刷子作为按钮背景（例如，如果颜色是透明的，则在背景中显示红色＆＃34; X＆＃34;）

我似乎无法弄清楚如何在模板中设置检查背景颜色的触发器，如果它是透明的，请为Background属性使用不同的画笔。我尝试过将DataTrigger添加到模板中：

    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            ...
        </Trigger>
        <DataTrigger Binding="{TemplateBinding Background}" Value="#00000000">
            <Setter TargetName="InnerBorder" Property="Background" Value="{StaticResource transparent_swatch_brush}"/>
        </DataTrigger>
    </ControlTemplate.Triggers>

但是在使用它时我得到了一个XamlParseException。

编辑：此模板的完整用法位于色板按钮列表中，列表的来源绑定到ObservableCollection<Brush> ColorList，其中填充SolidColorBrushes（其中一个）这是透明的）

<ItemsControl ItemsSource="{Binding ColorList}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button x:Name="button" Background="{Binding}"
                    Template="{StaticResource SwatchButtonTemplate}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Height="20" Rows="1" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

完整的模板定义：

<ControlTemplate x:Key="SwatchButtonTemplate" TargetType="{x:Type Button}">
    <Border Name="OuterBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{StaticResource BorderBrush}" Background="{TemplateBinding Background}">
        <Border Name="InnerBorder" BorderThickness="0" BorderBrush="White" Background="{TemplateBinding Background}">
            <ContentPresenter/>
        </Border>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="OuterBorder" Property="BorderThickness" Value="1"/>
            <Setter TargetName="InnerBorder" Property="BorderThickness" Value="1"/>
            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource MouseOverAccentBrush}"/>
        </Trigger>
        <DataTrigger Binding="{Binding Background, RelativeSource={RelativeSource Mode=TemplatedParent}}" Value="#00ffffff">
            <Setter TargetName="InnerBorder" Property="Background" Value="{StaticResource transparent_swatch_brush}"/>
        </DataTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Answer 1

你可以通过绑定到类型为Button的anchestor来修复它：

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        ...
    </Trigger>
    <DataTrigger Binding="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType=Button}}" Value="#00000000">
        <Setter TargetName="InnerBorder" Property="Background" Value="{StaticResource transparent_swatch_brush}"/>
    </DataTrigger>

这将使用Background中的Button属性

Answer 2

感谢@EdPlunkett建议避免＆＃34; {TemplateBinding ...}＆＃34;在数据触发器中。解决方案（仅限XAML）是使用＆＃34; Self＆＃34;相对来源：

<ControlTemplate x:Key="SwatchButtonTemplate" TargetType="{x:Type Button}">
    <Border Name="OuterBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{StaticResource BorderBrush}" Background="{TemplateBinding Background}">
        <Border Name="InnerBorder" BorderThickness="0" BorderBrush="White" Background="{TemplateBinding Background}">
            <ContentPresenter/>
        </Border>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="InnerBorder" Property="BorderThickness" Value="1" />
        </Trigger>
        <DataTrigger Binding="{Binding Path=Background.Color, RelativeSource={RelativeSource Self}}" Value="#00ffffff">
            <Setter TargetName="InnerBorder" Property="Background" Value="{StaticResource transparent_swatch_brush}" />
        </DataTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

（另请注意，Colors.Transparent是＃00ffffff，而不是我认为的＃00000000）。

在ControlTemplate DataTrigger中更改按钮背景

2 个答案: