c# - 基于 WPF 中的 TextBox Focus 更改图像颜色？

Question

如下图所示，我有两个由四个图像分隔的四个文本框。

我想要做的是，当我将焦点放在右侧的第一个文本框或左侧的第一个文本框上时，第一个左右箭头图像应该改变颜色。当失去焦点时，颜色应该变回灰色。如果用户转到左侧或右侧的第二个 TextBox，则第二个左右箭头图标应更改颜色，依此类推。我该怎么做？

我尝试使用 IsKeyboardFocusWithin TextBox 属性实现 MultiDataTrigger，但无法存档所需的结果。有什么建议吗？

这是我的 XAML 代码:(图标位于第二个 StackPanel 的 Path 属性内)

      <StackPanel Grid.Column="0">
          <telerik:RadWatermarkTextBox Name="WatermarkTextBoxP1"
                                       WatermarkContent="Parameterausdruck P1" 
                                       Margin="0,5,0,0" TabIndex="1"/>

          <telerik:RadWatermarkTextBox Name="WatermarkTextBoxP2"
                                       WatermarkContent="Parameterausdruck P2"                                        
                                       Margin="0,5,0,0" TabIndex="3"/>

          <telerik:RadWatermarkTextBox Name="WatermarkTextBoxP3"
                                       WatermarkContent="Parameterausdruck P3"
                                       Margin="0,5,0,0" TabIndex="5"/>

          <telerik:RadWatermarkTextBox Name="WatermarkTextBoxP4"
                                       WatermarkContent="Parameterausdruck P4"
                                       Margin="0,5,0,0" TabIndex="7"/>

      </StackPanel>

      <StackPanel Grid.Column="1" Margin="0,5,0,0">
          <Path Fill="Gray" Margin="5,5,5,0" Stretch="Fill" Width="14" Height="11"
                                  Data="F1 M 54,52.0001L 29.25,52.0001L 37.25,60L 26.75,60L 14.75,48.0001L 26.75,36L 37.25,36L 29.25,44.0001L 54,44.0001L 54,52.0001 Z M 22,23.9999L 46.75,23.9999L 38.75,16L 49.25,16L 61.25,27.9999L 49.25,40L 38.75,40L 46.75,31.9999L 22,31.9999L 22,23.9999 Z " />
          <Path Fill="Gray" Margin="5,16,5,0" Stretch="Fill" Width="14" Height="11"
                                  Data="F1 M 54,52.0001L 29.25,52.0001L 37.25,60L 26.75,60L 14.75,48.0001L 26.75,36L 37.25,36L 29.25,44.0001L 54,44.0001L 54,52.0001 Z M 22,23.9999L 46.75,23.9999L 38.75,16L 49.25,16L 61.25,27.9999L 49.25,40L 38.75,40L 46.75,31.9999L 22,31.9999L 22,23.9999 Z " />
          <Path Fill="Gray" Margin="5,16,5,0" Stretch="Fill" Width="14" Height="11"
                                  Data="F1 M 54,52.0001L 29.25,52.0001L 37.25,60L 26.75,60L 14.75,48.0001L 26.75,36L 37.25,36L 29.25,44.0001L 54,44.0001L 54,52.0001 Z M 22,23.9999L 46.75,23.9999L 38.75,16L 49.25,16L 61.25,27.9999L 49.25,40L 38.75,40L 46.75,31.9999L 22,31.9999L 22,23.9999 Z " />
          <Path Fill="Gray" Margin="5,16,5,0" Stretch="Fill" Width="14" Height="11"
                                  Data="F1 M 54,52.0001L 29.25,52.0001L 37.25,60L 26.75,60L 14.75,48.0001L 26.75,36L 37.25,36L 29.25,44.0001L 54,44.0001L 54,52.0001 Z M 22,23.9999L 46.75,23.9999L 38.75,16L 49.25,16L 61.25,27.9999L 49.25,40L 38.75,40L 46.75,31.9999L 22,31.9999L 22,23.9999 Z " />

      </StackPanel>

      <StackPanel Grid.Column="2">
          <telerik:RadWatermarkTextBox Name="WatermarkTextBoxDesignP1"
                                       WatermarkContent="Design Wert P1"
                                       Margin="0,5,0,0" 
                                       TabIndex="2"/>

          <telerik:RadWatermarkTextBox Name="WatermarkTextBoxDesignP2"
                                       WatermarkContent="Design Wert P2"
                                       Margin="0,5,0,0" 
                                       TabIndex="4"/>

          <telerik:RadWatermarkTextBox Name="WatermarkTextBoxDesignP3"
                                       WatermarkContent="Design Wert P3"
                                       Margin="0,5,0,0" 
                                       TabIndex="6"/>

          <telerik:RadWatermarkTextBox Name="WatermarkTextBoxDesignP4"
                                       WatermarkContent="Design Wert P4"
                                       Margin="0,5,0,0" 
                                       TabIndex="8"/>

       </StackPanel>
  </Grid>

Answer 1

不是为每个文本框使用单独的样式，而是一种简单的小行为。它们具有可在整个应用程序中重复使用的优点，您可以稍后添加更多功能。这是一个例子:

此类被添加到 Path 中，并绑定(bind)到一个 FrameworkElement - FocusElement。每当该元素中的焦点发生变化时，它都会更改 Fill 属性。如果您希望在整个应用程序中使用不同的填充颜色，您可以添加填充颜色的属性，但我保持简单——在硬编码的橙色和灰色之间切换:

public class FocusHighlightBehavior : Behavior<Path>
{
    public FrameworkElement FocusElement
    {
        get { return (FrameworkElement)GetValue(FocusElementProperty); }
        set { SetValue(FocusElementProperty, value); }
    }

    // Using a DependencyProperty as the backing store for FocusElement.
    public static readonly DependencyProperty FocusElementProperty =
        DependencyProperty.Register("FocusElement", typeof(FrameworkElement), typeof(FocusHighlightBehavior), new PropertyMetadata(null, (o,e) =>
        {
            //this is the property changed event for the dependency property!
            (o as FocusHighlightBehavior).UpdateFocusElement();
        }));

    private void UpdateFocusElement()
    {
        if (FocusElement != null)
        {
            FocusElement.GotFocus += FocusElement_GotFocus;
            FocusElement.LostFocus += FocusElement_LostFocus;
        }
    }

    private void FocusElement_LostFocus(object sender, RoutedEventArgs e)
    {
        AssociatedObject.Fill = Brushes.Gray;
    }

    private void FocusElement_GotFocus(object sender, RoutedEventArgs e)
    {
        AssociatedObject.Fill = Brushes.Orange;
    }
}

只需将它添加到路径的 xaml 中即可使用它，如下所示:

     <Path Fill="Gray" Margin="5,5,5,0" Stretch="Fill" Width="14" Height="11" Data="...">
            <e:Interaction.Behaviors>
                <local:FocusHighlightBehavior FocusElement="{Binding ElementName=WatermarkTextBoxP1}"/>
            </e:Interaction.Behaviors>
        </Path>

这是有效的:

请注意，您需要引用 System.Windows.Interactivity，并将其包含在您的 xaml 中，如下所示:

<Window x:Class="TestApp.MainWindow"
        ....
        xmlns:local="clr-namespace:TestApp"
        xmlns:e="http://schemas.microsoft.com/expression/2010/interactivity"