Вопрос:

Animate XAML ListBox Item Background Colour

wpf xaml

100 просмотра

1 ответ

6318 Репутация автора

I have the following XAML that displays a grid of Summaries

<ListBox ItemsSource="{Binding Items}" Margin="336,60,10,63">
    <ListBox.Resources>
        <Style TargetType="{x:Type ListBoxItem}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Status}" Value="1">
                    <Setter Property="Background" Value="Blue" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Status}" Value="2">
                    <Setter Property="Background" Value="Green" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Status}" Value="4">
                    <Setter Property="Background" Value="Orange" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Status}" Value="8">
                    <Setter Property="Background" Value="Red" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Status}" Value="16">
                    <Setter Property="Background" Value="Gray" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Status}" Value="32">
                    <Setter Property="Background" Value="DarkGray" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ListBox.Resources>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <Label Content="{Binding DisplayName}" />
                <Label Margin="20,0,0,0" Content="{Binding CurrentState}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid  Columns="4"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

Currently the Background Colour of the ListBox item is set based on the value of Status, when the value changes the BackGround colour changes correctly.

What I would like to do is Animate/transition from one colour to the next as the value of State changes.

I've been having a search on here and have come across this post which suggests I need to be using

<BeginStoryboard>
    <Storyboard>
        <ColorAnimation Storyboard.TargetName="BackgroundGrid" From="Red" To="Blue" Duration="0:0:4" Storyboard.TargetProperty="Background" />
    </Storyboard>
</BeginStoryboard>

presumably inside my <DataTrigger></DataTrigger>

Problem 1: The first thing I noticed is the From colour is specified in the example above but I wont know what colour the item is transitioning from

Problem 2: It appears that <BeginStoryBoard></BeginStoryBoard> isn't valid syntax inside a <DataTrigger></DataTrigger>

As you can probably tell this is the first time I've played around with XAML animations so any help is appreciated.

Автор: OneSHOT Источник Размещён: 22.08.2016 09:47

Ответы (1)


2 плюса

393 Репутация автора

Решение

For the first problem as mentioned by @Stewbob don't include the From part in your animation, it will work fine. You can solve your second problem by defining Enter and Exit Action on your DataTrigger like this:

                    <DataTrigger Binding="" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation> //your color animation </ColorAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                             <ColorAnimation> <ColorAnimation />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>

One thing to note here is that EnterActions and ExitActions set values permanently while simple Setters will only set temporary values that will be applied as long as the property condition is fulfilled in the Trigger.

Автор: Sameed Размещён: 23.08.2016 07:13
Вопросы из категории :
32x32