WPF - Как отобразить сообщение о загрузке для управления через веб

Question

У меня есть окно с 2 столбцами сетки. Левый столбец содержит элемент управления браузера

Я хотел бы показать небольшое окно или что-то, чтобы показать что веб-страница все еще загружается.

Как я мог это сделать ?? Могу ли я иметь плавающее окно во 2-й колонке что показывает перед браузером ??? объясните пожалуйста как?

Malcolm

Спасибо, Бенви работает как шарм. Единственное, что не может найти GIF, который я мог бы использовать, чтобы показать что-то движущееся / вращающееся или подобное для наложения есть идеи где?

Answer 1

Я достиг этого путем создания пользовательского элемента управления с открытыми методами 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();

Answer 2

Я не уверен, что вы подразумеваете под отображением «маленького окна». Вы имеете в виду всплывающее окно или элемент, который отображается поверх браузера, как наложение. Если вы имеете в виду элемент наложения, вы можете использовать события веб-браузера Navigating и LoadCompleted, чтобы показать и скрыть элемент.

Существует несколько способов позиционирования элемента, который зависит от родительского элемента управления. Если вы используете элемент управления Grid, просто поместите загрузочный элемент под элементом управления браузера, и он будет отображаться сверху, когда его увидят.

Пара вещей, на которые следует обратить внимание при наложении элементов управления. Простое изменение непрозрачности на 0 не сработает, вам нужно установить видимость скрытой, иначе ваши события в вашем браузере не будут срабатывать. Также имейте в виду, что если вы устанавливаете свойство для постепенного исчезновения / использования анимации, вам придется очистить его. См. Пост Джоша Смита .

При ответе просто измените исходное сообщение. Возможно, вы захотите добавить свой XAML, чтобы объяснить свой план.

Answer 3

Спасибо за сообщения.

Я понял, конечно, что мне не нужен GIF, просто анимация WPF.

Итак, я только что сделал rotatetransform для изображения с найденным изображением.

Работает как шарм

Answer 4

Я нашел создателя GIF.

Единственное, что gif не двигается при загрузке браузера.

Полагаю, это какая-то проблема с потоками.

Как бы ты это сделал?