当前位置：文江博客话题详情

Silverlight BusyIndicator 的 Ajax 风格？

发布于 2024-09-09 04:08:24 字数 220 浏览 11 评论 0原文

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

绕谷歌一圈会产生一些链接，指向人们创建新控件以实现相同目标的地方（我怀疑他们早于 BusyIndicator），但如果可能的话，我宁愿为 BusyIndicator 换肤。

有人给我指出正确的方向吗？

谢谢马克

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

傲性难收 2024-09-16 04:08:24

我从 Silverlight Toolkit 制作了自己的自定义 BusyIndicator

以下是您所需要的：

在样式文件中设置系统命名空间：
xmlns:System="clr-namespace:System; assembly=mscorlib"

Put样式文件中的样式/模板：

<网格 x:名称=“ColorLayer”> <故事板> <可见性>折叠 <可见性>折叠 <故事板> <可见性>可见 <可见性>可见 <故事板> <系统:布尔值>True <系统：布尔值>False <矩形 x:Name="overlay" Style="{TemplateBinding OverlayStyle}"/> <路径 x:Name="loader" 高度="19" 宽度="19" Canvas.Left="0.5" Canvas.Top="0.5" Stretch="Fill" UseLayoutRounding="False" Stroke="Black" StrokeThickness =“0.2”渲染变换原点=“0.5,0.5” 数据=“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"> <路径.RenderTransform> <复合变换/> <路径.填充>

在 XAML 中使用它：

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

I made my own custom BusyIndicator from Silverlight Toolkit

Here is what you need:

Set the System namespace in your style file:
xmlns:System="clr-namespace:System;assembly=mscorlib"

Put the style/template in your style file:

<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>

Use it in your XAML:

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

回复收藏 0 原文