代码之家 › 专栏 › 技术社区 › juharr

在WPF中,如何在具有焦点的窗口部分周围放置边框?

border focus wpf

juharr · 技术社区 · 15 年前

我的窗户有两个主要区域。一个是ScrollViewer中的文本框,另一个是TabControl。我希望在当前有焦点的部分周围有一个红色边框,因此我编写了以下代码

<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);
    }
}

2 回复 | 直到 15 年前

Adam Sills 15 年前

首先,我强烈建议不要使用代码,而是将这些都保存在XAML中。

其次,我还建议使用 Border 做这个。

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

David Basarab 13 年前

被接受的答案对我不起作用。不过,我想出了一个方法,不使用边界,仍然得到同样的效果。

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

我在风格上确实遇到了一些麻烦。最初我在触发器中声明了边框的厚度和颜色。问题是,当盒子里有文本时,它似乎在跳。绕过跳跃效果是在默认情况下声明一个边框厚度,并将边框设置为透明,这样当焦点上的颜色改变时就不会出现跳跃效果。

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

这就是你将看到的效果。

Sample of what a focused and non focused textbox looks like