下面是我用来为 WPF 创建类似 AJAX 的等待微调器的一些 XAML。我使用几何和动画而不是动画 GIF,您可以通过调整 XAML 来控制大小和速率:
<!-- Style for AJAX-like wait spinners -->
<Style x:Key="WaitSpinnerStyle" TargetType="Control">
<Setter Property="Foreground" Value="#888" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Control">
<Viewbox Visibility="{TemplateBinding Visibility}">
<Canvas RenderTransformOrigin="0.5,0.5" Width="120" Height="120" >
<Ellipse Width="21.835" Height="21.862" Canvas.Left="20.1696" Canvas.Top="9.76358" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="1.0"/>
<Ellipse Width="20.835" Height="20.862" Canvas.Left="2.86816" Canvas.Top="29.9581" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.9"/>
<Ellipse Width="19.835" Height="19.862" Canvas.Left="0.00001" Canvas.Top="57.9341" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.8"/>
<Ellipse Width="17.835" Height="17.862" Canvas.Left="12.1203" Canvas.Top="83.3163" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.7"/>
<Ellipse Width="16.835" Height="16.862" Canvas.Left="36.5459" Canvas.Top="98.1380" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.6"/>
<Ellipse Width="14.835" Height="14.862" Canvas.Left="64.6723" Canvas.Top="96.8411" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.5"/>
<Ellipse Width="13.835" Height="13.862" Canvas.Left="87.6176" Canvas.Top="81.2783" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.4"/>
<Ellipse Width="12.835" Height="12.862" Canvas.Left="98.165" Canvas.Top="54.4140" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.3"/>
<Ellipse Width="11.835" Height="11.862" Canvas.Left="92.9838" Canvas.Top="26.9938" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.2"/>
<Canvas.RenderTransform>
<RotateTransform x:Name="SpinnerRotate" Angle="0" />
</Canvas.RenderTransform>
<Canvas.Triggers>
<EventTrigger RoutedEvent="ContentControl.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="SpinnerRotate"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:01.3"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
你可以像这样使用它(如果你想改变它,请指定颜色):
<Control Style="{StaticResource WaitSpinnerStyle}" Width="35" />
<Control Style="{StaticResource WaitSpinnerStyle}" Width="35" Foreground="Green" />
上面的 XAML 看起来像这样(你必须想象它们在旋转!):
要让一个图层出现在列表框上方,请将其包裹在网格中,如下所示:
<Grid>
<!-- LOADING overlay (for async-load) -->
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsHitTestVisible="True"
Background="#40000000" CornerRadius="4"
Visibility="{Binding Path=IsLoading, Converter={StaticResource BooleanToVisibilityConverter}}">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Control Style="{StaticResource WaitSpinnerStyle}" Width="35" Foreground="White" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="LOADING..." FontWeight="Bold" Margin="0,5" Foreground="White" FontSize="12" />
</StackPanel>
</Border>
<ListBox />
</Grid>
使用网格意味着边框将出现在列表框的顶部。在这种情况下,该层将显示为灰色,并会窃取任何鼠标操作,从而有效地禁用底层列表框。
注意这里的绑定是IsLoaded
连接到我的视图模型。我将其设置为false
当我开始加载时,然后再次加载true
当加载完成时。请注意,我从调度程序线程(在工作线程上)加载我的项目,以便在我执行此工作时 UI 更新。