WPF - ListBoxItem alternating background and story board

58 Views Asked by At

for a WPF prototype I would like to accomplish the following:

I want display a listbox where each item looks like "Text Button1 Button2". All the 3 of them are bound to an Observable collection. Text displays a string, Button1 and Button2 display a double. SO far no problem. I would like to extend the functionality as follows and have no idea in how to accomplish this in the best possible practice:

1) The entries in the listbox should have an alternating background, based on the index. ie If (index % 2) == true, then background = red, else background = green. The index might change and the background should update automatically.

2) If the value of double bound to the button text increases, the button should be highlighted green for a second, else if the value of the double bound to the button text decreases, the button should be highlighted red for a second, else the button should do nothing.

Can someone help me?

Thanke, br

// edit: For #2 I now tried the following: Having 2 Storyboards, bound to data triggers. My problem is, that it does not highlight do each of the triggered changes Any ideas?

    <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

There are 0 best solutions below