Silverlight - Loading page 等待页面

本文介绍了一个基于WPF的等待加载控件的设计与实现细节。该控件通过动画展示了加载过程,并允许设置提示文本。文章提供了控件的XAML代码及C#后台逻辑,演示了如何显示和隐藏该控件。
<UserControl x:Class="RTC_Portal.Waiting"
    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d
="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc
="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable
="d"
    d:DesignHeight
="1024" d:DesignWidth="1280">

    
<UserControl.Resources>
        
<Storyboard x:Name="storyboard">
            
<DoubleAnimation Storyboard.TargetName="WaitingImage"  Duration="0:0:0.7" To="360" Storyboard.TargetProperty="(UIElement.RenderTransform).RotateTransform.Angle" RepeatBehavior="Forever"></DoubleAnimation>
            
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="waitingText" Storyboard.TargetProperty="Opacity" RepeatBehavior="Forever">
                
<SplineDoubleKeyFrame KeyTime="00:00:0.0" Value="0"/>
                
<SplineDoubleKeyFrame KeyTime="00:00:0.5" Value="1"/>
                
<SplineDoubleKeyFrame KeyTime="00:00:1.0" Value="0"/>
            
</DoubleAnimationUsingKeyFrames>
        
</Storyboard>
    
</UserControl.Resources>
    
    
<Grid x:Name="LayoutRoot" Width="Auto" Height="Auto">
        
<Grid Background="Black" Opacity="0.2"></Grid>
        
<Canvas Width="320" Height="50">
            
<Rectangle RadiusX="8" RadiusY="8" Stroke="{x:Null}" Fill="#19000000" Height="49" Width="316" Canvas.Left="6" Canvas.Top="3"/>
            
<Rectangle RadiusX="8" RadiusY="8" Stroke="{x:Null}" Fill="#19000000" Height="48" Width="316" Canvas.Left="5" Canvas.Top="3"/>
            
<Border Height="50" Width="320" Background="#FFFFFFFF" BorderBrush="#FFACACAC" BorderThickness="1,1,1,1" CornerRadius="8,8,8,8">
                
<Rectangle RadiusX="8" RadiusY="8" Stroke="{x:Null}" Margin="1,1,1,1">
                    
<Rectangle.Fill>
                        
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            
<GradientStop Color="#FFFFFFFF"/>
                            
<GradientStop Color="#FFE9E9E9" Offset="1"/>
                        
</LinearGradientBrush>
                    
</Rectangle.Fill>
                
</Rectangle>
            
</Border>
        
</Canvas>
        
<Grid Width="320" Height="50" VerticalAlignment="Center">
            
<Grid.ColumnDefinitions>
                
<ColumnDefinition Width="5*" />
                
<ColumnDefinition Width="10*" />
                
<ColumnDefinition Width="80*" />
                
<ColumnDefinition Width="5*" />
            
</Grid.ColumnDefinitions>
            
<Image Stretch="None" Source="Image/loading.png" Grid.Column="1" Opacity="0.3" />
            
<Image x:Name="WaitingImage" Stretch="None" Source="Image/loading.png" Grid.Column="1" RenderTransformOrigin="0.5,0.5">
                
<Image.RenderTransform>
                    
<RotateTransform Angle="0"></RotateTransform>
                
</Image.RenderTransform>
            
</Image>
            
<TextBlock x:Name="titleText" FontFamily="Calibri" FontSize="13" Foreground="#FF000000" HorizontalAlignment="Left" Grid.Column="3"/>
            
<TextBlock Text="Waiting..." x:Name="waitingText"
       FontFamily
="Verdana" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Left" Grid.Column="2"/>
        
</Grid>
    
</Grid>
    
</UserControl>

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace RTC_Portal
{
    
public partial class Waiting : UserControl
    {
        
public Waiting()
        {
            InitializeComponent();
            
this.storyboard.Begin();
        }

        
public string Title
        {
            
get { return this.titleText.Text; }
            
set { this.titleText.Text = value; }
        }
        
public void SetLoadingText(string text)
        {
            
this.waitingText.Text = text;
        }
        
public void SetLoadingText()
        {
            
this.waitingText.Text = "Being processed, please wait...";
        }
    }

}

 

 

xmlns:my1="clr-namespace:RTC_Portal"

<my1:Waiting x:Name="waiting" Visibility="Collapsed" Grid.ColumnSpan="2" />

 

 

private void ShowWaiting()
        {
            
if (waiting != null)
            {
                waiting.Dispatcher.BeginInvoke(() 
=>
                {
                    waiting.Visibility 
= Visibility.Visible;
                    waiting.SetLoadingText();
                });
            }
        }

private void HideWaiting()
        {
            
if (waiting != null)
                waiting.Dispatcher.BeginInvoke(() 
=> waiting.Visibility = Visibility.Collapsed);
        }

 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值