WPFのTextBox Focusに基づいて画像の色を変更しますか？

Question

下の画像に示すように、4つの画像で区切られた2つのテキストボックスが2つあります。

私がしたいのは、右の最初のテキストボックスにフォーカスを置いた場合、または左の最初のテキストボックスにフォーカスを当てた場合、最初の右左の矢印イメージが色を変更する必要があります。フォーカスが失われると、色はグレーに戻ります。ユーザーが2番目のTextBoxを左または右に移動すると、2番目の右矢印アイコンが色などを変更する必要があります。これどうやってするの ？

IsKeyboardFocusWithin TextBoxプロパティでMultiDataTriggerを実装しようとしましたが、必要な結果をアーカイブできませんでした。助言がありますか ？ここで

私のXAMLコードである：（アイコンが第二のStackPanelでPathプロパティ内にある）次の2つの別々の独立したDataTriggersとスタイルを使用することができ

 <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プロパティが変更されます。あなたのアプリケーション全体でさまざまなものを望んでいたが、私はそれをシンプルに保たれている場合は、塗りつぶしの色のプロパティを追加することができます - ハードコーディングされたオレンジ色の&グレーの切り替え：

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に

注意が必要レンス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要素に対して：

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