Question

我想要做的是设置可编辑ComboBox的BorderBrush。我使用略微修改的默认WPF模板。它们的结构如下：

<ControlTemplate x:Key="ComboBoxEditableTemplate" TargetType="{x:Type ComboBox}">
    ...
    <Grid x:Name="templateRoot" ...>
        ...
        <ToggleButton x:Name="toggleButton" ... />
        <Border x:Name="border" ...>
            <TextBox x:Name="PART_EditableTextBox" ... />
            <!-- textbox with IsFocused property which should be focus trigger -->
        </Border>
    </Grid>
    ...
</ControlTemplate>

ToggleButton模板：

<ControlTemplate TargetType="{x:Type ToggleButton}">
    <Border x:Name="templateRoot" ...> <!-- first border brush I want to set on focus -->
        <Border x:Name="innerBorder" ...> <!-- second border brush I want to set on focus -->
            <Border x:Name="splitBorder" ...>
                <Path x:Name="arrow" ... />
            </Border>
        </Border>
    </Border>
</ControlTemplate>

现在，应该发生什么。

当PART_EditableTextBox.IsFocused等于true时然后将templateRoot.BorderBrush和innerBorder.BorderBrush设置为其他颜色（例如 [已删除：红色] 红色和蓝色）。

如果只设置一个BorderBrush，那将非常简单，因为我可以使用TemplateBinding将此属性绑定到ToggleButton元素。

对我来说，问题是嵌套模板。我不知道如何引用另一个模板内部。

Answer 1

您可以在ToggleButton部分中使用TemplateBinding并将它们绑定到同一属性。然后在触发器内更改它：

 <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" >
                            <!-- first border brush I want to set on focus -->
                            <Border x:Name="innerBorder" BorderBrush="{TemplateBinding BorderBrush}">
                                <!-- second border brush I want to set on focus -->
                                <Border x:Name="splitBorder" >
                                    <Path x:Name="arrow"  />
                                </Border>
                            </Border>
                        </Border>
                    </ControlTemplate>

然后在你的触发器内部组合框设置togglebutton的边框刷：

<ControlTemplate TargetType="{x:Type ComboBox}">
                        <Grid x:Name="templateRoot" >
                            <ToggleButton x:Name="toggleButton"  />
                            <Border x:Name="border" >
                                <TextBox x:Name="PART_EditableTextBox"  />
                                <!-- textbox with IsFocused property which should be focus trigger -->
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger SourceName="PART_EditableTextBox" Property="IsFocused" Value="True">
                                <Setter Property="BorderBrush" Value="Red" TargetName="toggleButton"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>

<强>更新您可以将ToggleButton的ControlTemplate更改为：

<ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" >
                        <!-- first border brush I want to set on focus -->
                        <Border x:Name="innerBorder" BorderBrush="{Binding ElementName=templateRoot, Path=BorderBrush, Converter={SomeColorConverter}}">
                            <!-- second border brush I want to set on focus -->
                            <Border x:Name="splitBorder" >
                                <Path x:Name="arrow"  />
                            </Border>
                        </Border>
                    </Border>
                </ControlTemplate>

这样，一旦通过触发器更改了BorderBrush，就可以触发绑定，并使用转换器设置不同的颜色。

Answer 2

触发器可以为您解决此问题

<UserControl x:Class="Sample2.ContactSearchControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="75" Width="300">
    <Border>
        <Border.Style>
            <Style TargetType="Border">
                <Setter Property="Background" Value="White" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsFocused, ElementName=txtSearch}" Value="true">
                        <Setter Property="Background" Value="Black" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
        <StackPanel>
            <TextBox x:Name="txtSearch" Text="Search" />
            <TextBox Text="Other" />
        </StackPanel>
    </Border>
</UserControl>

Answer 3

最后，我自己找到了解决方案。我扩展了ToggleButton类，因此它拥有额外的InnerBorderBrush属性。

现在，我可以使用Setter设置外边框和内边框：

<Trigger SourceName="PART_EditableTextBox" Property="IsFocused" Value="True">
    <Setter Property="BorderBrush" Value="Red" TargetName="toggleButton">
    <Setter Property="InnerBorderBrush" Value="Blue" TargetName="toggleButton"></Setter>
</Trigger>

这是我扩展ToggleButton类的方法：

public class ComboBoxToggleButton : ToggleButton
{
    // Dependency Property
    public static readonly DependencyProperty InnerBorderBrushProperty =
     DependencyProperty.Register("InnerBorderBrush", typeof(Brush),
         typeof(ComboBoxToggleButton), new FrameworkPropertyMetadata(Brushes.Transparent));

    // .NET Property wrapper
    public Brush InnerBorderBrush
    {
        get
        {
            return (Brush)GetValue(InnerBorderBrushProperty);
        }
        set
        {
            SetValue(InnerBorderBrushProperty, value);
        }
    }
}

在焦点上设置可编辑ComboBox的边框颜色

3 个答案: