Search code examples
c#wpfxamlwpf-controlswpf-style

The IsFocused property does not work for ListView in WPF? How can i change the border color of ListView when i press tab or click on the ListView?


I am designing a ListView and I want to change its border color when it is focused, IsFocused property dosen't seem to work for ListView. Is there any property similar to IsFocused for Listview?

 <Style x:Key="{x:Type ListView}" TargetType="ListView">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="BorderBrush" Value="{StaticResource EnabledListViewBorder}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListView}">
                    <Border x:Name="Border"
                            Background="Transparent"
                            Padding="{TemplateBinding Padding}"
                            BorderBrush="{StaticResource EnabledListViewBorder}"
                            BorderThickness="1">
                        <ScrollViewer Style="{DynamicResource ListViewColumnHeaderScrollViewer}">
                            <ItemsPresenter />
                        </ScrollViewer>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsGrouping" Value="True">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="False" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DiabledListViewBorder}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DiabledListViewBorder}" />
                        </Trigger>                      
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="GotFocus">
                <BeginStoryboard>
                    <Storyboard Duration="0:0:0:1" AutoReverse="False">
                        <ColorAnimation
                            Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
                            FillBehavior="HoldEnd" From="Red" To="Red"/>                        
                    </Storyboard>                    
                </BeginStoryboard>                
            </EventTrigger>
            <EventTrigger RoutedEvent="LostFocus">
                <BeginStoryboard>
                    <Storyboard AutoReverse="False" Duration="0:0:0:1">
                        <ColorAnimation
                            Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
                            FillBehavior="HoldEnd" From="Green" To="Green"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>

I have updated the question with my Sourcecode with the solution provided but the Border Color isn't changing. What am i missing here.


Solution

  • You can use Style.Triggers to handle GotFocus and LostFocus events.

    <ListView.Style>
        <Style TargetType="ListView">
            <Style.Triggers>
                <EventTrigger RoutedEvent="GotFocus">
                    <BeginStoryboard>
                        <Storyboard Duration="0:0:0:1" AutoReverse="False">
                            <ColorAnimation 
                            Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" 
                            FillBehavior="HoldEnd" From="Red" To="Red"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="LostFocus">
                    <BeginStoryboard>
                        <Storyboard AutoReverse="False" Duration="0:0:0:1">
                            <ColorAnimation 
                            Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" 
                            FillBehavior="HoldEnd" From="Green" To="Green" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </ListView.Style>
    

    Update:
    If you have rewritten the ControlTemplate, then delete Style.Triggers part and move EventTriggers from it to the ControlTemplate.Triggers. Additionally you have to set Storyboard.TargetName="Border".

    <EventTrigger RoutedEvent="LostFocus">
        <BeginStoryboard>
            <Storyboard AutoReverse="False" Duration="0:0:0:1" Storyboard.TargetName="Border" >
                <ColorAnimation
    Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" 
    FillBehavior="HoldEnd" From="Green" To="Green" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>