WPF - ListBoxItem交替背景和故事板

时间:2017-09-17 07:45:10

标签: wpf xaml storyboard listboxitem

对于WPF原型,我想完成以下任务:

我希望显示一个列表框,其中每个项目看起来像"文本Button1 Button2"。它们中的所有3个都绑定到Observable集合。 Text显示一个字符串,Button1和Button2显示一个double。所以没有问题。我想扩展功能如下,并且不知道如何以最佳方式实现这一目标:

1)列表框中的条目应具有基于索引的交替背景。即 如果(index%2)== true,那么background = red, 其他背景=绿色。 索引可能会更改,后台应自动更新。

2)如果按钮文本的双重值增加,按钮应突出显示绿色一秒钟, 否则,如果按钮文本的双重值减小,按钮应突出显示红色一秒, 否则按钮应该什么都不做。

有人可以帮助我吗?

Thanke,br

//编辑: 对于#2,我现在尝试了以下内容:拥有2个故事板,绑定到数据触发器。我的问题是,它没有突出显示每个触发的变化是否有任何想法?

    <Storyboard x:Key="ValueDecreaseAnimationStoryBoard" Name="ValueDecreaseAnimationStoryBoard">
        <ColorAnimation
            Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
            To="Red"
            AutoReverse="True" 
            Duration="0:0:0.5" />
    </Storyboard>  <Storyboard x:Key="ValueIncreaseAnimationStoryBoard" Name="ValueIncreaseAnimationStoryBoard">
        <ColorAnimation
            Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
            To="Green"
            AutoReverse="True"                 
            Duration="0:0:0.5" />
    </Storyboard>


    <Style x:Key="ValueTriggerStyle" TargetType="{x:Type Button}">
        <Setter Property="Background">
            <Setter.Value>
                <SolidColorBrush Color="LightGray" />
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=Value1Trend}" Value="{x:Static local:Trend.Decreased}">
                <DataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource ValueDecreaseAnimationStoryBoard}" />
                </DataTrigger.EnterActions>
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=Value1Trend}" Value="{x:Static local:Trend.Increased}">
                <DataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource ValueIncreaseAnimationStoryBoard}" />
                </DataTrigger.EnterActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>

0 个答案:

没有答案