Silverlight 项目首页动画效果
来自 Microsoft开源项目Microsoft Health通用用户界面
通过该项目微软提供很多标准控件和自定义控件给用户,很多控件是属于开源的.
在Codeplex可以下载.
先取其中一个效果,运行如下：
XAML代码：
View Code
<
UserControl
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local ="clr-namespace:Nhs.Cui.Futures.Demonstrator.Controls;assembly=Nhs.Cui.Futures.Demonstrator.Controls"
x:Class ="SilverlightApplication1.MainPage"
Width ="640" Height ="480" >
< Grid x:Name ="LayoutRoot" Background ="White" >
< local:DockPanelContainer x:Name ="dockPanelContainer1" Margin ="0, 5, 0, 5" >
< local:DockPanel x:Name ="adminDockPanel1" Height ="813" IsTabStop ="False" Margin ="10, 10, 10, 10" MinHeight ="50" MinWidth ="100" Width ="275" >
< local:DockPanel.HeaderTemplate >
< ControlTemplate >
< Grid Height ="40" IsHitTestVisible ="False" VerticalAlignment ="Top" >
< Grid.RowDefinitions >
< RowDefinition />
</ Grid.RowDefinitions >
< Border CornerRadius ="2, 2, 0, 0" >
< Border.Background >
< LinearGradientBrush EndPoint ="0.5, 1" StartPoint ="0.5, 0" >
< GradientStopCollection >
< GradientStop Offset ="0.013" >#FF85CA79 </ GradientStop >
< GradientStop Offset ="1" >#FF4C8A24 </ GradientStop >
</ GradientStopCollection >
</ LinearGradientBrush >
</ Border.Background >
</ Border >
< TextBlock FontFamily ="Arial" FontSize ="14" FontWeight ="Bold" Foreground ="#FFFFFFFF" HorizontalAlignment ="Left" Margin ="8, 8, 0, 0" Text ="Repeat Prescription Requests" VerticalAlignment ="Center" />
</ Grid >
</ ControlTemplate >
</ local:DockPanel.HeaderTemplate >
< TextBlock Text ="ok" />
</ local:DockPanel >
< local:DockPanel x:Name ="adminDockPanel2" Height ="720.5" IsTabStop ="False" Margin ="10, 10, 10, 10" MinHeight ="50" MinWidth ="100" Width ="275" Canvas.Left ="180" Canvas.Top ="0" >
< local:DockPanel.HeaderTemplate >
< ControlTemplate >
< Grid Height ="40" IsHitTestVisible ="False" VerticalAlignment ="Top" >
< Grid.RowDefinitions >
< RowDefinition />
</ Grid.RowDefinitions >
< Border CornerRadius ="2, 2, 0, 0" >
< Border.Background >
< LinearGradientBrush EndPoint ="0.5, 1" StartPoint ="0.5, 0" >
< GradientStopCollection >
< GradientStop Offset ="0" >#FF58A7B0 </ GradientStop >
< GradientStop Offset ="1" >#FF2E8B99 </ GradientStop >
</ GradientStopCollection >
</ LinearGradientBrush >
</ Border.Background >
</ Border >
< TextBlock FontFamily ="Arial" FontSize ="14" FontWeight ="Bold" Foreground ="#FFFFFFFF" HorizontalAlignment ="Left" Margin ="8, 8, 0, 0" Text ="Reports" VerticalAlignment ="Center" />
</ Grid >
</ ControlTemplate >
</ local:DockPanel.HeaderTemplate >
< TextBlock Text ="good" />
</ local:DockPanel >
< local:DockPanel x:Name ="adminDockPanel3" Height ="720.5" IsTabStop ="False" Margin ="10, 10, 10, 10" MinHeight ="50" MinWidth ="100" Width ="275" Canvas.Left ="180" Canvas.Top ="0" >
< local:DockPanel.HeaderTemplate >
< ControlTemplate >
< Grid Height ="50" IsHitTestVisible ="False" VerticalAlignment ="Top" >
< Grid.RowDefinitions >
< RowDefinition />
< RowDefinition Height ="20" />
</ Grid.RowDefinitions >
< Border Grid.RowSpan ="2" CornerRadius ="2, 2, 0, 0" >
< Border.Background >
< LinearGradientBrush EndPoint ="0.5, 1" StartPoint ="0.5, 0" >
< GradientStopCollection >
< GradientStop Offset ="0" >#FF4D8D8F </ GradientStop >
< GradientStop Offset ="1" >#FF166470 </ GradientStop >
</ GradientStopCollection >
</ LinearGradientBrush >
</ Border.Background >
</ Border >
< TextBlock FontFamily ="Arial" FontSize ="14" FontWeight ="Bold" Foreground ="#FFFFFFFF" HorizontalAlignment ="Left" Margin ="8, 8, 0, 0" Text ="Email Inbox" VerticalAlignment ="Center" />
< Rectangle Grid.Row ="1" Stretch ="Fill" >
< Rectangle.Fill >
< LinearGradientBrush EndPoint ="0.5, 1" StartPoint ="0.5, 0" >
< GradientStopCollection >
< GradientStop Offset ="0" >#AA000000 </ GradientStop >
< GradientStop Offset ="1" >#FF000000 </ GradientStop >
</ GradientStopCollection >
</ LinearGradientBrush >
</ Rectangle.Fill >
</ Rectangle >
< TextBlock Grid.Row ="1" FontFamily ="Arial" Foreground ="#FFFFFFFF" HorizontalAlignment ="Left" Margin ="5, 0, 0, 0" Text ="Connected to Microsoft Exchange" VerticalAlignment ="Center" />
</ Grid >
</ ControlTemplate >
</ local:DockPanel.HeaderTemplate >
< TextBlock Text ="good" />
</ local:DockPanel >
< local:DockPanel x:Name ="adminDockPanel4" Height ="720.5" IsTabStop ="False" Margin ="10, 10, 10, 10" MinHeight ="50" MinWidth ="100" Width ="275" Canvas.Left ="180" Canvas.Top ="0" >
< local:DockPanel.HeaderTemplate >
< ControlTemplate >
< Grid Height ="42" IsHitTestVisible ="False" Margin ="5, 0, 0, 0" VerticalAlignment ="Top" >
< StackPanel Orientation ="Horizontal" VerticalAlignment ="Center" >
< Grid Height ="28" HorizontalAlignment ="Left" Margin ="5, 0, 0, 0" RenderTransformOrigin ="0.5, 0.5" VerticalAlignment ="Center" Width ="36" >
< Grid.RenderTransform >
< ScaleTransform ScaleX ="0.85" ScaleY ="0.85" />
</ Grid.RenderTransform >
< Path Stretch ="Fill" Stroke ="#FF1F4F01" >
< Path.Fill >
< LinearGradientBrush EndPoint ="0.5, 1" StartPoint ="0.5, 0" >
< GradientStopCollection >
< GradientStop Offset ="0" >#FF63B92C </ GradientStop >
< GradientStop Offset ="1" >#FF1F4F01 </ GradientStop >
</ GradientStopCollection >
</ LinearGradientBrush >
</ Path.Fill >
</ Path >
< Rectangle Fill ="#FFFF0011" Height ="10" HorizontalAlignment ="Center" Margin ="0, 12, 0, 0" Stretch ="Fill" VerticalAlignment ="Center" Width ="3" />
< Rectangle Fill ="#FFFF0011" Height ="10" Margin ="16.5, 0, 16.5, 3" RenderTransformOrigin ="0.5, 0.5" Stretch ="Fill" VerticalAlignment ="Bottom" >
< Rectangle.RenderTransform >
< TransformGroup >
< TransformCollection >
< ScaleTransform />
< SkewTransform />
< RotateTransform Angle ="90" />
< TranslateTransform />
</ TransformCollection >
</ TransformGroup >
</ Rectangle.RenderTransform >
</ Rectangle >
</ Grid >
< TextBlock FontFamily ="Arial" FontSize ="14" FontWeight ="Bold" Foreground ="#FF19386B" HorizontalAlignment ="Left" Margin ="8, 0, 0, 0" Text ="Practice Noticeboard" VerticalAlignment ="Center" />
</ StackPanel >
< Rectangle Fill ="#FF999999" Height ="1" Stretch ="Fill" VerticalAlignment ="Bottom" />
</ Grid >
</ ControlTemplate >
</ local:DockPanel.HeaderTemplate >
< TextBlock Text ="good" />
</ local:DockPanel >
< local:DockPanel x:Name ="adminDockPanel5" Height ="720.5" IsTabStop ="False" Margin ="10, 10, 10, 10" MinHeight ="50" MinWidth ="100" Width ="275" Canvas.Left ="180" Canvas.Top ="0" >
< TextBlock Text ="good" />
</ local:DockPanel >
< local:DockPanel x:Name ="adminDockPanel6" Height ="720.5" IsTabStop ="False" Margin ="10, 10, 10, 10" MinHeight ="50" MinWidth ="100" Width ="275" Canvas.Left ="180" Canvas.Top ="0" >
< TextBlock Text ="good" />
</ local:DockPanel >
< local:DockPanel x:Name ="adminDockPanel7" Height ="720.5" IsTabStop ="False" Margin ="10, 10, 10, 10" MinHeight ="50" MinWidth ="100" Width ="275" Canvas.Left ="180" Canvas.Top ="0" >
< TextBlock Text ="good" />
</ local:DockPanel >
< local:DockPanel x:Name ="adminDockPanel8" Height ="720.5" IsTabStop ="False" Margin ="10, 10, 10, 10" MinHeight ="50" MinWidth ="100" Width ="275" Canvas.Left ="180" Canvas.Top ="0" >
< TextBlock Text ="good" />
</ local:DockPanel >
</ local:DockPanelContainer >
</ Grid >
</ UserControl >
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local ="clr-namespace:Nhs.Cui.Futures.Demonstrator.Controls;assembly=Nhs.Cui.Futures.Demonstrator.Controls"
x:Class ="SilverlightApplication1.MainPage"
Width ="640" Height ="480" >
< Grid x:Name ="LayoutRoot" Background ="White" >
< local:DockPanelContainer x:Name ="dockPanelContainer1" Margin ="0, 5, 0, 5" >
< local:DockPanel x:Name ="adminDockPanel1" Height ="813" IsTabStop ="False" Margin ="10, 10, 10, 10" MinHeight ="50" MinWidth ="100" Width ="275" >
< local:DockPanel.HeaderTemplate >
< ControlTemplate >
< Grid Height ="40" IsHitTestVisible ="False" VerticalAlignment ="Top" >
< Grid.RowDefinitions >
< RowDefinition />
</ Grid.RowDefinitions >
< Border CornerRadius ="2, 2, 0, 0" >
< Border.Background >
< LinearGradientBrush EndPoint ="0.5, 1" StartPoint ="0.5, 0" >
< GradientStopCollection >
< GradientStop Offset ="0.013" >#FF85CA79 </ GradientStop >
< GradientStop Offset ="1" >#FF4C8A24 </ GradientStop >
</ GradientStopCollection >
</ LinearGradientBrush >
</ Border.Background >
</ Border >
< TextBlock FontFamily ="Arial" FontSize ="14" FontWeight ="Bold" Foreground ="#FFFFFFFF" HorizontalAlignment ="Left" Margin ="8, 8, 0, 0" Text ="Repeat Prescription Requests" VerticalAlignment ="Center" />
</ Grid >
</ ControlTemplate >
</ local:DockPanel.HeaderTemplate >
< TextBlock Text ="ok" />
</ local:DockPanel >
< local:DockPanel x:Name ="adminDockPanel2" Height ="720.5" IsTabStop ="False" Margin ="10, 10, 10, 10" MinHeight ="50" MinWidth ="100" Width ="275" Canvas.Left ="180" Canvas.Top ="0" >
< local:DockPanel.HeaderTemplate >
< ControlTemplate >
< Grid Height ="40" IsHitTestVisible ="False" VerticalAlignment ="Top" >
< Grid.RowDefinitions >
< RowDefinition />
</ Grid.RowDefinitions >
< Border CornerRadius ="2, 2, 0, 0" >
< Border.Background >
< LinearGradientBrush EndPoint ="0.5, 1" StartPoint ="0.5, 0" >
< GradientStopCollection >
< GradientStop Offset ="0" >#FF58A7B0 </ GradientStop >
< GradientStop Offset ="1" >#FF2E8B99 </ GradientStop >
</ GradientStopCollection >
</ LinearGradientBrush >
</ Border.Background >
</ Border >
< TextBlock FontFamily ="Arial" FontSize ="14" FontWeight ="Bold" Foreground ="#FFFFFFFF" HorizontalAlignment ="Left" Margin ="8, 8, 0, 0" Text ="Reports" VerticalAlignment ="Center" />
</ Grid >
</ ControlTemplate >
</ local:DockPanel.HeaderTemplate >
< TextBlock Text ="good" />
</ local:DockPanel >
< local:DockPanel x:Name ="adminDockPanel3" Height ="720.5" IsTabStop ="False" Margin ="10, 10, 10, 10" MinHeight ="50" MinWidth ="100" Width ="275" Canvas.Left ="180" Canvas.Top ="0" >
< local:DockPanel.HeaderTemplate >
< ControlTemplate >
< Grid Height ="50" IsHitTestVisible ="False" VerticalAlignment ="Top" >
< Grid.RowDefinitions >
< RowDefinition />
< RowDefinition Height ="20" />
</ Grid.RowDefinitions >
< Border Grid.RowSpan ="2" CornerRadius ="2, 2, 0, 0" >
< Border.Background >
< LinearGradientBrush EndPoint ="0.5, 1" StartPoint ="0.5, 0" >
< GradientStopCollection >
< GradientStop Offset ="0" >#FF4D8D8F </ GradientStop >
< GradientStop Offset ="1" >#FF166470 </ GradientStop >
</ GradientStopCollection >
</ LinearGradientBrush >
</ Border.Background >
</ Border >
< TextBlock FontFamily ="Arial" FontSize ="14" FontWeight ="Bold" Foreground ="#FFFFFFFF" HorizontalAlignment ="Left" Margin ="8, 8, 0, 0" Text ="Email Inbox" VerticalAlignment ="Center" />
< Rectangle Grid.Row ="1" Stretch ="Fill" >
< Rectangle.Fill >
< LinearGradientBrush EndPoint ="0.5, 1" StartPoint ="0.5, 0" >
< GradientStopCollection >
< GradientStop Offset ="0" >#AA000000 </ GradientStop >
< GradientStop Offset ="1" >#FF000000 </ GradientStop >
</ GradientStopCollection >
</ LinearGradientBrush >
</ Rectangle.Fill >
</ Rectangle >
< TextBlock Grid.Row ="1" FontFamily ="Arial" Foreground ="#FFFFFFFF" HorizontalAlignment ="Left" Margin ="5, 0, 0, 0" Text ="Connected to Microsoft Exchange" VerticalAlignment ="Center" />
</ Grid >
</ ControlTemplate >
</ local:DockPanel.HeaderTemplate >
< TextBlock Text ="good" />
</ local:DockPanel >
< local:DockPanel x:Name ="adminDockPanel4" Height ="720.5" IsTabStop ="False" Margin ="10, 10, 10, 10" MinHeight ="50" MinWidth ="100" Width ="275" Canvas.Left ="180" Canvas.Top ="0" >
< local:DockPanel.HeaderTemplate >
< ControlTemplate >
< Grid Height ="42" IsHitTestVisible ="False" Margin ="5, 0, 0, 0" VerticalAlignment ="Top" >
< StackPanel Orientation ="Horizontal" VerticalAlignment ="Center" >
< Grid Height ="28" HorizontalAlignment ="Left" Margin ="5, 0, 0, 0" RenderTransformOrigin ="0.5, 0.5" VerticalAlignment ="Center" Width ="36" >
< Grid.RenderTransform >
< ScaleTransform ScaleX ="0.85" ScaleY ="0.85" />
</ Grid.RenderTransform >
< Path Stretch ="Fill" Stroke ="#FF1F4F01" >
< Path.Fill >
< LinearGradientBrush EndPoint ="0.5, 1" StartPoint ="0.5, 0" >
< GradientStopCollection >
< GradientStop Offset ="0" >#FF63B92C </ GradientStop >
< GradientStop Offset ="1" >#FF1F4F01 </ GradientStop >
</ GradientStopCollection >
</ LinearGradientBrush >
</ Path.Fill >
</ Path >
< Rectangle Fill ="#FFFF0011" Height ="10" HorizontalAlignment ="Center" Margin ="0, 12, 0, 0" Stretch ="Fill" VerticalAlignment ="Center" Width ="3" />
< Rectangle Fill ="#FFFF0011" Height ="10" Margin ="16.5, 0, 16.5, 3" RenderTransformOrigin ="0.5, 0.5" Stretch ="Fill" VerticalAlignment ="Bottom" >
< Rectangle.RenderTransform >
< TransformGroup >
< TransformCollection >
< ScaleTransform />
< SkewTransform />
< RotateTransform Angle ="90" />
< TranslateTransform />
</ TransformCollection >
</ TransformGroup >
</ Rectangle.RenderTransform >
</ Rectangle >
</ Grid >
< TextBlock FontFamily ="Arial" FontSize ="14" FontWeight ="Bold" Foreground ="#FF19386B" HorizontalAlignment ="Left" Margin ="8, 0, 0, 0" Text ="Practice Noticeboard" VerticalAlignment ="Center" />
</ StackPanel >
< Rectangle Fill ="#FF999999" Height ="1" Stretch ="Fill" VerticalAlignment ="Bottom" />
</ Grid >
</ ControlTemplate >
</ local:DockPanel.HeaderTemplate >
< TextBlock Text ="good" />
</ local:DockPanel >
< local:DockPanel x:Name ="adminDockPanel5" Height ="720.5" IsTabStop ="False" Margin ="10, 10, 10, 10" MinHeight ="50" MinWidth ="100" Width ="275" Canvas.Left ="180" Canvas.Top ="0" >
< TextBlock Text ="good" />
</ local:DockPanel >
< local:DockPanel x:Name ="adminDockPanel6" Height ="720.5" IsTabStop ="False" Margin ="10, 10, 10, 10" MinHeight ="50" MinWidth ="100" Width ="275" Canvas.Left ="180" Canvas.Top ="0" >
< TextBlock Text ="good" />
</ local:DockPanel >
< local:DockPanel x:Name ="adminDockPanel7" Height ="720.5" IsTabStop ="False" Margin ="10, 10, 10, 10" MinHeight ="50" MinWidth ="100" Width ="275" Canvas.Left ="180" Canvas.Top ="0" >
< TextBlock Text ="good" />
</ local:DockPanel >
< local:DockPanel x:Name ="adminDockPanel8" Height ="720.5" IsTabStop ="False" Margin ="10, 10, 10, 10" MinHeight ="50" MinWidth ="100" Width ="275" Canvas.Left ="180" Canvas.Top ="0" >
< TextBlock Text ="good" />
</ local:DockPanel >
</ local:DockPanelContainer >
</ Grid >
</ UserControl >
