2008-12-20 96 views
1

我有一個2列網格的窗口。 左欄包含一個瀏覽器控件WPF - 如何顯示Web瀏覽器控件的加載消息

我很想顯示一個小窗口或其他東西來顯示網頁仍在加載的 。

我該怎麼做?我可以在瀏覽器前面顯示的第二列 中有一個浮動窗口嗎?請解釋一下如何?

馬爾科姆

謝謝bendwey作品像魅力。 只有東西找不到我可以使用的GIF,它會顯示移動/旋轉之類的東西或覆蓋 任何想法在哪裏?

回答

3

我已經完成這個的方法是通過創建一個暴露的Show()和Hide()方法的用戶控件。以下是代碼。 Loading.xaml:

<UserControl x:Class="UK.Budgeting.XBAP.Loading" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="200"> 
    <UserControl.Resources> 
    <Color x:Key="FilledColor" A="255" B="155" R="155" G="155"/> 
    <Color x:Key="UnfilledColor" A="0" B="155" R="155" G="155"/> 

    <Storyboard x:Key="Animation0" FillBehavior="Stop" BeginTime="00:00:00.0" RepeatBehavior="Forever"> 
     <ColorAnimationUsingKeyFrames Storyboard.TargetName="_00" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
     <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/> 
     <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/> 
     </ColorAnimationUsingKeyFrames> 
    </Storyboard> 

    <Storyboard x:Key="Animation1" BeginTime="00:00:00.2" RepeatBehavior="Forever"> 
     <ColorAnimationUsingKeyFrames Storyboard.TargetName="_01" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
     <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/> 
     <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/> 
     </ColorAnimationUsingKeyFrames> 
    </Storyboard> 

    <Storyboard x:Key="Animation2" BeginTime="00:00:00.4" RepeatBehavior="Forever"> 
     <ColorAnimationUsingKeyFrames Storyboard.TargetName="_02" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
     <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/> 
     <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/> 
     </ColorAnimationUsingKeyFrames> 
    </Storyboard> 

    <Storyboard x:Key="Animation3" BeginTime="00:00:00.6" RepeatBehavior="Forever"> 
     <ColorAnimationUsingKeyFrames Storyboard.TargetName="_03" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
     <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/> 
     <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/> 
     </ColorAnimationUsingKeyFrames> 
    </Storyboard> 

    <Storyboard x:Key="Animation4" BeginTime="00:00:00.8" RepeatBehavior="Forever"> 
     <ColorAnimationUsingKeyFrames Storyboard.TargetName="_04" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
     <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/> 
     <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/> 
     </ColorAnimationUsingKeyFrames> 
    </Storyboard> 

    <Storyboard x:Key="Animation5" BeginTime="00:00:01.0" RepeatBehavior="Forever"> 
     <ColorAnimationUsingKeyFrames Storyboard.TargetName="_05" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
     <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/> 
     <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/> 
     </ColorAnimationUsingKeyFrames> 
    </Storyboard> 

    <Storyboard x:Key="Animation6" BeginTime="00:00:01.2" RepeatBehavior="Forever"> 
     <ColorAnimationUsingKeyFrames Storyboard.TargetName="_06" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
     <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/> 
     <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/> 
     </ColorAnimationUsingKeyFrames> 
    </Storyboard> 

    <Storyboard x:Key="Animation7" BeginTime="00:00:01.4" RepeatBehavior="Forever"> 
     <ColorAnimationUsingKeyFrames Storyboard.TargetName="_07" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
     <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/> 
     <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/> 
     </ColorAnimationUsingKeyFrames> 
    </Storyboard> 
    </UserControl.Resources> 

    <UserControl.Triggers> 
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
     <BeginStoryboard Storyboard="{StaticResource Animation0}"/> 
     <BeginStoryboard Storyboard="{StaticResource Animation1}"/> 
     <BeginStoryboard Storyboard="{StaticResource Animation2}"/> 
     <BeginStoryboard Storyboard="{StaticResource Animation3}"/> 
     <BeginStoryboard Storyboard="{StaticResource Animation4}"/> 
     <BeginStoryboard Storyboard="{StaticResource Animation5}"/> 
     <BeginStoryboard Storyboard="{StaticResource Animation6}"/> 
     <BeginStoryboard Storyboard="{StaticResource Animation7}"/> 
    </EventTrigger> 
    </UserControl.Triggers> 

    <Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="100"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="Auto"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <Canvas Grid.Row="1" Grid.Column="1" Height="105" Width="105"> 
     <Canvas.Resources> 
     <Style TargetType="Ellipse"> 
      <Setter Property="Width" Value="15"/> 
      <Setter Property="Height" Value="15" /> 
      <Setter Property="Fill" Value="#FFFFFFFF" /> 
     </Style> 
     </Canvas.Resources> 
     <Ellipse x:Name="_00" Canvas.Left="24.75" Canvas.Top="50"/> 
     <Ellipse x:Name="_01" Canvas.Top="36" Canvas.Left="29.5"/> 
     <Ellipse x:Name="_02" Canvas.Left="43.5" Canvas.Top="29.75"/> 
     <Ellipse x:Name="_03" Canvas.Left="57.75" Canvas.Top="35.75"/> 
     <Ellipse x:Name="_04" Canvas.Left="63.5" Canvas.Top="49.75" /> 
     <Ellipse x:Name="_05" Canvas.Left="57.75" Canvas.Top="63.5"/> 
     <Ellipse x:Name="_06" Canvas.Left="43.75" Canvas.Top="68.75"/> 
     <Ellipse x:Name="_07" Canvas.Top="63.25" Canvas.Left="30" /> 
     <Ellipse Stroke="{x:Null}" Width="39.5" Height="39.5" Canvas.Left="31.75" Canvas.Top="37" Fill="{x:Null}"/> 
    </Canvas> 
    <TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Foreground="#AAA" TextAlignment="Center" FontSize="15" Text="{Binding Source={StaticResource Model}, Path=StatusMessage}"/> 
    </Grid> 

</UserControl> 

Loading.xaml.cs:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Data; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Imaging; 
using System.Windows.Shapes; 

namespace UK.Budgeting.XBAP 
{ 
    /// <summary> 
    /// Interaction logic for Loading.xaml 
    /// </summary> 
    public partial class Loading : UserControl 
    { 
     public Loading() 
     { 
      InitializeComponent(); 
     } 
     public void Show() 
     { 
      this.Visibility = Visibility.Visible; 
     } 
     public void Hide() 
     { 
      this.Visibility = Visibility.Hidden; 
     } 
    } 
} 

要使用,在你的主頁做一個參考:

<local:Loading x:Name="LoadingAnimation" Visibility="Hidden" /> 

,並從代碼中調用:

LoadingAnimation.Show(); 
LoadingAnimation.Hide(); 
2

我不確定你的意思是顯示一個「小窗口」。你的意思是一個彈出窗口或一個顯示在瀏覽器之上的元素,就像覆蓋層一樣。如果您的意思是覆蓋元素,則可以使用webbrowser Navigating和LoadCompleted事件來顯示和隱藏該元素。

有很多方法可以定位依賴父控件的元素。如果您使用的是網格控件,那麼只需將加載元素放置在瀏覽器控件下方,並在其可見時顯示在頂部。

覆蓋控件時需要指出幾件事情。只是將不透明度更改爲0將不起作用,您需要將可見性設置爲隱藏,否則您的瀏覽器控件上的事件不會觸發。另請注意,如果您將某個屬性設置爲淡出/使用動畫,則必須將其清除。見Josh Smiths post

回覆時只修改您的原始帖子。您可能需要考慮添加您的XAML來幫助解釋您的計劃。

0

我找到了一個gif的創造者。

只有當瀏覽器加載時gif纔會移動。

我想這是一些線程問題。

你會怎麼做?

+0

WPF比使用動畫GIF有更好的動畫技術。除非需要在瀏覽器控件中,否則我不會使用動畫GIF。您可以在瀏覽器控件的頂部顯示矢量動畫。 – bendewey 2008-12-21 05:58:39

0

Thanks for p OSTS。

我意識到當然,我不需要一個GIF只是一個WPF動畫。

所以我只是做了一個圖片與我發現的gif的rotatetransform。

像魅力一樣工作