动态地将 TextBox 的 BorderBrush 应用到 Border 的 BorderBrush

Question

我的申请中有 TextBoxes 和 FakeTextBoxes。 FakeTextBoxes 充当 TextBoxes，但它们具有更多功能，因为它们有按钮，其中有 and/or 个图像。 XAML 对于 FakeTextBox 看起来像这样：

                <Border BorderThickness="1">
                    <StackPanel Orientation="Horizontal">
                        <TextBox BorderThickness="0" />
                        <Button>I'm a button inside textbox</Button>
                    </StackPanel>
                </Border>

TextBox 在我的项目中有一个自定义样式，它根据其 IsMouseOver 和 GotFocus 属性更改其 BorderBrush。通用样式来自 mahapps.metro，您可以在这里找到它：https://github.com/MahApps/MahApps.Metro/blob/develop/MahApps.Metro/Styles/Controls.TextBox.xaml

问题是我无法对 FakeTextBox 的边框应用相同的行为。我想在我的自定义 Border 上具有完全相同的行为，以便它看起来与其他 TextBoxes 完全相同。

我尝试过但没有奏效的 Border：

绑定到内部 TextBox 的 BorderBrush 属性。
绑定到 TextBox 的 IsFocused 属性 : IsFocused 没有 setter.
创建一个隐藏的 TextBox 并绑定到它的 BorderBrush

是否有通用的 and/or 简单解决方案？

Answer 1

既然你想复制边框行为，让我们在 TextBox Style en how they're implemented. Found three, to get their Keys a visit to the Colors 部分寻找 BorderBrushes。

<Border BorderThickness="1">
    <Border.Resources>
        <Color x:Key="BlackColor">#FF000000</Color>
        <Color x:Key="Gray2">#FF7F7F7F</Color>
        <Color x:Key="Gray6">#FFCCCCCC</Color>
        <SolidColorBrush x:Key="TextBoxBorderBrush" Color="{StaticResource Gray6}" />
        <SolidColorBrush x:Key="TextBoxMouseOverBorderBrush" Color="{StaticResource Gray2}" />
        <SolidColorBrush x:Key="TextBoxFocusBorderBrush" Color="{StaticResource BlackColor}" />
    </Border.Resources>
    <Border.Style>
        <Style TargetType="{x:Type Border}">
            <Setter Property="BorderBrush" Value="{StaticResource TextBoxBorderBrush}" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="BorderBrush" Value="{StaticResource TextBoxMouseOverBorderBrush}" /> 
                </Trigger>
                <EventTrigger RoutedEvent="Control.GotFocus">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="White" Duration="0:0:0.250"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
    <StackPanel>
        <TextBox BorderThickness="0" />
        <Button>I'm a button inside textbox</Button>
    </StackPanel>
</Border>

IsFocused BorderBrush 很棘手，因为它是您要查找的 TextBox 的 IsFocused 属性。如果正确，您需要在边框上声明一个 Attached Property IsFocused 并将其绑定到 TextBox 的 IsFocused 或使其一起成为自定义边框。

Answer 2

这个我遇到过无数问题。

我的解决方案是创建三个不同的边框。

FocusBorder
MouseOverBorder
NormalBorder

FocusBorder在最上面，MouseOverBorder在中间层，NormalBorder在最下面。

FocusBorder 的可见性由 Control.GotFocus 和 Control.LostFocus 事件触发器决定。 Control.MouseEnter 和 Control.MouseLeave 事件的 MouseOverBorder 行为相同。

<UserControl.Triggers>
        <EventTrigger RoutedEvent="Control.GotFocus">
            <BeginStoryboard>
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames
                                        Storyboard.TargetName="FocusBorder"
                                        Storyboard.TargetProperty="Visibility"
                                        Duration="1">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Control.LostFocus">
            <BeginStoryboard>
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames
                                        Storyboard.TargetName="FocusBorder"
                                        Storyboard.TargetProperty="Visibility"
                                        Duration="1">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Collapsed</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Control.MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames
                                        Storyboard.TargetName="MouseOverBorder"
                                        Storyboard.TargetProperty="Visibility"
                                        Duration="1">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Control.MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames
                                        Storyboard.TargetName="MouseOverBorder"
                                        Storyboard.TargetProperty="Visibility"
                                        Duration="1">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Collapsed</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </UserControl.Triggers>
    <Grid>
        <Border x:Name="FocusBorder" BorderBrush="{DynamicResource ComboBoxMouseOverInnerBorderBrush}"
                Canvas.ZIndex="3" BorderThickness="1" Visibility="Collapsed" />
        <Border x:Name="MouseOverBorder" BorderBrush="{DynamicResource TextBoxMouseOverBorderBrush}"
                Canvas.ZIndex="2" BorderThickness="1" Visibility="Collapsed" />
        <Border BorderBrush="{DynamicResource TextBoxBorderBrush}"
                Canvas.ZIndex="1"  BorderThickness="1" />
        <TextBox BorderThickness="0"></TextBox>
    </Grid>

动态地将 TextBox 的 BorderBrush 应用到 Border 的 BorderBrush

Applying BorderBrush of TextBox to BorderBrush of a Border dynamically

wpf

xaml

binding

styling

mahapps.metro