WPF加載啟動畫面


main.jpg 介紹 在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>

它會是這樣的: intial.jpg 添加不透明蒙版 要產生淡入效果,我們需要創建第二個網格,用不透明遮罩覆蓋窗口的下半部分。會導致衰落效應時,文本從邊界網格的中心,將透明面具的上下部分第二網格,並將文本添加到網格顯示加載信息,顯示的順序從中間用新的文本然后搬到隱藏。 下面的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具有陰影效果。 在設計視圖中,它看起來是這樣的: masked.jpg 創建動畫 在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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM