文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >WPF - MouseLeave和UnSelect fadeout中的UnSelect样式

问WPF - MouseLeave和UnSelect fadeout中的UnSelect样式
EN

Stack Overflow用户
提问于 2014-11-29 08:19:50
回答 1查看 332关注 0票数 0

我正在设计一个列表盒，以产生像MouseLeave和UnSelect fadeout这样的效果。当没有选择任何项目时，它会工作。但一旦一些项目被逐个选择，效果不再适用于他们！即使他们没有被选中。

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

资源字典：

代码语言：javascript
复制
<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

代码语言：javascript
复制
<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>

​

wpf
listbox
styles
fadeout
mouseleave
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-11-29 14:06:39

我在storyboard.You中添加了文件storyboard.You“Stop”，可以设置故事板的FillBehavior以使故事板在完成后停止设置值。

代码语言：javascript
复制
    <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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/27200326

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档