Question

I have a window with 2 column grid. Left column contains a browser control

I woould like to display a little window or something to show a that the webpage is still loading.

How could I do this?? Could I have a floating window in the 2nd column that shows in front of the browser??? please explain how?

Malcolm

Thanks bendwey works like a charm. Only thing can’t find a GIF that I could use that would show something moving/revolving or the like for the overlay any ideas where?

Answer 1

The way I have accomplished this is by creating a user control with exposed Show() and Hide() methods. Below is the code. 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;         }     } } 

To use, make a reference in your main page:

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

and call from code:

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