代码之家 › 专栏 › 技术社区 › DilbertDave

Silverlight应用程序的DataGrid中的动画-如何?

datagrid animation xaml silverlight

2

DilbertDave · 技术社区 · 17 年前

现在我被卡住了,头痛!

我想在每一行的最后一列添加一个简单的动画(一个绿色矩形在一个红色矩形上移动以显示%的进度),但无法将其连接起来。

我的xaml如下所示:

<data:DataGrid.Columns>
.
.
.
.
<data:DataGridTemplateColumn>
    <data:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <StackPanel x:Name="AnimationPanel">
                <StackPanel.Resources>
                    <Storyboard x:Key="ShowProgress">
                        <DoubleAnimation Storyboard.TargetProperty="Width"
                                        Storyboard.TargetName="goalProgressBar_Complete"
                                         From="0" To="50"
                                        Duration="0:0:5">
                        </DoubleAnimation>
                    </Storyboard>
                </StackPanel.Resources>
                <Rectangle x:Name="goalProgressBar_Complete"
                           Width="1" Height="100"
                           Fill="#0aa60e"></Rectangle>
            </StackPanel>
        </DataTemplate>
    </data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>

这显然是错误的(因为它不起作用),我开始认为,以这种方式向数据网格添加动画是不可能的。我一直在谷歌上努力寻找一段代码,虽然有一些有用的结果,但它们没有任何意义。

我是在尝试做Silverlight根本不支持的事情,还是错过了一些非常简单的事情?

更新: 虽然我还没有脱离困境,但我已经设法让动画与适当的专栏一起运行。

<data:DataGridTemplateColumn>
    <data:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Rectangle x:Name="GoalProgress" Height="100" Width="1" Fill="Green">
                <Rectangle.Triggers>
                    <EventTrigger RoutedEvent="Rectangle.Loaded">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Width"
                                             Storyboard.TargetName="GoalProgress"
                                             From="0" To="50" Duration="0:0:5">
                                    </DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Rectangle.Triggers>
            </Rectangle>
        </DataTemplate>
    </data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>

我现在需要做的就是在“to”属性中绑定%值,并添加我的底层红色矩形。毫无疑问,这不会像我目前所希望的那么容易,但如果不是这样,它就不会有乐趣;-)

3 回复 | 直到 14 年前

1

CodeMonkey1313 17 年前

尝试将其附加到Datagrid的EventTrigger。类似于此:

<Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Name="EntranceAnimation"
                        Storyboard.TargetName="MainWindow" 
                        Storyboard.TargetProperty="Opacity"
                        From="0.0"
                        To="1.0"
                        Duration="0:0:3">
                    </DoubleAnimation>
                </Storyboard>
                </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>

2

1

Jeff Yates 17 年前

在我看来,你并不是在玩故事板。您需要为矩形添加鼠标进入和鼠标离开处理程序,然后相应地播放和停止故事板。确保在enter命令中停止并播放情节提要(否则会产生一些有趣的副作用)。

使现代化

3

0

CodeMonkey1313 17 年前