将带有DataTriggers的WPF Swipe Transition Datatemplate转换为Silverlight4

时间:2012-02-09 07:19:20

标签: wpf silverlight xaml transition datatrigger

我正在使用的WPF应用程序中有以下datatemplate。这提供了一个很棒的滑动过渡,最初取自this blog post

我想做的是在Silverlight 4中使用相同的功能。令我惊讶的是,SL4缺少DataTriggers和某些故事板。任何人都能明白这些等价物吗?或者,您是否可以指向我可以挖掘的Silverlight中的网上滑动过渡?谢谢!

滑动转换

<DataTemplate x:Key="SwipeTransition">
        <DataTemplate.Resources>
            <Visibility x:Key="Visible">Visible</Visibility>
            <Storyboard x:Key="SlideStoryboard">
                <DoubleAnimation 
                    Storyboard.TargetName="container" 
                    Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"
                    From="0" FillBehavior="Stop"
                    Duration="0:0:0.3"
                    DecelerationRatio="1.0"/>
                <ObjectAnimationUsingKeyFrames 
                    Storyboard.TargetName="a" 
                    Storyboard.TargetProperty="Visibility" 
                    Duration="0:0:0.3" FillBehavior="Stop">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource Visible}" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames 
                    Storyboard.TargetName="b"
                    Storyboard.TargetProperty="Visibility" 
                    Duration="0:0:0.3" FillBehavior="Stop">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource Visible}" />
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </DataTemplate.Resources>
        <Grid ClipToBounds="True">
            <Common:Transition x:Name="transition" Source="{Binding}" />
            <Grid Name="container">
                <Grid.RenderTransform>
                    <TranslateTransform X="{Binding ElementName=container, Path=ActualWidth, Converter={StaticResource NegativeConverter}}" />
                </Grid.RenderTransform>
                <ContentControl Name="a" Visibility="Hidden" Content="{Binding ElementName=transition, Path=DisplayA}" />
                <ContentControl Name="b" Visibility="Hidden" Content="{Binding ElementName=transition, Path=DisplayB}" />
            </Grid>
        </Grid>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding ElementName=transition, Path=State}" Value="A">
                <Setter TargetName="a" Property="Visibility" Value="Visible" />
                <Setter TargetName="a" Property="RenderTransform">
                    <Setter.Value>
                        <TranslateTransform X="{Binding ElementName=container, Path=ActualWidth}" />
                    </Setter.Value>
                </Setter>
                <DataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource SlideStoryboard}" />
                </DataTrigger.EnterActions>
            </DataTrigger>
            <DataTrigger Binding="{Binding ElementName=transition, Path=State}" Value="B">
                <Setter TargetName="b" Property="Visibility" Value="Visible" />
                <Setter TargetName="b" Property="RenderTransform">
                    <Setter.Value>
                        <TranslateTransform X="{Binding ElementName=container, Path=ActualWidth}" />
                    </Setter.Value>
                </Setter>
                <DataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource SlideStoryboard}" />
                </DataTrigger.EnterActions>
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>     

应用如下

<ContentControl x:Name="_exampleView" Content="{Binding SelectedExample.View}"
                            ContentTemplate="{StaticResource SwipeTransition}"/>

1 个答案:

答案 0 :(得分:1)

首先要非常感谢这个链接。

可能你应该看看这篇文章How to create a WPF-like data trigger in Silverlight?他们说VSM是获得银光的方法。