Windows Phone 7 玻璃框訊息提示

在上一篇部落格《Windows Phone 7 最新的開發工具庫》中介紹了Phoney項目，其中就有介紹到一個淡入淡出的訊息提示，本文將擴充下這個訊息提示，即讓提示訊息出現玻璃邊框，類似於Windows 7表單的效果。

先來看下運行後的效果：

其實說穿了無非就是給彈出框加上玻璃樣式。

具體的改法如下：

開啟PhoneyTools項目下的FadingMessage.cs檔案，找到其中的StandardMessage方法，添加如下代碼即可

#region 邊框
LinearGradientBrush brush = new LinearGradientBrush();
        brush.EndPoint = new Point(0.5, 1);
        brush.StartPoint = new Point(0.5, 0);
GradientStop gs1 = new GradientStop();
        gs1.Color = Color.FromArgb(58, 11, 32, 45);
        gs1.Offset = 0;

GradientStop gs2 = new GradientStop();
        gs2.Color = Color.FromArgb(62, 255, 255, 255);
        gs2.Offset = 0.25;

GradientStop gs3 = new GradientStop();
        gs3.Color = Color.FromArgb(255, 255, 255, 255);
        gs3.Offset = 0.5;

GradientStop gs4 = new GradientStop();
        gs4.Color = Color.FromArgb(62, 255, 255, 255);
        gs4.Offset = 0.75;

GradientStop gs5 = new GradientStop();
        gs5.Color = Color.FromArgb(191, 255, 255, 255);
        gs5.Offset = 1;

GradientStopCollection gsc = new GradientStopCollection();
        gsc.Add(gs1);
        gsc.Add(gs2);
        gsc.Add(gs3);
        gsc.Add(gs4);
        gsc.Add(gs5);

        brush.GradientStops = gsc;
#endregion

        #region 背景
LinearGradientBrush brushForbg = new LinearGradientBrush();
        brushForbg.EndPoint = new Point(0.5, 1);
        brushForbg.StartPoint = new Point(0.5, 0);
GradientStop gsBg1 = new GradientStop();
        gsBg1.Color = Color.FromArgb(33, 255, 255, 255);
        gsBg1.Offset = 0;

GradientStop gsBg2 = new GradientStop();
        gsBg2.Color = Color.FromArgb(192, 255, 255, 255);
        gsBg2.Offset = 0.287;

GradientStop gsBg3 = new GradientStop();
        gsBg3.Color = Color.FromArgb(255, 255, 255, 255);
        gsBg3.Offset = 0.683;

GradientStop gsBg4 = new GradientStop();
        gsBg4.Color = Color.FromArgb(33, 255, 255, 255);
        gsBg4.Offset = 1;

GradientStopCollection gsc2 = new GradientStopCollection();
        gsc2.Add(gsBg1);
        gsc2.Add(gsBg2);
        gsc2.Add(gsBg3);
        gsc2.Add(gsBg4);

        brushForbg.GradientStops = gsc2;
#endregion




      var theContainer = new Border()
      {
//Background = PhoneBrushes.PhoneContrastBackgroundBrush,
        //BorderBrush = PhoneBrushes.PhoneBorderBrush,
Background =brushForbg,//修改為透明背景
BorderBrush = brush,//修改為玻璃邊框
BorderThickness = PhoneThicknesses.PhoneBorderThickness,
        CornerRadius = new CornerRadius(5)
      };

其中就是把原來的筆刷換成自己用C#代碼寫的筆刷即可。

另共用一個很不錯的Silverlight半透明效果的按鈕樣式。

<Style x:Key="GlassBorderStyle" TargetType="Border">
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="Padding" Value="5"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.75,1" StartPoint="0.25,0">
                        <GradientStop Color="#33FFFFFF" Offset="0"/>
                        <GradientStop Color="#C0FFFFFF" Offset="0.287"/>
                        <GradientStop Color="#4011322D" Offset="0.683"/>
                        <GradientStop Color="#33FFFFFF" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#5811322D" Offset="0"/>
                        <GradientStop Color="#3EFFFFFF" Offset="0.25"/>
                        <GradientStop Color="#FFFFFFFF" Offset="0.5"/>
                        <GradientStop Color="#3EFFFFFF" Offset="0.75"/>
                        <GradientStop Color="#BFFFFFFF" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect BlurRadius="3" ShadowDepth="3" Opacity="0.5"/>
                </Setter.Value>
            </Setter>
        </Style>

使用方法：

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