WPF換膚之六：酷炫的時區瀏覽小精靈

由於工作需要,經常要查看到不同地區的 當前時間,以前總是對照着時區表來進行加減運算,現在有了這個小工具以后,感覺省心了不少.下面是軟件的截圖:

效果圖賞析

 

在界面上,有能夠冉冉升起的太陽或者月亮,有緩慢飄動的浮雲,有青蔥翠綠的花葉,　當然,也有顯目的時區顯示.如果要是放在WinForm時代,要實現這樣的界面,真的是繁瑣和復雜,但是在WPF中,利用XAML控制前台界面,利用CodeBehind控制窗口拖動,日月變換等等邏輯,真的是簡便而且效果強大.其基於DX渲染的界面,流暢而且逼真.

實現原理

首先,參照前面幾章的講解,我們知道要想實現窗體自繪,我們需要進行以下幾項設置:

AllowTransparency = “True”
WindowStyle = “None”
Background = “Transparent”
OpacityMask = “White”

這樣之后,我們需要做的是放置一個Grid容器,設置Grid容器行和列,這個我不消多說,因為和設置ASP.NET中的網格類似.

<Grid.ColumnDefinitions>
  <ColumnDefinition/>
  <ColumnDefinition/>
  <ColumnDefinition/>
  <ColumnDefinition/>
  <ColumnDefinition/>
  <ColumnDefinition/>
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
  <RowDefinition Height="30"/>
  <RowDefinition Height="30"/>
  <RowDefinition/>
</Grid.RowDefinitions>

上面的代碼就是聲明了一個3行6列的Grid容器,其中第一行和第二行的高度均為30.容器有了,下面我們開始往容器里面放東西.

<Border Grid.Column="0" Grid.Row="1">
<TextBlock x:Name="HK" Padding="0,5,0,0" Background="#FFA04C00" FontFamily="@微軟雅黑" FontSize="12" Foreground="White"   TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="None"><Run Text="Hong Kong"/></TextBlock>
</Border>

上面的就是往容器放置的東西,其中Border是用於畫邊線(Grid自帶的邊線太難看), Grid.Column="0" Grid.Row="1"　是指將這個內容放置在第１列,第二行的位置上,依次類推,然后填充即可.

<Border Grid.Column="0">
<TextBlock FontFamily="@微軟雅黑" Padding="0,5,0,0" FontSize="12pt" Foreground="Black" FontWeight="bold" Background="#FFF87800"  TextAlignment="Center"><Run Text="Hong Kong"/></TextBlock></Border>
<Border Grid.Column="1">
<TextBlock Background="#FFB0D428" Padding="0,5,0,0" FontFamily="@微軟雅黑" FontSize="16" FontWeight="Bold" Foreground="Black"    Text="New York" TextAlignment="Center"/></Border>
<Border Grid.Column="2">
<TextBlock Background="#FF2283E4" Padding="0,5,0,0" FontFamily="@微軟雅黑" FontSize="16" FontWeight="Bold" Foreground="Black"    Text="London" TextAlignment="Center"/></Border>
<Border Grid.Column="3">
<TextBlock Background="#FF20D4D0" Padding="0,5,0,0" FontFamily="@微軟雅黑" FontSize="16" FontWeight="Bold" Foreground="Black"    Text="Pairs" TextAlignment="Center"/></Border>
<Border Grid.Column="4">
<TextBlock Background="#FF28D428" Padding="0,5,0,0" FontFamily="@微軟雅黑" FontSize="16" FontWeight="Bold" Foreground="Black"    Text="Sydney" TextAlignment="Center"/></Border>
<Border Grid.Column="5">
<TextBlock Background="#FFD040F8" Padding="0,5,0,0" FontFamily="@微軟雅黑" FontSize="16" FontWeight="Bold" Foreground="Black"    Text="Brasilia" TextAlignment="Center"/></Border>
<Border Grid.Column="0" Grid.Row="1">
<TextBlock x:Name="HK" Padding="0,5,0,0" Background="#FFA04C00" FontFamily="@微軟雅黑" FontSize="12" Foreground="White"   TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="None"><Run Text="Hong Kong"/></TextBlock></Border>
<Border Grid.Column="1" Grid.Row="1">
<TextBlock x:Name="NY" Padding="0,5,0,0" Background="#FF708418" FontFamily="@微軟雅黑" FontSize="12" Foreground="White"   TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="None"><Run Text="Hong Kong"/></TextBlock></Border>
<Border Grid.Column="2" Grid.Row="1">
<TextBlock x:Name="UK" Padding="0,5,0,0" Background="#FF184880" FontFamily="@微軟雅黑" FontSize="12" Foreground="White"   TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="None"><Run Text="Hong Kong"/></TextBlock></Border>
<Border Grid.Column="3" Grid.Row="1">
<TextBlock x:Name="PS" Padding="0,5,0,0" Background="#FF188480" FontFamily="@微軟雅黑" FontSize="12" Foreground="White"   TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="None"><Run Text="Hong Kong"/></TextBlock></Border>
<Border Grid.Column="4" Grid.Row="1">
<TextBlock x:Name="SD" Padding="0,5,0,0" Background="#FF188418" FontFamily="@微軟雅黑" FontSize="12" Foreground="White"   TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="None"><Run Text="Hong Kong"/></TextBlock></Border>
<Border Grid.Column="5" Grid.Row="1">
<TextBlock x:Name="BR" Padding="0,5,0,0" Background="#FF7800A8" FontFamily="@微軟雅黑" FontSize="12" Foreground="White"   TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="None"><Run Text="Hong Kong"/></TextBlock></Border>
<Border Grid.Column="0" Grid.Row="2">
<TextBlock x:Name="HKT" Padding="0,5,0,0" FontFamily="@Gill Sans MT" FontSize="21pt" Foreground="White"   TextAlignment="Center" FontWeight="Bold"><Run Text="Load"/></TextBlock></Border>
<Border Grid.Column="1" Grid.Row="2">
<TextBlock x:Name="NYT" Padding="0,5,0,0" FontFamily="@Gill Sans MT" FontSize="21pt" Foreground="White"   TextAlignment="Center" FontWeight="Bold"><Run Text="Load"/></TextBlock></Border>
<Border Grid.Column="2" Grid.Row="2">
<TextBlock x:Name="UKT" Padding="0,5,0,0" FontFamily="@Gill Sans MT" FontSize="21pt" Foreground="White"   TextAlignment="Center" FontWeight="Bold"><Run Text="Load"/></TextBlock></Border>
<Border Grid.Column="3" Grid.Row="2">
<TextBlock x:Name="PST" Padding="0,5,0,0" FontFamily="@Gill Sans MT" FontSize="21pt" Foreground="White"   TextAlignment="Center" FontWeight="Bold"><Run Text="Load"/></TextBlock></Border>
<Border Grid.Column="4" Grid.Row="2">
<TextBlock x:Name="SDT" Padding="0,5,0,0" FontFamily="@Gill Sans MT" FontSize="21pt" Foreground="White"   TextAlignment="Center" FontWeight="Bold"><Run Text="Load"/></TextBlock></Border>
<Border Grid.Column="5" Grid.Row="2">
<TextBlock x:Name="BRT" Padding="0,5,0,0" FontFamily="@Gill Sans MT" FontSize="21pt" Foreground="White"   TextAlignment="Center" TextDecorations="None" FontWeight="Bold" Background="Transparent"><Run Text="Load"/></TextBlock></Border>

這樣填充完成后,就能看見上面的圖片了,是不是開始有型了?

然后我們還需要控制其能夠計算時間,這個需要用到WPF中的DispatcherTimer對象,具體的用法如下:

首先設置DispatcherTimer對象的各種屬性和事件:

timer = new DispatcherTimer();
timer.Interval = TimeSpan.Parse("00:00:01");
timer.IsEnabled = true;
timer.Tick+=new EventHandler(timer_Tick);

這里我設置的是一秒鍾跳動一次,然后注冊了其Tick事件,在這個事件中,我們控制界面上時間的顯示:

private void timer_Tick(object sender, EventArgs e)
{
HKT.Text = DateTime.Now.ToString("HH:mm");
NYT.Text = DateTime.Now.AddHours(-12).ToString("HH:mm");
UKT.Text = DateTime.Now.AddHours(-7).ToString("HH:mm");
PST.Text = DateTime.Now.AddHours(-6).ToString("HH:mm");
SDT.Text = DateTime.Now.AddHours(2).ToString("HH:mm");
BRT.Text = DateTime.Now.AddHours(-11).ToString("HH:mm");
}

這樣每隔一分鍾,時間就改變一次.

這部分介紹完之后,看上去都已經有模有樣了,下面開始添加特效圖片了,首先我們需要添加的是花葉效果:　將花葉的圖片放到項目中,設置其Build Action為Resource模式,然后在代碼中將花葉翻轉180度居中放置,XAML代碼如下:

<Image Height="82" Margin="248,0,118,0" Source="Images/yezi2.png" Stretch="Fill" VerticalAlignment="Top"  RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-180"/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>

之后是添加飄動的白雲,這個稍微復雜點,我們得先添加一個Canvas畫板,以便能夠附加其Left屬性,然后利用StoryBoard來控制其左右移動效果:

<Canvas x:Name="MyCanvas">
<Canvas.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard >
<Storyboard Storyboard.TargetName="img1" Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation From="0" To="514" Duration="0:0:20" RepeatBehavior="23:59:59" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>

其中需要注意的是, Duration代表動畫時間, AutoReverse為True代表按照原路徑返回.這樣設置之后,就可以看見白雲飄飄了.

最后的就是那個太陽和月亮的標記,當移動上面去,能夠緩慢下降和升起的效果,這個利用Code來完成.

對應的XAML代碼:

<Image x:Name="DayMark" HorizontalAlignment="Left" Height="53" Source="Images/sun2.png" Stretch="Fill" VerticalAlignment="Top" Width="105" Margin="0,15,0,0" MouseEnter="DayMark_MouseEnter" />

對應的后台事件:

  private void DayMark_MouseEnter(object sender, MouseEventArgs e)
{
    TranslateTransform trans = new TranslateTransform();
    DayMark.RenderTransform = trans;
    DoubleAnimation animation = new DoubleAnimation(10,TimeSpan.FromSeconds(1));
    animation.AutoReverse = true;
    trans.BeginAnimation(TranslateTransform.YProperty,animation);
}

好了,這樣之后,我們的主要設計完成,接下來是調調位置,調調大小,添加鼠標拖拽事件,鼠標關閉事件等等.　希望對你有用哦.

源代碼下載

請點擊這里下載源代碼