44
Datagrid加載和提交時候自動出現BusyIndicator並綁定
BusyIndicator和DataGrid搭配使用的效果就是當Datagrid加載數據或者提交的時候自動灰掉並出現“Please wait...”進度條，這是一個非常普通的需求，因為從服務器端加載和提交數據誰也不知道需要耗時多久，很多其他的框架比如ExtJS都有很好的支持。在Silverlight中也是很方麵的，就是將需要等待載入的控件（這裏是DataGrid），作為BusyIndicator 的子控件即可。需要注意的是BusyIndicator自動綁定ViewModel的IsBusy屬性怎麼做？ViewModel的IsBusy屬性如何在加載數據和更新數據的時候進行更新？貌似一個小功能，但要做的完美才行。
前台Xaml：將需要等待載入的控件（這裏是DataGrid），作為BusyIndicator 的子控件，IsBusy綁定ViewModel的屬性。
<UserControl x:Class="TestUserControl"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:Height="Auto" d:Width="Auto" xmlns:sdk="https://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:toolkit="https://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">
<toolkit:HeaderedContentControl Name="headeredContentControl1" Width="Auto">
<toolkit:BusyIndicator Name="busyIndicator1" IsBusy="{Binding IsBusy}" DisplayAfter="0" BusyContent="Transferring data...">
<sdk:DataGrid ItemSource="{Binding EntitiesList}" AutoGenerateColumns="False" GridLinesVisibility="None" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderThickness="0,0,0,0" SelectionMode="Single" Name="dgvRecentUpdated">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Header="EntityID" Binding="{Binding EntityID}" Visibility="Collapsed" />
<sdk:DataGridTextColumn Header="Entity name" Binding="{Binding EntityName}" Width="120" />
<sdk:DataGridTextColumn Header="Entity desc" Binding="{Binding EntityDesc}" Width="120"/>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</toolkit:BusyIndicator>
</toolkit:HeaderedContentControl>
</UserControl>
ViewModel的IsBusy屬性設置：當DomainEntity加載和提交的時候自動更新狀態
1 public Boolean IsBusy
2 {
3 get
4 {
5 return this._isBusy;
6 }
7
8 private set
9 {
10 if (this._isBusy != value)
11 {
12 this._isBusy = value;
13 this.RaisePropertyChanged("IsBusy");//需ViewModel已經實現了INotifyPropertyChanged接口
14 }
15 }
16 }
17 private Boolean _isBusy = false;
18
19 //WCF Ria Service的DomainContxt
20
21 private MyDomainContext _ctx;
22
23 protected MyDomainContext Context
24 {
25 get
26 {
27 if (_ctx == null)
28 {
29 _ctx = new MyDomainContext();
30 _ctx.PropertyChanged += new PropertyChangedEventHandler(_ctx_PropertyChanged);
31 }
32
33 return _ctx;
34 }
35 }
36
37 private void _ctx_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
38 {
39 switch (e.PropertyName)
40 {
41 //case "HasChanges":
42 // this.HasChanges = _ctx.HasChanges;
43 // break;
44 case "IsLoading":
45 this.IsBusy = _ctx.IsLoading;
46 break;
47 case "IsSubmitting":
48 this.IsBusy = _ctx.IsSubmitting;
49 break;
50 }
51 }
52
53 //從WCF Ria Service取數據： Context.Load<T>....
如果你的應用非常簡單直接用DomainDataSource，那麼就直接把BusyIndicator的IsBusy屬性綁定到你的DomainDataSource，會自動改變狀態：
<sdk:BusyIndicator IsBusy="{Binding IsBusy, ElementName=targetDomainDataSource}" .../>
自定義BusyIndicator的樣式
現在Silverlight的BusyIndicator樣式很難看，你可以自定義，比如做一個Firefox的圓形樣式：
1 <UserControl x:Class="SilverlightApplication1.CustomBusyIndicator"
2 xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
6 mc:Ignorable="d"
7 xmlns:sys="clr-namespace:System;assembly=mscorlib"
8 d:Height="Auto" d:Width="Auto">
9 <UserControl.Resources>
10 <sys:String x:Key="data">M 0,0 L-2,0 L -2,-0 L0,-10 L 2,-10 L 2,0 Z</sys:String>
11 <Storyboard x:Name="Storyboard1">
12 <DoubleAnimation BeginTime="0:0:0" Duration="0:0:1" RepeatBehavior="Forever" From="1" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="p1"/>
13 <DoubleAnimation BeginTime="0:0:0.8" Duration="0:0:1" RepeatBehavior="Forever" From="1" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="p2"/>
14 <DoubleAnimation BeginTime="0:0:0.16" Duration="0:0:1" RepeatBehavior="Forever" From="1" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="p3" />
15 <DoubleAnimation BeginTime="0:0:0.24" Duration="0:0:1" RepeatBehavior="Forever" From="1" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="p4" />
16 <DoubleAnimation BeginTime="0:0:0.32" Duration="0:0:1" RepeatBehavior="Forever" From="1" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="p5" />
17 <DoubleAnimation BeginTime="0:0:0.40" Duration="0:0:1" RepeatBehavior="Forever" From="1" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="p6" />
18 <DoubleAnimation BeginTime="0:0:0.48" Duration="0:0:1" RepeatBehavior="Forever" From="1" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="p7" />
19 <DoubleAnimation BeginTime="0:0:0.56" Duration="0:0:1" RepeatBehavior="Forever" From="1" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="p8" />
20 <DoubleAnimation BeginTime="0:0:0.64" Duration="0:0:1" RepeatBehavior="Forever" From="1" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="p9" />
21 <DoubleAnimation BeginTime="0:0:0.72" Duration="0:0:1" RepeatBehavior="Forever" From="1" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="p10" />
22 <DoubleAnimation BeginTime="0:0:0.80" Duration="0:0:1" RepeatBehavior="Forever" From="1" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="p11" />
23 <DoubleAnimation BeginTime="0:0:0.88" Duration="0:0:1" RepeatBehavior="Forever" From="1" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="p12" />
24 </Storyboard>
25 </UserControl.Resources>
26 <Grid x:Name="LayoutRoot" Background="White" Margin="100">
27 <Path x:Name="p1" Data="{Binding Source={StaticResource data}}" Stroke="Gray" Fill="Black" Opacity="0.2">
28 <Path.RenderTransform>
29 <TransformGroup>
30 <TranslateTransform Y="-8"/>
31 <RotateTransform Angle="0"/>
32 </TransformGroup>
33 </Path.RenderTransform>
34 </Path>
35 <Path x:Name="p2" Data="{Binding Source={StaticResource data}}" Stroke="Gray" Fill="Black" Opacity="0.2">
36 <Path.RenderTransform>
37 <TransformGroup>
38 <TranslateTransform Y="-8"/>
39 <RotateTransform Angle="30"/>
40 </TransformGroup>
41 </Path.RenderTransform>
42 </Path>
43 <Path x:Name="p3" Data="{Binding Source={StaticResource data}}" Stroke="Gray" Fill="Black" Opacity="0.2">
44 <Path.RenderTransform>
45 <TransformGroup>
46 <TranslateTransform Y="-8"/>
47 <RotateTransform Angle="60"/>
48 </TransformGroup>
49 </Path.RenderTransform>
50 </Path>
51 <Path x:Name="p4" Data="{Binding Source={StaticResource data}}" Stroke="Gray" Fill="Black" Opacity="0.2">
52 <Path.RenderTransform>
53 <TransformGroup>
54 <TranslateTransform Y="-8"/>
55 <RotateTransform Angle="90"/>
56 </TransformGroup>
57 </Path.RenderTransform>
58 </Path>
59 <Path x:Name="p5" Data="{Binding Source={StaticResource data}}" Stroke="Gray" Fill="Black" Opacity="0.2">
60 <Path.RenderTransform>
61 <TransformGroup>
62 <TranslateTransform Y="-8"/>
63 <RotateTransform Angle="120"/>
64 </TransformGroup>
65 </Path.RenderTransform>
66 </Path>
67 <Path x:Name="p6" Data="{Binding Source={StaticResource data}}" Stroke="Gray" Fill="Black" Opacity="0.2">
68 <Path.RenderTransform>
69 <TransformGroup>
70 <TranslateTransform Y="-8"/>
71 <RotateTransform Angle="150"/>
72 </TransformGroup>
73 </Path.RenderTransform>
74 </Path>
75 <Path x:Name="p7" Data="{Binding Source={StaticResource data}}" Stroke="Gray" Fill="Black" Opacity="0.2">
76 <Path.RenderTransform>
77 <TransformGroup>
78 <TranslateTransform Y="-8"/>
79 <RotateTransform Angle="180"/>
80 </TransformGroup>
81 </Path.RenderTransform>
82 </Path>
83 <Path x:Name="p8" Data="{Binding Source={StaticResource data}}" Stroke="Gray" Fill="Black" Opacity="0.2">
84 <Path.RenderTransform>
85 <TransformGroup>
86 <TranslateTransform Y="-8"/>
87 <RotateTransform Angle="210"/>
88 </TransformGroup>
89 </Path.RenderTransform>
90 </Path>
91 <Path x:Name="p9" Data="{Binding Source={StaticResource data}}" Stroke="Gray" Opacity="0.2" Fill="Black">
92 <Path.RenderTransform>
93 <TransformGroup>
94 <TranslateTransform Y="-8"/>
95 <RotateTransform Angle="240"/>
96 </TransformGroup>
97 </Path.RenderTransform>
98 </Path>
99 <Path x:Name="p10" Data="{Binding Source={StaticResource data}}" Stroke="Gray" Fill="Black" Opacity="0.2">
100 <Path.RenderTransform>
101 <TransformGroup>
102 <TranslateTransform Y="-8"/>
103 <RotateTransform Angle="270"/>
104 </TransformGroup>
105 </Path.RenderTransform>
106 </Path>
107 <Path x:Name="p11" Data="{Binding Source={StaticResource data}}" Stroke="Gray" Fill="Black" Opacity="0.2">
108 <Path.RenderTransform>
109 <TransformGroup>
110 <TranslateTransform Y="-8"/>
111 <RotateTransform Angle="300"/>
112 </TransformGroup>
113 </Path.RenderTransform>
114 </Path>
115 <Path x:Name="p12" Data="{Binding Source={StaticResource data}}" Stroke="Gray" Fill="Black" Opacity="0.2">
116 <Path.RenderTransform>
117 <TransformGroup>
118 <TranslateTransform Y="-8"/>
119 <RotateTransform Angle="330"/>
120 </TransformGroup>
121 </Path.RenderTransform>
122 </Path>
123 </Grid>
124
125 </UserControl>
一個小小的BusyIndicator居然能扯出來這麼多東西！其實寫程序就是和建築工人/泥水匠差不多，重在細節，如果一個磚頭沒有砌好，大廈就有可能傾斜。
最後更新：2017-04-03 18:51:59