基於WPF中的TextBox Focus更改圖像顏色？

Question

如下圖所示，我有兩個四個文本框由四個圖像分隔。

我想要做的是當我把焦點放在右邊的第一個文本框或左邊的第一個文本框上時，第一個左右箭頭圖像應該改變顏色。當焦點丟失時，顏色應該變回灰色。如果用戶轉到左側或右側的第二個文本框，則第二個左右箭頭圖標應該改變顏色等等。我怎樣才能做到這一點 ？

我嘗試用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。只要在該元素中改變焦點，它就會改變填充屬性。你可以爲填充顏色添加屬性，如果你想在你的應用程序的不同的人，但我一直簡單 - &灰色硬編碼的橙色之間切換：

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> 

這裏是它的工作：

注意，你需要REF erence 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

你可以使用一個樣式有兩個單獨的獨立DataTriggers對於每個路徑元素：

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