wpf - How can I grow the stack panel with a different color in XAML for an input field?

Question

I have a TextBox and a StackPanel underneath, which together should result in an input field. That's why I want that as soon as you click into the text box, the StackPanel underneath changes the color with an effect that the new color has, so to speak, a growing effect, as well as the material design nugget in the HintAssist.

So as an example of this:

To this:

But without a NuGet package only with XAML code. This is my code now but I have no idea how to make this.

<Grid>
  <DockPanel>
    <StackPanel StackPanel Grid.Row="1" Background="#2D2D30"  DockPanel.Dock="Top" Height="78">
      <DockPanel Margin="0,15" >
        <StackPanel DockPanel.Dock="Bottom" Width="152" 
                    Margin="0 0 600 0" Height="1" Background="Black"> 
        </StackPanel>
        <TextBox Foreground="LightBlue" Text="Eingabe" Width="170" Margin="20 0 0 0"
                             FontSize="20" Background="#2D2D30" BorderThickness="0" Height="30">
        </TextBox>
      </DockPanel>
    </StackPanel>
  </DockPanel>
</Grid>

question from:https://stackoverflow.com/questions/65845600/how-can-i-grow-the-stack-panel-with-a-different-color-in-xaml-for-an-input-field

Answer 1

You do not need a StackPanel here, a Rectangle should be enough to display the line. You can assign a name to your TextBox. Add a style to your Rectangle with a DataTrigger that binds to the TextBox using its name and checks the IsKeyboardFocusWithin property to determine if the focus is in the TextBox. If you still want to use the StackPanel, you can adapt it easily.

<DockPanel Margin="0,15">
   <Rectangle DockPanel.Dock="Bottom"
              Width="152"
              Margin="0 0 600 0"
              Height="1">
      <Rectangle.Style>
         <Style TargetType="{x:Type Rectangle}">
            <Setter Property="Fill" Value="Black"/>
            <Style.Triggers>
               <DataTrigger Binding="{Binding IsKeyboardFocusWithin, ElementName=MyTextBox}" Value="True">
                  <Setter Property="Fill" Value="Blue"/>
               </DataTrigger>
            </Style.Triggers>
         </Style>
      </Rectangle.Style>
   </Rectangle>
   <TextBox x:Name="MyTextBox"
            Foreground="LightBlue"
            Text="Eingabe"
            Width="170"
            Margin="20 0 0 0"
            FontSize="20"
            Background="#2D2D30"
            BorderThickness="0"
            Height="30">
   </TextBox>
</DockPanel>