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" 是指将这个内容放置在第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(-).ToString("HH:mm");
UKT.Text = DateTime.Now.AddHours(-).ToString("HH:mm");
PST.Text = DateTime.Now.AddHours(-).ToString("HH:mm");
SDT.Text = DateTime.Now.AddHours().ToString("HH:mm");
BRT.Text = DateTime.Now.AddHours(-).ToString("HH:mm");
}
这样每隔一分钟,时间就改变一次.
这部分介绍完之后,看上去都已经有模有样了,下面开始添加特效图片了,首先我们需要添加的是花叶效果: 将花叶的图片放到项目中,设置其Build Action为Resource模式,然后在代码中将花叶翻转180度居中放置,XAML代码如下:
<Image Height="" 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="" To="" 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(,TimeSpan.FromSeconds());
animation.AutoReverse = true;
trans.BeginAnimation(TranslateTransform.YProperty,animation);
}
好了,这样之后,我们的主要设计完成,接下来是调调位置,调调大小,添加鼠标拖拽事件,鼠标关闭事件等等. 希望对你有用哦.
源代码下载
WPF换肤之六:酷炫的时区浏览小精灵的更多相关文章
- WPF换肤之七:异步
原文:WPF换肤之七:异步 在WinForm时代,相信大家都遇到过这种情形,如果在程序设计过程中遇到了耗时的操作,不使用异步会导致程序假死.当然,在WPF中,这种情况也是存在的,所以我们就需要寻找一种 ...
- WPF换肤之八:创建3D浏览效果
原文:WPF换肤之八:创建3D浏览效果 上节中,我们展示了WPF中的异步以及界面线程交互的方式,使得应用程序的显示更加的流畅.这节我们主要讲解如何设计一个具有3D浏览效果的天气信息浏览器. 效果显示 ...
- WPF换肤之四:界面设计和代码设计分离
原文:WPF换肤之四:界面设计和代码设计分离 说起WPF来,除了总所周知的图形处理核心的变化外,和Winform比起来,还有一个巨大的变革,那就是真正意义上做到了界面设计和代码设计的分离.这样可以让美 ...
- WPF换肤之五:创建漂亮的窗体
原文:WPF换肤之五:创建漂亮的窗体 换肤效果 经过了前面四章的讲解,我们终于知道了如何拖拉窗体使之改变大小,也知道了如何处理鼠标事件,同时,也知道了如何利用更好的编写方式来编写一个方便实用和维护的换 ...
- WPF换肤之三:WPF中的WndProc
原文:WPF换肤之三:WPF中的WndProc 在上篇文章中,我有提到过WndProc中可以处理所有经过窗体的事件,但是没有具体的来说怎么可以处理的. 其实,在WPF中,要想利用WndProc来处理所 ...
- WPF换肤之二:可拉动的窗体
原文:WPF换肤之二:可拉动的窗体 让我们接着上一章: WPF换肤之一:创建圆角窗体 来继续. 在这一章,我主要是实现对圆角窗体的拖动,改变大小功能. 拖动自绘窗体的步骤 首先,通过上节的设计,我们知 ...
- WPF换肤之一:创建圆角窗体
原文:WPF换肤之一:创建圆角窗体 我们都期望自己的软件能够有一套看上去很吸引人眼球的外衣,使得别人看上去既专业又有美感.这个系列就带领着大家一步一步的讲解如何设计出一套自己的WPF的窗体皮肤,如果文 ...
- 有点激动,WPF换肤搞定了!
一如既往没废话! wpf桌面应用开发都是window内引入很多个UserControl. 如果你有通过不同颜色来换肤的需求,那么下面我就将整个过程! 分2个步骤: 1.主窗体背景色替换: 2.同时界面 ...
- IntelliJ IDEA 换背景免费酷炫的插件(转)
一.插件的安装 打开setting文件选择Plugins选项 Ctrl + Alt + S File -> Setting 分别是安装JetBrains插件,第三方插件,本地已下载的插件包. 二 ...
随机推荐
- asp.net检查验证字符串是否为纯数字方法小结
原文 asp.net检查验证字符串是否为纯数字方法小结 在asp.net中验证字符串是不是为数字我们没有像php中那么多丰富的函数来直接使用,这里我整理了一些比较实例的验证字符串是否为纯数字方法代码 ...
- 基于visual Studio2013解决面试题之0301累加
题目
- 测试kestrel的队列
一.依赖环境的安装 1.sbt wget http://typesafe.artifactoryonline.com/typesafe/ivy-releases/org.scala-tools.s ...
- Android高手进阶——Adapter深入理解与优化
Android高手进阶--Adapter深入理解与优化 通常是针对包括多个元素的View,如ListView,GridView.ExpandableListview,的时候我们是给其设置一个Adapt ...
- Swift - 时间控制器NSTimer(每隔一定时间执行某个函数)
时间控制器NSTimer可以实现定时器功能,即每隔一定时间执行具体函数,可以重复也可以只执行一次. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 cl ...
- 断剑重铸之日,席卷朗朗乾坤之时--PHP学习一月漫记
传说中阿尔萨斯王子沉沦堕落之后,被巫妖王安置在冰冷的城堡中,静静地等待重出天日,它随身携带的宝剑也埋没与尘土之间,暗淡无光.他想起宝剑伴身,东征西战的峥嵘岁月,忆及如今身陷囹圄,一股怨念由心底升起,许 ...
- Esper学习之四:Context
上周末打球实在太累了,就没来得及更新,只是列了个提纲做做准备,发现Context还是有很多内容的.结果也花了不少时间才写完,所以这篇需要各位慢慢消化,并且最好多写几个例子加深理解. 如果有不了解Esp ...
- 浅谈mapreduce程序部署
尽管我们在虚拟机client上能非常快通过shell命令,进行运行一些已经封装好实例程序,可是在应用中还是是自己敲代码,然后部署到server中去,以下,我通过程序进行浅谈一个程序的部署过程. 在启动 ...
- CentOS 如何修改mysql 用户root的密码
源地址:http://blog.sina.com.cn/s/blog_6756f85201019zv7.html 第一步:用帐号登录mysql[root@CentOs5 ~]# mysql -u ro ...
- Delphi结构中使用String时遇到的内存泄露问题(没有利用String的引用计数自动销毁字符串的功能)
先定义一个结构: TUserInfo = record UserID: Integer; // 用户编号 UserName: string; // 用户名end; 然后编写如下代码: proced ...