WPF - 如何显示Web浏览器控件的加载消息

问题描述：

我有一个2列网格的窗口。左栏包含一个浏览器控件WPF - 如何显示Web浏览器控件的加载消息

我很想显示一个小窗口或其他东西来显示网页仍在加载的。

我该怎么做？我可以在浏览器前面显示的第二列中有一个浮动窗口吗？请解释一下如何？

马尔科姆

谢谢bendwey作品像魅力。只有东西找不到我可以使用的GIF，它会显示移动/旋转之类的东西或覆盖任何想法在哪里？

答

我已经完成这个的方法是通过创建一个暴露的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();

答

我不确定你的意思是显示一个“小窗口”。你的意思是一个弹出窗口或一个显示在浏览器之上的元素，就像覆盖层一样。如果您的意思是覆盖元素，则可以使用webbrowser Navigating和LoadCompleted事件来显示和隐藏该元素。

有很多方法可以定位依赖父控件的元素。如果您使用的是网格控件，那么只需将加载元素放置在浏览器控件下方，并在其可见时显示在顶部。

覆盖控件时需要指出几件事情。只是将不透明度更改为0将不起作用，您需要将可见性设置为隐藏，否则您的浏览器控件上的事件不会触发。另请注意，如果您将某个属性设置为淡出/使用动画，则必须将其清除。见Josh Smiths post。

回复时只修改您的原始帖子。您可能需要考虑添加您的XAML来帮助解释您的计划。

答

我找到了一个gif的创造者。

只有当浏览器加载时gif才会移动。

我想这是一些线程问题。

你会怎么做？

WPF比使用动画GIF有更好的动画技术。除非需要在浏览器控件中，否则我不会使用动画GIF。您可以在浏览器控件的顶部显示矢量动画。 – bendewey 2008-12-21 05:58:39

答

Thanks for p OSTS。

我意识到当然，我不需要一个GIF只是一个WPF动画。

所以我只是做了一个图片与我发现的gif的rotatetransform。

像魅力一样工作

WPF - 如何显示Web浏览器控件的加载消息

相关推荐