Применение BorderBrush TextBox к граничной границе поля динамически

Question

У меня есть TextBoxes и FakeTextBoxes в моей заявке. FakeTextBoxes действует как TextBoxes, но у них больше функциональности, так как у них есть кнопки и/или изображения внутри него. XAML для FakeTextBox выглядит примерно так:

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

TextBox в моем проекте есть пользовательский стиль, который меняет свою BorderBrush в зависимости от его IsMouseOver и GotFocus свойств. Общий стиль происходит от mahapps.metro, и вы можете найти его здесь: https://github.com/MahApps/MahApps.Metro/blob/develop/MahApps.Metro/Styles/Controls.TextBox.xaml

Проблема в том, что я не могу применить такое же поведение к границе моего FakeTextBox. Я хочу иметь точно такое же поведение в моем обычном Border, чтобы он выглядел точно так же, как и другие TextBox es.

То, что я пытался и не работать на Border:

• Связывание с BorderBrush свойством внутренней TextBox.
• Связывание с IsFocused property of TextBox: IsFocused не имеет сеттера.
• Создание скрытого TextBox и связывание с его BorderBrush

Есть ли общее и/или простое решение для этого?

Answer 1

У меня было бесчисленное множество проблем с этим.

Решение для меня заключалось в создании трех разных границ.

• FocusBorder
• MouseOverBorder
• NormalBorder

FocusBorder остается на вершине, MouseOverBorder остается в среднем слое и NormalBorder в самом низком уровне.

Видимость FocusBorder определяется по Control.GotFocus и Control.LostFocus событиям триггеров. Такое же поведение для MouseOverBorder для Control.MouseEnter и Control.MouseLeave событий.

<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> 

Answer 2

Поскольку вы хотите скопировать поведение Border, давайте рассмотрим BorderBrushes в TextBox Style ru, как они реализованы. Найдено три, чтобы получить их Ключи посетить раздел Colors.

<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 сложно, потому что это IsFocused собственность TextBox в вы после этого. Сделав это правильно, вы захотите объявить Attached Property IsFocused на границе и привязать его к TextFox TextFox и поместить его в обычную границу.