1

我正在寻找一个示例样式,以将 Silverlight BusyIndi​​cator 的外观更改为更像 AJAX 应用程序的“旋转轮”外观。

绕谷歌一圈会产生一些链接,这些链接指向人们正在创建新控件以实现相同目的的位置(我怀疑他们早于 BusyIndi​​cator),但如果可能的话,我宁愿剥去 BusyIndi​​cator 的皮肤。

有人给我正确的方向吗?

谢谢

标记

4

2 回答 2

3

我使用BusyIndicatorSilverlight Toolkit进行了自定义

这是您需要的:

  1. 在样式文件中设置 System 命名空间:

    xmlns:System="clr-命名空间:System;assembly=mscorlib"

  2. 将样式/模板放入您的样式文件中:

    <ControlTemplate x:Key="AjaxBusyIndicatorControlTemplate" TargetType="toolkit:BusyIndicator">
        <Grid x:Name="ColorLayer">               
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="VisibilityStates">
                    <VisualState x:Name="Hidden">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="busycontent">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="overlay">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Visible">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="busycontent">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="overlay">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="BusyStatusStates">
                    <VisualState x:Name="Idle">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="content">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                    <DiscreteObjectKeyFrame.Value>
                                        <System:Boolean>True</System:Boolean>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Busy">
                        <Storyboard RepeatBehavior="Forever" AutoReverse="False">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="loader">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="359.999"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="content">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                    <DiscreteObjectKeyFrame.Value>
                                        <System:Boolean>False</System:Boolean>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <ContentControl x:Name="content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
            <Rectangle x:Name="overlay" Style="{TemplateBinding OverlayStyle}"/>
            <ContentPresenter x:Name="busycontent">
                <Path x:Name="loader" Height="19" Width="19" Canvas.Left="0.5" Canvas.Top="0.5" Stretch="Fill" UseLayoutRounding="False" Stroke="Black" StrokeThickness="0.2" RenderTransformOrigin="0.5,0.5"
                    Data="M9.5,3 C5.9101491,3 3,5.9101491 3,9.5 C3,13.08985 5.9101491,16 9.5,16 C13.08985,16 16,13.08985 16,9.5 C16,5.9101491 13.08985,3 9.5,3 z M9.5,0 C14.746705,0 19,4.2532949 19,9.5 C19,14.746705 14.746705,19 9.5,19 C4.2532949,19 0,14.746705 0,9.5 C0,4.2532949 4.2532949,0 9.5,0 z">
                    <Path.RenderTransform>
                        <CompositeTransform/>
                    </Path.RenderTransform>
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF0089FF" Offset="0"/>
                            <GradientStop Color="White" Offset="1"/>
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>
            </ContentPresenter>
        </Grid>
    </ControlTemplate>
    
    <Style x:Key="AjaxBusyIndicator" TargetType="toolkit:BusyIndicator"  >
        <Setter Property="Template" Value="{StaticResource AjaxBusyIndicatorControlTemplate}"/>
    </Style>
    
  3. 在您的 XAML 中使用它:

<Grid x:Name="LayoutRoot" Background="White">
    <toolkit:BusyIndicator IsBusy="True" Style="{StaticResource AjaxBusyIndicator}">
        <TextBox Text="TEST test test" />
    </toolkit:BusyIndicator>
</Grid>

于 2011-09-10T09:05:31.133 回答
1

嗯,真的是一个常见的场景。 Silverlight 开发人员通常使用 http://blogs.msdn.com/b/brada/archive/2009/03/20/silverlight-3-activity-control.aspx这种类型的控件。但由于您的要求是像 AJAX 一样拥有它,我认为此链接可能会有所帮助: http ://chrisa.wordpress.com/2008/10/09/a-wait-indicator-in-silverlight/

以下是有关如何为繁忙指标自定义数据模板的一些提示:http: //www.jeff.wilcox.name/2009/11/busy-indicator-control/

问候。

于 2010-07-13T06:12:34.167 回答