Визуальная индикация последнего сфокусированного элемента, когда приложение теряет фокус / альтернатива IsKeyboardFocusWithin - PullRequest
Новая
       52

Визуальная индикация последнего сфокусированного элемента, когда приложение теряет фокус / альтернатива IsKeyboardFocusWithin

0 голосов
/ 02 октября 2019

В приложении с несколькими панелями или документами, с которыми необходимо взаимодействовать, требуется четкое указание того, какая область приложения имеет фокус. Visual Studio сама по себе является хорошим примером этого.

Следующий пример MCV близок к достижению желаемого эффекта.
Однако, поскольку он использует IsKeyboardFocusWithin, последний сфокусированный элемент в приложении не поддерживается, когда приложениесам теряет фокус.

Требуемое поведение: Сфокусированный элемент, отмеченный синим «SelectedColor», сохраняется, когда приложение теряет фокус. Visual Studio делает это.

Как сохранить индикацию фокуса, когда приложение теряет фокус?

Example Image

  • Код

    Примечание. Код отсутствует. Это полный пример. 

    <Window x:Class="TrackFocusMCVE.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
    Title="MainWindow" Height="150" Width="300">
<Window.Resources>

    <SolidColorBrush x:Key="MouseOverColor" Color="#FF1C97EA"/>
    <SolidColorBrush x:Key="SelectedColor" Color="#FF007ACC"/>
    <SolidColorBrush x:Key="InactiveColor" Color="#19FFFFFF"/>
    <SolidColorBrush x:Key="BackgroundColor" Color="#FF44454B"/>

    <Style x:Key="TabControlStyle" TargetType="{x:Type TabControl}">
        <Setter Property="Margin" Value="5,15,5,7"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="BorderThickness" Value="0,2,0,0"/>
        <Setter Property="BorderBrush" Value="{DynamicResource InactiveColor}"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="{StaticResource BackgroundColor}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Style.Triggers>
            <Trigger Property="IsKeyboardFocusWithin" Value="True">
                <Setter Property="TabControl.BorderBrush" Value="{StaticResource SelectedColor}"/>
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style x:Key="TabItemStyle" TargetType="{x:Type TabItem}">
        <Setter Property="Padding" Value="15,2"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Border Name="TabBorder" MinWidth="40" MinHeight="20"
                            BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                            Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}"
                            Background="{TemplateBinding Background}">
                        <ContentPresenter ContentSource="Header" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true" />
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
                            </MultiDataTrigger.Conditions>
                            <Setter TargetName="TabBorder" Property="Background" Value="{StaticResource MouseOverColor}"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource Self}}" Value="false" />
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/>
                            </MultiDataTrigger.Conditions>
                            <Setter TargetName="TabBorder" Property="Background" Value="{StaticResource InactiveColor}"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource Self}}" Value="true" />
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/>
                            </MultiDataTrigger.Conditions>
                            <Setter TargetName="TabBorder" Property="Background" Value="{StaticResource SelectedColor}"/>
                        </MultiDataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
    <Grid Background="DimGray">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TabControl Grid.Column="0" x:Name="tc1" Style="{DynamicResource TabControlStyle}">
            <TabItem Header="1" Content="Tab Content" Style="{DynamicResource TabItemStyle}"/>
            <TabItem Header="2" Content="Tab Content" Style="{DynamicResource TabItemStyle}"/>
            <TabItem Header="3" Content="Tab Content" Style="{DynamicResource TabItemStyle}"/>
        </TabControl>
        <TabControl Grid.Column="1" x:Name="tc2" Style="{DynamicResource TabControlStyle}">
            <TabItem Header="4" Content="Tab Content" Style="{DynamicResource TabItemStyle}"/>
            <TabItem Header="5" Content="Tab Content" Style="{DynamicResource TabItemStyle}"/>
            <TabItem Header="6" Content="Tab Content" Style="{DynamicResource TabItemStyle}"/>
        </TabControl>
    </Grid>
</Window>

1 Ответ

1 голос
/ 02 октября 2019

Частичный ответ:

Вы можете сделать вашу выделенную вкладку синей, когда окно теряет фокус, изменив условие MultiDataTrigger, чтобы использовать IsFocused вместо IsKeyboardFocusWithin следующим образом: 

<MultiDataTrigger>
    <MultiDataTrigger.Conditions>
        <Condition Binding="{Binding IsFocused, RelativeSource={RelativeSource Self}}" Value="true" />
        <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true" />
    </MultiDataTrigger.Conditions>
    <Setter TargetName="TabBorder" Property="Background" Value="{StaticResource SelectedColor}" />
</MultiDataTrigger>

Однако,нет простого способа узнать, когда дочерний элемент TabControl сфокусирован, чтобы вы могли закрасить рамку синим цветом.

...