WPF换肤之六：酷炫的时区浏览小精灵

原文:WPF换肤之六：酷炫的时区浏览小精灵

由于工作需要,经常要查看到不同地区的 当前时间,以前总是对照着时区表来进行加减运算,现在有了这个小工具以后,感觉省心了不少.下面是软件的截图:

效果图赏析

 

在界面上,有能够冉冉升起的太阳或者月亮,有缓慢飘动的浮云,有青葱翠绿的花叶,　当然,也有显目的时区显示.如果要是放在WinForm时代,要实现这样的界面,真的是繁琐和复杂,但是在WPF中,利用XAML控制前台界面,利用CodeBehind控制窗口拖动,日月变换等等逻辑,真的是简便而且效果强大.其基于DX渲染的界面,流畅而且逼真.

实现原理

首先,参照前面几章的讲解,我们知道要想实现窗体自绘,我们需要进行以下几项设置:

View Code

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

这样之后,我们需要做的是放置一个Grid容器,设置Grid容器行和列,这个我不消多说,因为和设置ASP.NET中的网格类似.

View Code

<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.容器有了,下面我们开始往容器里面放东西.

View Code

<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"　是指将这个内容放置在第１列,第二行的位置上,依次类推,然后填充即可.

View Code

<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对象的各种属性和事件:

View Code

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

这里我设置的是一秒钟跳动一次,然后注册了其Tick事件,在这个事件中,我们控制界面上时间的显示:

View Code

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代码如下:

View Code

<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来控制其左右移动效果:

View Code

<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代码:

View Code

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

对应的后台事件:

View Code

  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);
}

好了,这样之后,我们的主要设计完成,接下来是调调位置,调调大小,添加鼠标拖拽事件,鼠标关闭事件等等.　希望对你有用哦.

源代码下载

请点击这里下载源代码

 

时间： 2024-07-31 15:56:23

WPF换肤之六：酷炫的时区浏览小精灵的相关文章

WPF换肤之七：异步

原文:WPF换肤之七:异步 在WinForm时代,相信大家都遇到过这种情形,如果在程序设计过程中遇到了耗时的操作,不使用异步会导致程序假死.当然,在WPF中,这种情况也是存在的,所以我们就需要寻找一种解决方法来让程序界面响应和耗时操作异步进行,那么上述假死的情况就不会发生了. 这一节就着重讲解异步以及线程和界面交互. 异步使用方式(APM模式) 在上节中,我们给一个普通的Window窗口做了换肤处理,呈现出了一个非常酷的时区浏览小工具.当然,这一节,我们还是以那个工具为主,为其增加天气预报功能,

WPF换肤之一：创建圆角窗体

原文:WPF换肤之一:创建圆角窗体     我们都期望自己的软件能够有一套看上去很吸引人眼球的外衣,使得别人看上去既专业又有美感.这个系列就带领着大家一步一步的讲解如何设计出一套自己的WPF的窗体皮肤,如果文中有任何错误或者不足,还请指出.     WPF是微软大战略中的一个重心所在,学习WPF可谓是一举多得:首先,学习WPF可以让你了解SilverLight的80%:其次,XAML语言可以让你快速的入手WCF和WF:更甚者,就是WPF给予DX渲染核心,抛弃了传统WINFORM以GDI+为主的渲

WPF换肤之八：创建3D浏览效果

原文:WPF换肤之八:创建3D浏览效果 上节中,我们展示了WPF中的异步以及界面线程交互的方式,使得应用程序的显示更加的流畅.这节我们主要讲解如何设计一个具有3D浏览效果的天气信息浏览器. 效果显示 下面我们看截图: 是不是能够感受到一种与众不同的感觉.如果你能够感受到它的与众不同,这也是我本节所要达到的目标. 实现方式 上面的只是一个简单的3D图形,它的产生需要依赖于WPF中的MeshGeometry3D对象,这个对象按照微软官方的解释就是用于生成3D形状的三角形基元,它有三个比较重要的属性:

WPF换肤之二：可拉动的窗体

原文:WPF换肤之二:可拉动的窗体 让我们接着上一章: WPF换肤之一:创建圆角窗体 来继续. 在这一章,我主要是实现对圆角窗体的拖动,改变大小功能. 拖动自绘窗体的步骤 首先,通过上节的设计,我们知道了如何设计一个圆角窗体,通过XAML代码量,我们发现设置这个窗体是多么的简单.但是如何让窗体能够进行Resize呢? 在Winform时代,我们通过WndProc(ref Message m)处理窗体界面消息来实现,那么在WPF中是否也是如此呢? 其实在WPF中,虽说封装比较紧密,但是对于处理界面

WPF换肤之四：界面设计和代码设计分离

原文:WPF换肤之四:界面设计和代码设计分离 说起WPF来,除了总所周知的图形处理核心的变化外,和Winform比起来,还有一个巨大的变革,那就是真正意义上做到了界面设计和代码设计的分离.这样可以让美工和程序分开进行,而不是糅合在一块,这样做的好处当然也是显而易见的:提高了开发效率. 原先的设计方式 在我们之前设计的代码中,每当添加一个新的窗体的时候,我总是会在这个新的窗体的XAML文件中加入如下的代码,以便使样式能够应用上去: View Code <Window x:Class="Wpf

WPF换肤设计原理浅析_C#教程

WPF换肤的设计原理,利用资源字典为每种皮肤资源添加不同的样式,在后台切换皮肤资源文件. 截图 上图中,第一张图采用规则样式,第二张图采用不规则样式,截图的时候略有瑕疵. 资源字典 规则样式资源Skin.RegularStyle.xaml <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microso

仿酷狗音乐播放器开发日志十八——换肤功能的实现二：改变控件和窗体透明度（附挂件类源码）

转载请说明原出处,谢谢~~          昨天把大致布局分析了一下,昨天晚上把布局写好实现了,今天把大致的功能完成了一下,现在的外观已经和原酷狗的换肤界面完全一样,其中的调整播放列表透明度和设置整个软件透明度的代码已经完成了,先把效果图贴一下,然后开发说开发过程.    开发步骤一:        布局的部分我就不说了,昨天已经分析了,只要用好素材,花点时间就能把界面效果做出来,其中"官方皮肤"和 "我的皮肤"调用CTabLayout可以实现两个界面的切换,如图

仿酷狗音乐播放器开发日志二十——换肤功能背景图片控件的制作（附源码）

转载请说明原出处,谢谢~~           <仿酷狗音乐播放器开发日志二十>里做了换肤功能的一部分,今天完成其他的部分.酷狗的换肤窗口里的背景图可以让用户选择来换图,原酷狗的背景图的小图标,有normal.hover.down等多种状态,鼠标移动上去便会发生变化.如图        当鼠标经过时会有个黑色图片覆盖,边框变为浅蓝色.并且在他上面显示出作者的一些信息.要实现这个效果应该另外开发一个控件来支持动态的信息展示效果.我把这个小控件的开发过程和源码发一下,给学习做duilib控件的新手

仿酷狗音乐播放器开发日志十七——换肤功能的实现一

转载请说明原出处,谢谢~~            好的软件一定要有好看的皮肤,我记得几年前的换肤流行把所有窗体的所有控件的外观样式改变,skin++和skinsharp就是那几 年流行的换肤库,使用简单,主要采用Hook与子类化技术来实现应用程序的自动换肤,属于第二代皮肤库.当时觉得那样的皮肤效 果很棒.效果如下:                           而这几年第三代界面技术DirectUI技术流行后,软件皮肤变得更随意和高效,现在的换肤功能一般就只换一个背景图片,QQ. 迅雷.酷