WPF에서 포커스가있는 창의 일부분에 테두리를 어떻게 두는가?

Question

두 개의 주요 영역이있는 창이 있습니다. 하나는 ScrollViewer 내부의 TextBox이고 다른 하나는 TabControl입니다. 나는 현재 포커스가있는 부분의 주위에 빨간색 테두리를 갖고 싶어, 그래서

XAML

<ScrollViewer BorderBrush="Red" 
       BorderThickness="0" 
       GotFocus="Border_GotFocus" 
       LostFocus="Border_LostFocus"> 
    <TextBox/> 
</ScrollViewer> 
<TabControl BorderBrush="Red" 
      BorderThickness="0" 
      GotFocus="Border_GotFocus" 
      LostFocus="Border_LostFocus"> 
</TabControl> 

코드

private void Border_LostFocus(object sender, RoutedEventArgs e) 
{ 
    var control = sender as Control; 
    if (control != null) 
    { 
     control.BorderThickness = new Thickness(0); 
    } 
} 

private void Border_GotFocus(object sender, RoutedEventArgs e) 
{ 
    var control = sender as Control; 
    if (control != null) 
    { 
     control.BorderThickness = new Thickness(2); 
    } 
} 

문제가 있다는 것을 수행하려면 다음과 같은 코드를 작성하는 경우 I TextBox를 클릭하면 ScrollViewer 주변의 테두리가 업데이트되지 않습니다. TabControl에서 탭을 클릭하면 테두리를 볼 수 있도록 테두리가 업데이트되지만 다른 곳을 클릭하면 "제거"되지 않습니다. 이것을 할 수있는 더 좋은 방법이 있습니까?

Answer 1

먼저 코드를 사용하지 말고 XAML에서이 코드를 모두 사용하지 않는 것이 좋습니다.

두 번째로이 작업을 수행하려면 Border을 사용하는 것이 좋습니다.

셋째, 스타일 트리거에서 IsKeyboardFocusedWithin을 사용합니다.

<Window.Resources> 
    <Style x:Key="FocusedBorder" TargetType="Border"> 
     <Setter Property="BorderThickness" Value="2"></Setter> 
     <Setter Property="BorderBrush" Value="Transparent"></Setter> 
     <Style.Triggers> 
      <Trigger Property="IsKeyboardFocusWithin" Value="True"> 
       <Setter Property="BorderBrush" Value="Red"></Setter> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 
</Window.Resources> 
<StackPanel Width="400"> 
    <ScrollViewer> 
     <Border Style="{StaticResource FocusedBorder}"> 
      <TextBox> 
      </TextBox> 
     </Border> 
    </ScrollViewer> 
    <TabControl> 
     <TabItem Header="Foo"> 
      <Border Style="{StaticResource FocusedBorder}"> 
       <TextBox></TextBox> 
      </Border> 
     </TabItem> 
     <TabItem Header="Bar"> 
      <Border Style="{StaticResource FocusedBorder}"> 
       <TextBox></TextBox> 
      </Border> 
     </TabItem> 
    </TabControl> 
</StackPanel> 

Answer 2

허용되는 대답이 적합하지 않았습니다. 그러나 나는 테두리를 사용하지 않고 동일한 효과를 얻는 방법을 찾아 냈습니다.

아래는 텍스트 상자에 사용되는 스타일입니다.

<Style x:Key="DefaultTextbox" TargetType="{x:Type TextBox}"> 
    <Setter Property="FontSize" Value="14" /> 
    <Setter Property="VerticalAlignment" Value="Center" /> 
    <Setter Property="Margin" Value="5 2 10 2" /> 
    <Setter Property="FontFamily" Value="Arial" /> 
    <Setter Property="FontStyle" Value="Normal" /> 
    <Setter Property="BorderThickness" Value="2" /> 
    <Setter Property="BorderBrush" Value="Transparent" /> 
    <Style.Triggers> 
     <Trigger Property="IsFocused" Value="True" > 
      <Setter Property="BorderBrush" Value="#4E82EC" /> 
     </Trigger> 
    </Style.Triggers> 
</Style> 

스타일에 문제가 있습니다. 원래는 테두리 두께와 색상을 Trigger에 선언했습니다. 문제는 상자 안에 텍스트가 점프하는 것처럼 보였을 때입니다. 점프 효과를 얻으려면 기본적으로 테두리 두께를 선언하고 테두리를 투명하게 설정하면 초점에서 색상이 변경되면 점프 효과가 없습니다.

그런 다음 당신은 당신의 텍스트 상자에 스타일을 설정해야합니다 :

<TextBox Style="{StaticResource DefaultTextbox}" /> 

을 그리고 이것은 당신이 표시되는 효과입니다.