BorderBrush von TextBox auf BorderBrush eines Randes dynamisch anwenden

Question

Ich habe TextBoxes und FakeTextBoxes in meiner Anwendung. FakeTextBoxes fungiert als TextBoxes, aber sie haben mehr Funktionalität, da sie Knöpfe und/oder Bilder darin haben. XAML für ein FakeTextBox sieht dies so etwas wie:

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

TextBox in meinem Projekt ein eigenes Styling haben, der seine BorderBrush ändert in Abhängigkeit von seinen IsMouseOver und GotFocus Eigenschaften. Der generische Stil kommt von mahapps.metro und Sie können es hier finden: https://github.com/MahApps/MahApps.Metro/blob/develop/MahApps.Metro/Styles/Controls.TextBox.xaml

Das Problem ist, dass ich nicht das gleiche Verhalten für die Grenze meiner FakeTextBox anwenden kann. Ich möchte das exakt gleiche Verhalten auf meiner benutzerdefinierten Border haben, so dass es genauso aussieht wie andere TextBox es.

Was ich versucht habe, und hat nicht funktioniert für Border:

• Bindung an BorderBrush Eigentum der inneren TextBox.
• Bindung an IsFocused Eigenschaft von TextBox: IsFocused hat keine Setter.
• Erstellen einer versteckten TextBox und Bindung an seinen BorderBrush

Gibt es eine allgemeine und/oder einfache Lösung, um es?

Answer 1

Ich hatte unzählige Probleme mit diesem.

Die Lösung für mich war, drei verschiedene Grenzen zu erstellen.

• FocusBorder
• MouseOverBorder
• NormalBorder

FocusBorder Aufenthalte auf der Oberseite, MouseOverBorder Aufenthalte in der Mittelschicht, und NormalBorder in der untersten Ebene. Die Sichtbarkeit von FocusBorder wird durch Control.GotFocus und Control.LostFocus Ereignisauslöser bestimmt Gleiches Verhalten für den MouseOverBorder für Control.MouseEnter und Control.MouseLeave Ereignisse.

<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

Da Sie das Border-Verhalten kopieren möchten, suchen Sie nach BorderBrushes in der TextBox Style de, wie sie implementiert sind. Drei gefunden, um ihre Schlüssel einen Besuch in der Colors Abschnitt zu bekommen.

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

Die IsFocused BorderBrush ist schwierig, weil es die IsFocused Eigenschaft des TextBox ist sind Sie nach. Wenn Sie es richtig machen, möchten Sie einen Attached Property IsFocused auf den Border deklarieren und ihn an den IsFocused des TextBoxes binden oder ihn zu einem Custom Border machen.