在上一篇博客《Windows Phone 7 最新的开发工具库》中介绍了Phoney项目,其中就有介绍到一个淡入淡出的消息提示,本文将扩展下这个消息提示,即让提示消息出现玻璃边框,类似于Windows 7窗体的效果。

先来看下运行后的效果:

其实说穿了无非就是给弹出框加上玻璃样式。

具体的改法如下:

开PhoneyTools项目下的FadingMessage.cs文件,找到其中的StandardMessage方法,添加如下代码即可


  1. #region 边框  
  2.         LinearGradientBrush brush = new LinearGradientBrush();  
  3.         brush.EndPoint = new Point(0.5, 1);  
  4.         brush.StartPoint = new Point(0.5, 0);  
  5.         GradientStop gs1 = new GradientStop();  
  6.         gs1.Color = Color.FromArgb(58, 11, 32, 45);  
  7.         gs1.Offset = 0;  
  8.  
  9.         GradientStop gs2 = new GradientStop();  
  10.         gs2.Color = Color.FromArgb(62, 255, 255, 255);  
  11.         gs2.Offset = 0.25;  
  12.  
  13.         GradientStop gs3 = new GradientStop();  
  14.         gs3.Color = Color.FromArgb(255, 255, 255, 255);  
  15.         gs3.Offset = 0.5;  
  16.  
  17.         GradientStop gs4 = new GradientStop();  
  18.         gs4.Color = Color.FromArgb(62, 255, 255, 255);  
  19.         gs4.Offset = 0.75;  
  20.  
  21.         GradientStop gs5 = new GradientStop();  
  22.         gs5.Color = Color.FromArgb(191, 255, 255, 255);  
  23.         gs5.Offset = 1;  
  24.  
  25.         GradientStopCollection gsc = new GradientStopCollection();  
  26.         gsc.Add(gs1);  
  27.         gsc.Add(gs2);  
  28.         gsc.Add(gs3);  
  29.         gsc.Add(gs4);  
  30.         gsc.Add(gs5);  
  31.  
  32.         brush.GradientStops = gsc;  
  33.         #endregion  
  34.  
  35.         #region 背景  
  36.         LinearGradientBrush brushForbg = new LinearGradientBrush();  
  37.         brushForbg.EndPoint = new Point(0.5, 1);  
  38.         brushForbg.StartPoint = new Point(0.5, 0);  
  39.         GradientStop gsBg1 = new GradientStop();  
  40.         gsBg1.Color = Color.FromArgb(33, 255, 255, 255);  
  41.         gsBg1.Offset = 0;  
  42.  
  43.         GradientStop gsBg2 = new GradientStop();  
  44.         gsBg2.Color = Color.FromArgb(192, 255, 255, 255);  
  45.         gsBg2.Offset = 0.287;  
  46.  
  47.         GradientStop gsBg3 = new GradientStop();  
  48.         gsBg3.Color = Color.FromArgb(255, 255, 255, 255);  
  49.         gsBg3.Offset = 0.683;  
  50.  
  51.         GradientStop gsBg4 = new GradientStop();  
  52.         gsBg4.Color = Color.FromArgb(33, 255, 255, 255);  
  53.         gsBg4.Offset = 1;  
  54.  
  55.         GradientStopCollection gsc2 = new GradientStopCollection();  
  56.         gsc2.Add(gsBg1);  
  57.         gsc2.Add(gsBg2);  
  58.         gsc2.Add(gsBg3);  
  59.         gsc2.Add(gsBg4);  
  60.  
  61.         brushForbg.GradientStops = gsc2;  
  62.         #endregion  
  63.  
  64.           
  65.  
  66.  
  67.       var theContainer = new Border()  
  68.       {  
  69.         //Background = PhoneBrushes.PhoneContrastBackgroundBrush,  
  70.         //BorderBrush = PhoneBrushes.PhoneBorderBrush,  
  71.         Background =brushForbg,//修改为透明背景  
  72.         BorderBrush = brush,//修改为玻璃边框  
  73.         BorderThickness = PhoneThicknesses.PhoneBorderThickness,  
  74.         CornerRadius = new CornerRadius(5)  
  75.       }; 

其中就是把原来的笔刷换成自己用C#代码写的笔刷即可。

另共享一个很不错的Silverlight玻璃效果的按钮样式。


  1. <Style x:Key="GlassBorderStyle" TargetType="Border"> 
  2.             <Setter Property="BorderThickness" Value="2"/> 
  3.             <Setter Property="Padding" Value="5"/> 
  4.             <Setter Property="Background"> 
  5.                 <Setter.Value> 
  6.                     <LinearGradientBrush EndPoint="0.75,1" StartPoint="0.25,0"> 
  7.                         <GradientStop Color="#33FFFFFF" Offset="0"/> 
  8.                         <GradientStop Color="#C0FFFFFF" Offset="0.287"/> 
  9.                         <GradientStop Color="#4011322D" Offset="0.683"/> 
  10.                         <GradientStop Color="#33FFFFFF" Offset="1"/> 
  11.                     </LinearGradientBrush> 
  12.                 </Setter.Value> 
  13.             </Setter> 
  14.             <Setter Property="BorderBrush"> 
  15.                 <Setter.Value> 
  16.                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
  17.                         <GradientStop Color="#5811322D" Offset="0"/> 
  18.                         <GradientStop Color="#3EFFFFFF" Offset="0.25"/> 
  19.                         <GradientStop Color="#FFFFFFFF" Offset="0.5"/> 
  20.                         <GradientStop Color="#3EFFFFFF" Offset="0.75"/> 
  21.                         <GradientStop Color="#BFFFFFFF" Offset="1"/> 
  22.                     </LinearGradientBrush> 
  23.                 </Setter.Value> 
  24.             </Setter> 
  25.             <Setter Property="Effect"> 
  26.                 <Setter.Value> 
  27.                     <DropShadowEffect BlurRadius="3" ShadowDepth="3" Opacity="0.5"/> 
  28.                 </Setter.Value> 
  29.             </Setter> 
  30.         </Style> 

 

使用方法:


  1. <Border x:Name="GlassBorder" Height="100" Width="250" CornerRadius="10" Style="{StaticResource GlassBorderStyle}"> 
  2.             <Button Content="Glass Border Style"/> 
  3.         </Border>