65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Telerik Silverlight RadControls 的 BusyIndicator

<b>Kunal Chowdhury «IN»</b>
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.92/5 (13投票s)

2011 年 2 月 16 日

CPOL

5分钟阅读

viewsIcon

71883

在本教程中，我们将讨论 Telerik RadControls 库中的 BusyIndicator。请按照分步教程了解如何使用它。

引言

上周，我开始探索 Telerik RadControls for Silverlight。在探索的第一天，我只浏览了 Telerik RadControls 的基本概述和安装步骤。

在这篇文章中，我们将探讨 RadControls 自带的BusyIndicator。基本代码与 Silverlight 默认提供的代码相似。引人注目的是圆形进度条。

让我们开始探索它，看看有哪些可用属性以及如何开始使用此控件。

设置项目

如果您没有在 PC 上安装 RadControls 库，请从 Telerik 网站下载免费试用版。安装步骤在此文中有所提及：第 1 天：使用 Telerik Silverlight RadControls。

设置好开发环境后，打开您的 Visual Studio 2010 IDE，然后单击“创建新项目”。在“新建项目”对话框窗口中，从左侧面板选择 Silverlight。这将为您筛选出 Silverlight 模板。

在主面板中，您会看到一个名为“RadControls Silverlight Application”的模板。如果您想创建一个示例项目，请将其选为项目的默认模板。

image

在下一步单击“确定”。这将确保您正在创建一个用于托管 Silverlight 应用程序的 Web 项目。

第三个屏幕（如下图所示）将为您提供包含应用程序所需各种库的选项。选择您想要使用的适当库程序集。很棒的一点是，当您从某个程序集中选择任何程序集时，依赖项程序集也会被选中。

image

这将为您创建示例项目。生成并运行应用程序以检查是否存在任何错误。

RadBusyIndicator 中有什么？

在开始下一部分之前，您可能想了解 RadBusyIndicator 控件。好吧，Busy indicator 是一个 Silverlight 控件，您可以将其添加到 Silverlight 应用程序中，以便在将某种操作保存到数据库时向用户显示加载指示。通常，当您调用 WCF 服务以在服务器上存储某些内容或从服务器检索数据时，它很有用。

Rad BusyIndicator 有四种视觉状态，分别命名为 Hidden、Visible、Busy 和 Idle。它有一些依赖属性，称为

  • IsBusyIndicatorVisible - 您可以设置忙指示器是否可见
  • BusyContent - 获取或设置忙指示器的内容。当忙碌加载时，这通常会出现在 UI 中
  • BusyContentTemplate - 您可以更改忙指示器的内容模板
  • DisplayAfter - 设置持续时间，之后忙指示器将显示在屏幕上
  • IsBusy - 获取或设置控件是否进入忙碌模式
  • IsIndeterminate - 设置忙指示器的不确定状态
  • OverlayStyle - 更改覆盖元素样式
  • ProgressBarStyle - 如果要更改进度条的样式，请设置此项
  • ProgressBarValue - 获取或设置进度条在忙碌模式下开始的值

在此处查看 RadBusyIndicator 的成员完整列表

image

玩转 XAML

项目创建并成功生成后，请在 XAML 页面中添加 Telerik 命名空间“Telerik.Windows.Controls”。有关更多详细信息，请参见下图

image

它看起来如下

image

现在，将 telerik RadBusyIndicator 添加为 MainPage 的根控件。用它替换 Grid 标签。以下是代码

image

现在添加您想在其中插入的任何内容。当指示器进入忙碌模式时，BusyIndicator 中的内容将变得禁用。

对于我们的示例，我创建了以下 XAML 代码

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    x:Class="RadControlsSilverlightApp1.MainPage" Width="600">
    <telerik:RadBusyIndicator x:Name="radBusyIndicator">
        <StackPanel Orientation="Vertical" Margin="50">
            <TextBlock Text="Working with the Telerik Rad BusyIndicator Control" 
                       FontSize="32" TextAlignment="Center" TextWrapping="Wrap" 
                       FontWeight="Bold" Foreground="Red">
                <TextBlock.Effect>
                    <DropShadowEffect/>
                </TextBlock.Effect>
            </TextBlock>
            <telerik:RadButton Content="Show Busy" HorizontalAlignment="Center"
                               Width="100" Margin="20"
                               Click="RadButton_Click"/>
        </StackPanel>
    </telerik:RadBusyIndicator>
</UserControl>

我们不会为这个示例项目创建令人惊叹的 UI。因此，我们将使用 TextBlock 和 Button 控件。一旦我们单击按钮，rad busy indicator 将进入忙碌模式。

玩转代码

UI 已准备就绪，我们需要编写一些示例代码来测试 BusyIndicator。为此，请添加 Button 的单击事件，并在事件实现中编写以下代码

image

要启动忙指示器，只需将 IsBusy 设置为 true，并在您想关闭它时将其设置为 false。

让我们运行我们的示例应用程序。您将在浏览器窗口中看到以下屏幕

image

单击“显示忙碌”按钮以加载忙指示器。

image

您现在将看到忙指示器已加载到 UI 中，并禁用了 RadBusyIndicator 控件周围的可视区域。加载到 UI 中的进度条具有圆形进度控件。请在此处查看

image

在忙碌模式下，进度条将沿圆形方向移动。

image

现在，您想更改文本吗？默认情况下，它显示“Loading...”作为内容。您也可以将其更改为其他 string。请看

image

为此，只需设置指示器控件的 BusyContent 属性。这样即可完成。您可以将其设置在 XAML 中，也可以在进行调用之前在代码隐藏中设置。让我们在此处看一下

image

您可能还会问，是否可以在那里添加一个取消按钮？是的，当然可以！！！您可以在那里放置任意数量的控件，而不仅仅是简单的文本。那么，如何做到这一点呢？

image

为此，请编辑 Busy Indicator 的 BusyContentTemplate 并在此处修改模板。您也可以在此处绑定任何数据。有关更多详细信息，请参见以下 XAML 代码

image

结束语

希望这些信息在您使用 Silverlight BusyIndicator 时有所帮助，尤其是 Telerik RadControls 库中附带的控件。请继续阅读我的其他文章。我将继续一段时间探索 telerik rad controls，并会尝试为您发布它们，以便您在处理它们时能从中获得一些帮助。

不要忘记为此投票并留下您的反馈。建议随时欢迎。

© . All rights reserved.