65.9K
CodeProject 正在变化。 阅读更多。
Home

Silverlight 中的通知控件

Jawahar Suresh Babu
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.54/5 (14投票s)

2012年1月26日

CPOL

1分钟阅读

viewsIcon

32745

downloadIcon

1670

一个外观类似于 Windows 7 气泡提示的 Silverlight 通知控件。

引言

我们曾在 Windows 7/Vista 中看到通知工具提示，用于告知特定上下文中的信息。例如，如果大写锁定已开启，密码框上会显示一个气泡提示警告。或者，有时低电量信息会显示在任务栏上。

Password.png

此控件的独特之处在于它可以放置在 Silverlight 中的任何 Framework Element 上。

背景

使用代码

通知控件的基础类是 Content Control。内容可以是任何类型，例如字符串、图像等。该控件将在 Silverlight 中的任何 FrameworkElement 上显示。使用 Popup 来托管实际控件，Popup 将根据其位置放置在特定元素上。

通用的模板 XAML 如下

<Style TargetType="local:Balloon">
    <Setter Property="FontSize" Value="13"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:Balloon">
                <Grid>
                    <Grid.Effect>
                        <DropShadowEffect ShadowDepth="2" Direction="315"/>
                    </Grid.Effect>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Border Grid.Row="1" BorderBrush="Gray" BorderThickness="1" 
                            CornerRadius="5"
                            Margin="{Binding Alignment, 
                            Converter={StaticResource Converter}, 
                            RelativeSource={RelativeSource TemplatedParent}, 
                            ConverterParameter=MainMargin}">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FFE7E8F1" Offset="1"/>
                                <GradientStop Color="White"/>
                                <GradientStop Color="#FFF3F4F6" Offset="0.472"/>
                            </LinearGradientBrush>
                        </Border.Background>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Image Source="{TemplateBinding Icon}" Margin="5"/>
                            <TextBlock Margin="5" Grid.Column="1"
                                       Foreground="#FF28489F" 
                                       Text="{TemplateBinding Header}" FontSize="16"
                                       VerticalAlignment="Center"/>
                            <ContentPresenter Margin="5" Grid.Column="1" Grid.Row="1"/>
                        </Grid>
                    </Border>
                        
                    <Path Data="M306.375,133.125L306.375,100.875L335.75,133.25" 
                          Stroke="Gray" Height="20" 
                          Fill="White" 
                          Margin="{Binding Alignment, 
                          Converter={StaticResource Converter}, 
                          RelativeSource={RelativeSource TemplatedParent}, 
                          ConverterParameter=Margin}"
                          StrokeThickness="1" Stretch="Uniform" 
                          Visibility="{Binding Alignment, 
                          Converter={StaticResource Converter},
                          RelativeSource={RelativeSource TemplatedParent}, 
                          ConverterParameter=bottom}" VerticalAlignment="Center" 
                          HorizontalAlignment="{Binding Alignment, 
                          Converter={StaticResource Converter}, 
                          RelativeSource={RelativeSource TemplatedParent}, 
                          ConverterParameter=Alignment}"/>

                    <Path Data="M306.375,133.125L306.375,100.875L335.75,133.25" 
                          Stroke="Gray" 
                          Height="20" Fill="#FFE7E8F1" Margin="{Binding Alignment, 
                          Converter={StaticResource Converter}, 
                          RelativeSource={RelativeSource TemplatedParent}, 
                          ConverterParameter=Margin}"
                          StrokeThickness="1" Stretch="Uniform" Grid.Row="2" 
                          Visibility="{Binding Alignment, 
                          Converter={StaticResource Converter}, 
                          RelativeSource={RelativeSource TemplatedParent}, 
                          ConverterParameter=top}" VerticalAlignment="Center" 
                          RenderTransformOrigin="0.5, 0.5" 
                          HorizontalAlignment="{Binding Alignment, 
                          Converter={StaticResource Converter},
                          RelativeSource={RelativeSource TemplatedParent}, 
                          ConverterParameter=Alignment}">
                        <Path.RenderTransform>
                            <ScaleTransform ScaleY="-1"/>
                        </Path.RenderTransform>
                    </Path>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

气泡对齐方式

为了将 Popup 定位到控件中的特定位置，需要找出与浏览器相关的坐标。这可以使用 GeneralTransform 来完成。控件中的 Alignment 属性有助于更改 Popup 需要托管的位置。

它可以是以下之一：

public enum BalloonAlignment
{
    TopLeft,

    TopRight,

    BottomLeft,

    BottomRight
}

气泡工具提示服务

应将一个类型为 DependencyObject 的附加属性添加到静态类中，该属性可用于在任何 DependecyObject 上设置气泡。该对象可以是 textBox、Checkbox、Combobox 等。

public static class BalloonTooltipService
{
    public static Balloon GetBalloonTooltip(DependencyObject obj)
    {
        return (Balloon)obj.GetValue(BalloonTooltipProperty);
    }

    public static void SetBalloonTooltip(DependencyObject obj, Balloon value)
    {
        obj.SetValue(BalloonTooltipProperty, value);
    }

    // Using a DependencyProperty as the backing store for BalloonTooltip.
    // This enables animation, styling, binding, etc...
    public static readonly DependencyProperty BalloonTooltipProperty =
        DependencyProperty.RegisterAttached("BalloonTooltip", 
        typeof(Balloon), typeof(BalloonTooltipService), new PropertyMetadata(null, 
        new PropertyChangedCallback(OnBalloonToolTipChanged)));

    private static void OnBalloonToolTipChanged(DependencyObject sender, 
                        DependencyPropertyChangedEventArgs args)
    {
        var element = sender as FrameworkElement;
        Balloon tooltip = args.NewValue as Balloon;
        if (tooltip != null)
        {
            tooltip.DataContext = element.DataContext;
            tooltip.Target = element;
        }
    }
}

Checkbox.png

应用程序用法

该控件可用于在应用程序中显示有关特定上下文的一些有用信息。以下代码显示了如何使用 BallonTooltipService 设置气泡。

<CheckBox VerticalAlignment="Center" Width="100"  Margin="3" GotFocus="OnFocus">
     <balloon:BalloonTooltipService.BalloonTooltip>
            <balloon:Balloon x:Name="balloon1" Header="Checkbox Notification" 
                 HorizontalAlignment="Center" Alignment="{Binding Path=SelectedValue}" 
                 VerticalAlignment="Center" Icon="WarningHS.png">
                 <balloon:Balloon.Content>
                     <Grid>
                       <TextBlock TextWrapping="Wrap" 
                       Text="Balloon can be placed on any Framework Element."/>
                     </Grid>
                 </balloon:Balloon.Content>
            </balloon:Balloon>
     </balloon:BalloonTooltipService.BalloonTooltip>
</CheckBox>
© . All rights reserved.