WenqiBlog - Blog

Email feed

Calendar

<<<2009-1-7 >>>

Category Blog

WPF (6)
Windows Form (2)
Web Form (6)
Ajax (2)
My life (10)
Other (5)

Archives

Recent blog

Recent comments

Recent message

Links

WPF中Popup的透明

Author:zhouwenqi
Date:2008-7-15 18:55:49

　　在弄Menu时，想给下载菜单Popup加个阴影投射效果，虽然Popup也有BitmapEffect属性，但是总是没有效果，起初怀疑是Popup中的Border是“空心”的，所以投影不了(WEB中的CSS就是这样)，后来给Border填充了画笔，还是不行，开始怀疑Popup不支持DropShadowBitmapEffect效果，结果查MSDN，上面也说了，Popup不支持某些位图效果，就是说超出Popup边界的位图效果，将被隐藏，MSDN，建议用Margin撑开Popup，留出需要的效果区域，结果我试了还是不行，最后试了三下，才搞好，原来不仅要将Margin撑开Popup，也要把Border撑开一下，结果效果就出来了，呵呵，WPF越来越有意思了............

BlurSolid.xaml画笔资源
<ResourceDictionary xmlns="http://schemas.microsoft.com/netfx/2007/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <LinearGradientBrush x:Key="menuaBg" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="#8C9CAD" Offset="0.0"></GradientStop>
        <GradientStop Color="#437093" Offset="0.4"></GradientStop>
        <GradientStop Color="#18517D" Offset="0.4"></GradientStop>
        <GradientStop Color="#227FB8" Offset="1.0"></GradientStop>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="menuhBg" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="#C88484" Offset="0.0"></GradientStop>
        <GradientStop Color="#C54C4C" Offset="0.4"></GradientStop>
        <GradientStop Color="#BA2625" Offset="0.4"></GradientStop>
        <GradientStop Color="#FC5D5C" Offset="1.0"></GradientStop>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="itemhBg" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="#70997D" Offset="0.0"></GradientStop>
        <GradientStop Color="#2F8644" Offset="0.4"></GradientStop>
        <GradientStop Color="#15772C" Offset="0.4"></GradientStop>
        <GradientStop Color="#22B83D" Offset="1.0"></GradientStop>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="itemFontColor" Color="#1B5E8E"></SolidColorBrush>
    <SolidColorBrush x:Key="popBk" Color="#227FB8"></SolidColorBrush>
    <SolidColorBrush x:Key="popBg" Color="#EFF9FF"></SolidColorBrush>
    <DropShadowBitmapEffect x:Key="ShowDrop" Color="#227FB8" Direction="320" ShadowDepth="1" Softness="0.5" Opacity="0.5"></DropShadowBitmapEffect>
</ResourceDictionary>

Css.xmal样式资源
<ResourceDictionary xmlns="http://schemas.microsoft.com/netfx/2007/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="BlurSolid.xaml"></ResourceDictionary>
    </ResourceDictionary.MergedDictionaries>
    <Style TargetType="Menu">
        <Setter Property="Background" Value="{StaticResource menuaBg}"></Setter>
        <Setter Property="BitmapEffect" Value="{StaticResource ShowDrop}"></Setter>
    </Style>
    <ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}" TargetType="{x:Type MenuItem}">
        <Border Name="Border">
            <Grid>
                <TextBlock Foreground="#FFFFFF">
                    <ContentPresenter Margin="12,6,12,6" ContentSource="Header" RecognizesAccessKey="True"></ContentPresenter>
                </TextBlock>
                <Popup Name="popup" Placement="Bottom" AllowsTransparency="True" IsOpen="{TemplateBinding IsSubmenuOpen}" Focusable="False" Margin="0,0,25,25" PopupAnimation="Fade">
                    <Border Name="subBorder" Margin="0,0,25,25" SnapsToDevicePixels="True" Background="{StaticResource popBg}" BorderBrush="{StaticResource popBk}" BorderThickness="1" Padding="1" BitmapEffect="{StaticResource ShowDrop}">
                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"></StackPanel>
                    </Border>
                </Popup>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsSuspendingPopupAnimation" Value="True">
                <Setter TargetName="popup" Property="PopupAnimation" Value="None"></Setter>
            </Trigger>
            <Trigger Property="IsHighlighted" Value="True">
                <Setter TargetName="Border" Property="Background" Value="{StaticResource menuhBg}"></Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <ControlTemplate x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}" TargetType="{x:Type MenuItem}">
        <Border Name="Border">
            <Grid>
                <ContentPresenter Margin="12,6,12,6" ContentSource="Header" RecognizesAccessKey="True"></ContentPresenter>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsHighlighted" Value="True">
                <Setter TargetName="Border" Property="Background" Value="{StaticResource menuhBg}"></Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <ControlTemplate x:Key="{x:Static MenuItem.SubmenuItemTemplateKey}" TargetType="{x:Type MenuItem}">
        <Border Name="Border">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="13"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="1" Margin="3" Foreground="{StaticResource popBk}" Name="txtColor">
                    <ContentPresenter ContentSource="Header"></ContentPresenter>
                </TextBlock>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsHighlighted" Value="True">
                <Setter TargetName="Border" Property="Background" Value="{StaticResource itemhBg}"></Setter>
                <Setter TargetName="txtColor" Property="Foreground" Value="#FFFFFF"></Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <ControlTemplate x:Key="{x:Static MenuItem.SubmenuHeaderTemplateKey}" TargetType="{x:Type MenuItem}">
        <Border Name="Border">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="13"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="1" Margin="3" Foreground="{StaticResource popBk}" Name="txtColor">
                    <ContentPresenter Name="HeaderHost" ContentSource="Header"></ContentPresenter>
                </TextBlock>
                <Path Name="MaskBox" Grid.Column="2" HorizontalAlignment="Center" SnapsToDevicePixels="True" VerticalAlignment="Center" Data="M 0 0 L 0 7 L 4 3.5 Z" Fill="{StaticResource popBk}"></Path>
                <Popup Name="popup" Placement="Right" IsOpen="{TemplateBinding IsSubmenuOpen}" Margin="0,0,25,25" AllowsTransparency="True" Focusable="False" PopupAnimation="Fade">
                    <Border Name="subBorder" Margin="0,0,25,25" SnapsToDevicePixels="True" Background="{StaticResource popBg}" BorderBrush="{StaticResource popBk}" BorderThickness="1" Padding="1" BitmapEffect="{StaticResource ShowDrop}">
                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
                    </Border>
                </Popup>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsHighlighted" Value="True">
                <Setter TargetName="Border" Property="Background" Value="{StaticResource itemhBg}"></Setter>
                <Setter TargetName="MaskBox" Property="Fill" Value="#FFFFFF"></Setter>
                <Setter TargetName="txtColor" Property="Foreground" Value="#FFFFFF"></Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <Style x:Key="{x:Type MenuItem}" TargetType="{x:Type MenuItem}">
        <Setter Property="OverridesDefaultStyle" Value="True"></Setter>
        <Setter Property="FontSize" Value="14"></Setter>
        <Setter Property="FontFamily" Value="雅黑"></Setter>
        <Style.Triggers>
            <Trigger Property="Role" Value="TopLevelHeader">
                <Setter Property="Template" Value="{StaticResource {x:Static MenuItem.TopLevelHeaderTemplateKey}}"/>
                <Setter Property="Grid.IsSharedSizeScope" Value="true"/>
            </Trigger>
            <Trigger Property="Role" Value="TopLevelItem">
                <Setter Property="Template" Value="{StaticResource {x:Static MenuItem.TopLevelItemTemplateKey}}"/>
            </Trigger>
            <Trigger Property="Role" Value="SubmenuHeader">
                <Setter Property="Template" Value="{StaticResource {x:Static MenuItem.SubmenuHeaderTemplateKey}}"/>
            </Trigger>
            <Trigger Property="Role" Value="SubmenuItem">
                <Setter Property="Template" Value="{StaticResource {x:Static MenuItem.SubmenuItemTemplateKey}}"/>
            </Trigger>
        </Style.Triggers>
    </Style>
    <Style TargetType="TextBlock">
        <Setter Property="SnapsToDevicePixels" Value="False"></Setter>
    </Style>
</ResourceDictionary>

Window.xaml"
<Window x:Class="WpfCi.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="544">
    <StackPanel>
        <StackPanel Margin="8">
            <Menu>
                <MenuItem Header="File">
                    <MenuItem Header="Open"></MenuItem>
                    <MenuItem Header="New"></MenuItem>
                    <MenuItem Header="Save">
                        <MenuItem Header="Localhost"></MenuItem>
                        <MenuItem Header="Disk">
                            <MenuItem Header="C Drive"></MenuItem>
                            <MenuItem Header="D Drive"></MenuItem>
                            <MenuItem Header="E Drive"></MenuItem>
                        </MenuItem>
                        <MenuItem Header="Mobile"></MenuItem>
                    </MenuItem>
                    <MenuItem Header="Print"></MenuItem>
                    <MenuItem Header="Exit"></MenuItem>
                </MenuItem>
                <MenuItem Header="Edit">
                    <MenuItem Header="Copy"></MenuItem>
                    <MenuItem Header="Paste"></MenuItem>
                    <MenuItem Header="Delete"></MenuItem>
                    <MenuItem Header="Fill">
                        <MenuItem Header="Foreground"></MenuItem>
                        <MenuItem Header="Background"></MenuItem>
                        <MenuItem Header="Image">
                            <MenuItem Header="Web site"></MenuItem>
                            <MenuItem Header="File">
                                <MenuItem Header="Png"></MenuItem>
                                <MenuItem Header="Jpeg"></MenuItem>
                                <MenuItem Header="Gif"></MenuItem>
                                <MenuItem Header="Bmp"></MenuItem>
                            </MenuItem>
                        </MenuItem>
                    </MenuItem>
                </MenuItem>
                <MenuItem Header="View">
                    <MenuItem Header="Design"></MenuItem>
                    <MenuItem Header="Tools bar"></MenuItem>
                    <MenuItem Header="Class view"></MenuItem>
                </MenuItem>
                <MenuItem Header="Tools">
                    <MenuItem Header="Guid"></MenuItem>
                    <MenuItem Header="Options"></MenuItem>
                </MenuItem>
                <MenuItem Header="Help">
                    <MenuItem Header="About"></MenuItem>
                </MenuItem>
            </Menu>
        </StackPanel>
    </StackPanel>
</Window>
Tags:wpf Popup 透明

comments

Post your comment
Name:
Verify code:
Content:
top Insert image