Silverlight 项目 - 滑入和滑出面板 - 如何?

2024-03-14

我不知道这个功能到底是什么,但我想在我的 Silverlight 项目中模拟它。我是一名 C# 开发人员,正在转向 Silverlight 和 Expression Studio (Blend) 以获得更丰富的用户体验。假设我有一些用户控件,并希望它们进入屏幕(滑入和滑出),如我发现的以下站点所示:

http://www.templatemonster.com/silverlight-templates/28722.html http://www.templatemonster.com/silverlight-templates/28722.html

在菜单上,当单击菜单项时,“屏幕”会向左滑动,然后新的“屏幕”会从左向右滑入。

我很想学习这些东西,但不知道这些“功能”叫什么?例如,这些“屏幕”在 xaml 世界中被称为什么?另外,xaml 世界中的“滑入/滑出”被称为什么?有人可以给我指出一篇好的文章/白皮书吗?

预先感谢您的任何建议。


首先Silverlight/WPF是really擅长这种东西。框架人员在设计 xaml 方面做得非常出色,使其尽可能灵活。

话虽这么说,在尝试这些事情之前,确实有很多事情要做 喜欢资源词典 https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc903952%28v=vs.95%29, Triggers https://www.codeproject.com/Articles/18303/A-Guided-Tour-of-WPF-Part-4-Data-templates-and-tri, Actions https://learn.microsoft.com/en-us/dotnet/api/system.windows.eventtrigger.actions?view=net-5.0, 故事板 https://learn.microsoft.com/en-us/previous-versions/dotnet/netframework-4.0/ms742868%28v=vs.100%29, 动画(关键帧/Double https://www.c-sharpcorner.com/uploadfile/yougerthen/your-first-animations-using-xaml-and-silverlight-double-animation-part-ii/...) ,模板化,Styles https://web.archive.org/web/20200109212512/http://geekswithblogs.net:80/GeekAgilistMercenary/archive/2010/03/22/styles-for-xaml-silverlight-amp-wpf.aspx但一旦你掌握了这些隐喻,事情就变得容易多了。

这是带有一些入门读物的纲要。

  • 关键帧动画 http://joel.neubeck.net/2008/01/silverlight-how-to-frame-by-frame-animation/这主要依赖于一些
  • 触发器和操作 https://learn.microsoft.com/en-us/archive/blogs/expression/an-introduction-to-behaviors-triggers-and-actions来协调
  • 视觉状态 https://www.interact-sw.co.uk/iangblog/2008/06/10/visual-state这就是面板“打开”/“关闭”的样子

这是一个示例,供您将这些内容组合在一起。

<Grid x:Name="LayoutRoot">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CentrePanelStates">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="00:00:00">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.Width)">
                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="350"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualTransition>
                <VisualTransition GeneratedDuration="00:00:00.3000000" To="Open">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.Width)">
                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="350">
                                <EasingDoubleKeyFrame.EasingFunction>
                                    <PowerEase EasingMode="EaseIn"/>
                                </EasingDoubleKeyFrame.EasingFunction>
                            </EasingDoubleKeyFrame>
                            <EasingDoubleKeyFrame KeyTime="00:00:00.6000000" Value="800">
                                <EasingDoubleKeyFrame.EasingFunction>
                                    <QuarticEase EasingMode="EaseInOut"/>
                                </EasingDoubleKeyFrame.EasingFunction>
                            </EasingDoubleKeyFrame>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualTransition>
                <VisualTransition From="Open" GeneratedDuration="00:00:00.3000000" To="Closed">
                    <VisualTransition.GeneratedEasingFunction>
                        <BounceEase EasingMode="EaseOut"/>
                    </VisualTransition.GeneratedEasingFunction>
                    <Storyboard>
                        <DoubleAnimation Duration="00:00:00.6000000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.Width)" BeginTime="00:00:00">
                            <DoubleAnimation.EasingFunction>
                                <QuarticEase EasingMode="EaseInOut"/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </VisualTransition>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Open">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.Width)">
                        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="800"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Closed"/>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Rectangle VerticalAlignment="Stretch" 
               HorizontalAlignment="Stretch"
               Fill="#A1808080" />
    <Grid Name="CentrePanel" VerticalAlignment="Center" HorizontalAlignment="Center" Width="800" Height="500">
        <Border CornerRadius="3"
                Background="LightGray" HorizontalAlignment="Left">
            <Grid x:Name="grid" Width="350" Margin="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="40" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="350" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
         
                <Rectangle Fill="Beige" /> 
                <Rectangle Grid.Column="1" Fill="#FFDDDCF5" />

                <Button  
                    Content="Close"  
                    Width="79"
                    HorizontalAlignment="Left" Margin="94,130,0,0" Height="33" VerticalAlignment="Top" >
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <ic:GoToStateAction StateName="Closed"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>   
            
                <Button  Content="Open" Width="81"
                    HorizontalAlignment="Left" Margin="92,85,0,0" Height="32" VerticalAlignment="Top" >
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <ic:GoToStateAction StateName="Open"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>
            </Grid> 
        
        </Border>
    </Grid>        
    
       
</Grid>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Silverlight 项目 - 滑入和滑出面板 - 如何? 的相关文章

随机推荐