Question

我将列表框设置为具有MouseLeave和UnSelect淡出等效果。没有选择项目时它可以工作。但是一旦逐个选择了某些项目，效果就不再适合他们了！即使他们没有被选中。

理想行为是指物品在不断响应事件和财产变化时的行为。我希望列表框项目在未选中时响应MouseOver和MouseLeave事件，并响应取消选择属性更改。

资源词典：

<ResourceDictionary>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Color x:Key="DisabledControlLightColor-LS1">#FFE8EDF9</Color>
    <Color x:Key="SelectedBackgroundColor-LS1">#FFC5CBF9</Color>
    <Color x:Key="MouseOverBackgroundColor-LS1">#FFE5E9F7</Color>
    <Color x:Key="SelectedUnfocusedColor-LS1">#FFDDDDDD</Color>
    <Color x:Key="UnSelectedBackgroundColor-LS1">#00C5CBF9</Color>
    <Color x:Key="ControlLightColor-LS1">White</Color>
    <Color x:Key="ControlMediumColor-LS1">#FF7381F9</Color>
    <Color x:Key="BorderMediumColor-LS1">#FF888888</Color>
    <Color x:Key="DisabledBorderLightColor-LS1">#FFAAAAAA</Color>
    <SolidColorBrush x:Key="ListBorder" Color="#828790"/>
<Style x:Key="LS1-MS" TargetType="ListBox">
        <Setter Property="ItemContainerStyle" Value="{DynamicResource LSItem-LS1}"/>
        <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="MinWidth" Value="120" />
        <Setter Property="MinHeight" Value="95" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <Border Name="Border" BorderThickness="1" CornerRadius="2">
                        <Border.Background>
                            <SolidColorBrush Color="{StaticResource ControlLightColor-LS1}" />
                        </Border.Background>
                        <Border.BorderBrush>
                            <SolidColorBrush Color="{StaticResource BorderMediumColor-LS1}" />
                        </Border.BorderBrush>
                        <ScrollViewer Margin="0" Focusable="false">
                            <StackPanel Margin="2" IsItemsHost="True" />
                        </ScrollViewer>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="Border" Property="Background">
                                <Setter.Value>
                                    <SolidColorBrush Color="{StaticResource DisabledControlLightColor-LS1}" />
                                </Setter.Value>
                            </Setter>
                            <Setter TargetName="Border" Property="BorderBrush">
                                <Setter.Value>
                                    <SolidColorBrush Color="{DynamicResource DisabledBorderLightColor-LS1}" />
                                </Setter.Value>

                            </Setter>
                        </Trigger>
                        <Trigger Property="IsGrouping" Value="true">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="LSItem-LS1" TargetType="ListBoxItem">
        <Setter Property="SnapsToDevicePixels"
          Value="true" />
        <Setter Property="OverridesDefaultStyle"
          Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="MouseEnterBC">
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverBackgroundColor-LS1}"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="MouseLeaveFadeOut">
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="SelectBC">
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor-LS1}"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="unSelectBcFadeOut">
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <Border x:Name="Border" Padding="1" SnapsToDevicePixels="true" BorderThickness="1">
                        <Border.Background>
                            <SolidColorBrush Color="{DynamicResource UnSelectedBackgroundColor-LS1}"/>
                        </Border.Background>
                        <Border.BorderBrush>
                            <SolidColorBrush Color="{DynamicResource UnSelectedBackgroundColor-LS1}"/>
                        </Border.BorderBrush>

                        <ContentPresenter />
                    </Border>




                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.ExitActions>
                                <BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard3" Storyboard="{StaticResource MouseLeaveFadeOut}"/>
                            </Trigger.ExitActions>
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard" Storyboard="{StaticResource MouseEnterBC}"/>
                            </Trigger.EnterActions>
                        </Trigger>

                        <EventTrigger RoutedEvent="Selector.Selected">
                            <BeginStoryboard x:Name="SelectBC_BeginStoryboard2" Storyboard="{StaticResource SelectBC}"/>
                        </EventTrigger>


                        <EventTrigger RoutedEvent="Selector.Unselected">
                            <BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard1" Storyboard="{StaticResource MouseLeaveFadeOut}"/>
                            <StopStoryboard BeginStoryboardName="SelectBC_BeginStoryboard2"/>
                        </EventTrigger>


                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

MainWindow.Xaml

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <ListBox Style="{DynamicResource LS1-MS}" Margin="42,10,72,10">
        <ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
        <ListBoxItem Content="Test List Box Items"/>
        <ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
        <ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
        <ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
        <ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
        <ListBoxItem Content="Test List Box Items"/>
        <ListBoxItem Content="Test List Box Items"/>
        <ListBoxItem Content="Test List Box Items"/>
    </ListBox>

</Grid>

Answer 1

你永远不会停止故事板，所以最终他们都在运行。我在故事板中添加了文件FillBehavior =“Stop”。你可以将故事板的FillBehavior设置为停止，这样故事板将停止设置完成后的值。

    <Style x:Key="LSItem-LS1" TargetType="ListBoxItem">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="MouseEnterBC">
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverBackgroundColor-LS1}"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="MouseLeaveFadeOut" FillBehavior="Stop">
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="SelectBC">
                            <ColorAnimationUsingKeyFrames  Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor-LS1}"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="unSelectBcFadeOut" FillBehavior="Stop">
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <Border x:Name="Border" Padding="1" SnapsToDevicePixels="true" BorderThickness="1">
                        <Border.Background>
                            <SolidColorBrush Color="{DynamicResource UnSelectedBackgroundColor-LS1}"/>
                        </Border.Background>
                        <Border.BorderBrush>
                            <SolidColorBrush Color="{DynamicResource UnSelectedBackgroundColor-LS1}"/>
                        </Border.BorderBrush>

                        <ContentPresenter />
                    </Border>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True" />
                                <Condition Property="IsSelected" Value="False" />
                            </MultiTrigger.Conditions>
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard" Storyboard="{StaticResource MouseEnterBC}"/>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard3" Storyboard="{StaticResource MouseLeaveFadeOut}"/>
                            </MultiTrigger.ExitActions>
                        </MultiTrigger>          
                        <Trigger Property="IsSelected" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard  x:Name="SelectBC_BeginStoryboard2" Storyboard="{StaticResource SelectBC}"/>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource MouseLeaveFadeOut}"></BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>                     
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

WPF中的ListBox样式 - MouseLeave和UnSelect淡出

1 个答案: