介紹 在MSN messenger的最后一個版本中,當你登錄到你的帳戶時,你可以注意到簡單的動畫文本加載。我嘗試做一些類似的東西,使應用程序加載看起來專業。 一步一步 創建啟動窗口 向WPF應用程序添加一個新窗口。你可以叫它Splashwindow,使窗口無邊框和最頂端,你需要添加一些屬性,如下所示,添加到XAML在窗口標簽或使用屬性面板。 隱藏,復制Code
WindowStyle="None" WindowStartupLocation="CenterScreen" ResizeMode="NoResize" ShowInTaskbar="False" Topmost="True"
改變背景 默認情況下,新窗口內容包含一個網格。我們可以改變網格背景使用線性漸變畫筆添加以下代碼: 隱藏,復制Code
<Grid.Background> <LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0"> <GradientStopColor="#FFB9BBFF"Offset="0"/> <GradientStopColor="White"Offset="1"/> <GradientStopColor="White"Offset="0.72"/> </LinearGradientBrush> </Grid.Background>
它會是這樣的: 添加不透明蒙版 要產生淡入效果,我們需要創建第二個網格,用不透明遮罩覆蓋窗口的下半部分。會導致衰落效應時,文本從邊界網格的中心,將透明面具的上下部分第二網格,並將文本添加到網格顯示加載信息,顯示的順序從中間用新的文本然后搬到隱藏。 下面的XAML代碼創建帶有文本框的掩碼網格: 隱藏,復制Code
<GridVerticalAlignment="Bottom"HorizontalAlignment="Stretch"Height="150"Background="#00FFFFFF"> <Grid.OpacityMask> <LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0"> <GradientStopColor="#00000000"Offset="0.283"/> <GradientStopColor="#00000000"Offset="0.778"/> <GradientStopColor="White"Offset="0.491"/> </LinearGradientBrush> </Grid.OpacityMask> <TextBlockx:Name="txtLoading"TextAlignment="Left"FontSize="16"FontWeight="Normal"Foreground="#FF052045"Text="Beta 0.9"TextWrapping="Wrap"VerticalAlignment="Bottom"HorizontalAlignment="Right"Width="421"> <TextBlock.Effect> <DropShadowEffectBlurRadius="6"Color="#FF797979"Direction="201"Opacity="0.68"ShadowDepth="3"/> </TextBlock.Effect> </TextBlock> </Grid>
網格背景值=#00FFFFFF是完全透明的。我們不需要顯示網格,但沒有背景,遮罩將不會工作。您可以注意到,在前面的XAML中,textblock具有陰影效果。 在設計視圖中,它看起來是這樣的: 創建動畫 在WPF中,你可以定義動畫。你不需要自己寫。在Microsoft Blend中,只需要添加一個新的故事板,定義關鍵幀,並像Flash一樣做出改變,但是WPF會為動畫生成一個可讀的格式。動畫將在窗口資源標簽中定義並通過鍵訪問。下面的代碼顯示了兩個故事板,每個故事板都有一個1秒的持續時間,只是改變textblock的底部邊緣,根據不透明度掩碼從隱藏區域移動到可見區域,反之亦然。 隱藏,復制Code
<Window.Resources> <Storyboardx:Key="showStoryBoard"> <ThicknessAnimationUsingKeyFramesStoryboard.TargetProperty= "(FrameworkElement.Margin)"Storyboard.TargetName="txtLoading"> <EasingThicknessKeyFrameKeyTime="0:0:0"Value="0,0,0,0"/> <EasingThicknessKeyFrameKeyTime="0:0:1"Value="0,0,0,70"/> </ThicknessAnimationUsingKeyFrames> </Storyboard> <Storyboardx:Key="HideStoryBoard"> <ThicknessAnimationUsingKeyFramesStoryboard.TargetProperty= "(FrameworkElement.Margin)"Storyboard.TargetName="txtLoading"> <EasingThicknessKeyFrameKeyTime="0:0:0"Value="0,0,0,70"/> <EasingThicknessKeyFrameKeyTime="0:0:1"Value="0,0,0,150"/> </ThicknessAnimationUsingKeyFrames> </Storyboard> </Window.Resources>
使用后面的代碼 現在我們已經創建了XAML中需要的內容。在后面的代碼中,我們將創建一個線程來做加載工作,並使動畫到文本,首先我們需要訪問動畫,定義兩個故事板對象來訪問窗口資源故事板。 隱藏,復制Code
Storyboard Showboard; Storyboard Hideboard;
在InitializeComponent()調用之后,通過以下代碼訪問窗口資源: 隱藏,復制Code
Showboard = this.Resources["showStoryBoard"] as Storyboard; Hideboard = this.Resources["HideStoryBoard"] as Storyboard;
創建兩個函數-一個顯示文本,一個隱藏如下: 隱藏,復制Code
private void showText(string txt) { txtLoading.Text = txt; BeginStoryboard(Showboard); } private void hideText() { BeginStoryboard(Hideboard); }
我們需要為每個函數創建委托,以使調用形式的加載頭如下: 隱藏,復制Code
private void load() { Thread.Sleep(1000); this.Dispatcher.Invoke(showDelegate, "first data to loading"); Thread.Sleep(2000); //do some loading work this.Dispatcher.Invoke(hideDelegate); Thread.Sleep(2000); this.Dispatcher.Invoke(showDelegate, "second data loading"); Thread.Sleep(2000); //do some loading work this.Dispatcher.Invoke(hideDelegate); Thread.Sleep(2000); this.Dispatcher.Invoke(showDelegate, "last data loading"); Thread.Sleep(2000); //do some loading work this.Dispatcher.Invoke(hideDelegate); //close the window Thread.Sleep(2000); this.Dispatcher.Invoke(DispatcherPriority.Normal, (Action)delegate() { Close(); }); }
顯示閃 有許多方式來顯示閃屏,但最簡單的方式,我認為只是添加以下在InitializeComponent在主窗口: 隱藏,復制Code
new SplashWindow().ShowDialog();
我希望這對你們有用。 的興趣點 主要的一點是使用不透明掩模和訪問故事板背后的形式代碼,以及WPF中動畫的力量。 歷史 2010年10月10日:初任 本文轉載於:http://www.diyabc.com/frontweb/news12007.html