如何在 XAML 中为输入字段增加不同颜色的堆栈面板？

Question

我下面有一个 TextBox 和一个 StackPanel，它们一起应该会形成一个输入字段。这就是为什么我希望当您单击文本框时，下面的 StackPanel 会更改颜色，新颜色具有的效果可以说是增长效果，以及 material HintAssist 中的设计块。

举个例子：

为此：

但没有仅包含 XAML 代码的 NuGet 包。这是我的代码，但我不知道该怎么做。

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

Answer 1

这里不需要StackPanel，Rectangle应该足以显示该行。您可以为 TextBox 指定一个名称。使用 DataTrigger 向 Rectangle 添加样式，使用其名称绑定到 TextBox 并检查 IsKeyboardFocusWithin 属性以确定焦点是否在TextBox。如果您仍想使用 StackPanel，您可以轻松调整它。

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

如何在 XAML 中为输入字段增加不同颜色的堆栈面板？

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

wpf

xaml

wpf-controls