Question

如下图所示，我有两个四个TextBox，由四个图像分隔。

我想要做的是当我将焦点放在右侧的第一个文本框或左侧的第一个文本框时，第一个左右箭头图像应该改变颜色。当焦点丢失时，颜色应该恢复为灰色。如果用户转到左侧或右侧的第二个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，并绑定到FrameworkElement - FocusElement。每当在该元素中更改焦点时，它都会更改Fill属性。如果你想在整个应用程序中使用不同的颜色，你可以添加填充颜色的属性，但我保持简单 - 在硬编码的橙色和＆amp;之间切换。灰色：

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"

Answer 2

您可以为每个Path元素使用带有两个单独的DataTriggers的Style：

<Path 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.Style>
        <Style TargetType="Path">
            <Setter Property="Fill" Value="Gray" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsFocused, ElementName=WatermarkTextBoxP1}" Value="True">
                    <Setter Property="Fill" Value="Green" />
                </DataTrigger>
                <DataTrigger Binding="{Binding IsFocused, ElementName=WatermarkTextBoxDesignP1}" Value="True">
                    <Setter Property="Fill" Value="Green" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Path.Style>
</Path>

在WPF中基于TextBox Focus更改图像颜色？

2 个答案: