WPF Popup Using
示例
Popup控件由两部分组成:呈现弹起内容的Popup控件和触发该Popup的控件组成。下面我们以toggleButton和Popup组合起来做一个浮窗效果。
<Window x:Class="Deamon.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Deamon"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Style TargetType="ToggleButton">
<Setter Property="Background" Value="Gray"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Padding="5" Background="{TemplateBinding Background}">
<Grid >
<ContentPresenter x:Name="content1" Content="not selected" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ContentPresenter x:Name="content2" Content="SELECTED" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="DimGray"/>
<Setter TargetName="content1" Property="Visibility" Value="Hidden"/>
<Setter TargetName="content2" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="content1" Property="Visibility" Value="Visible"/>
<Setter TargetName="content2" Property="Visibility" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<DockPanel>
<DockPanel DockPanel.Dock="Top" Height="45">
<!-- 状态栏 -->
<DockPanel.Background>
<LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
<GradientStop Color="#FF001a26" Offset="0"/>
<GradientStop Color="#FF054a68" Offset="1"/>
</LinearGradientBrush>
</DockPanel.Background>
<ToggleButton Foreground="White" Background="Transparent" x:Name="PART_tog"/>
<!--local:PopopHelper.PopupPlacementTarget="{Binding ElementName=PART_tog}"-->
<Popup AllowsTransparency="True" StaysOpen="False" PopupAnimation="Slide"
PlacementTarget="{Binding ElementName=PART_tog}"
IsOpen="{Binding IsChecked, ElementName=PART_tog}"
Placement="Bottom" >
<Grid>
<DockPanel Width="200" Height="200" Margin="5 0 5 5">
<DockPanel.Effect>
<DropShadowEffect BlurRadius="10" Color="Black" Opacity="1" ShadowDepth="0" Direction="0"/>
</DockPanel.Effect>
<Path Grid.Row="1" DockPanel.Dock="Top"
Stroke="Black"
Panel.ZIndex="1"
Data="M 15,0 L 0,10 L 30,10 L 15,0"
StrokeThickness="0"
HorizontalAlignment="Left"
Fill="#FF001a26" />
<Border BorderBrush="#FF001a26" BorderThickness="1 0 1 1" CornerRadius="0 5 5 5">
<Border.Background>
<LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
<GradientStop Color="#FF001a26" Offset="0"/>
<GradientStop Color="#FF054a68" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<!-- 浮窗内容 -->
<TextBlock Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30" Text="内容"/>
</Border>
</DockPanel>
</Grid>
</Popup>
</DockPanel>
<DockPanel DockPanel.Dock="Top" >
<!-- 主要内容 -->
</DockPanel>
</DockPanel>
</Grid>
</Window>
点击togglebutton就可以让浮窗弹出。再次点击togglebutton和窗口其它地方,就会隐藏浮窗。
Popup 常用属性说明
IsOpen:设置popup内容是否可见;true可见,false不可见。
StaysOpen:popup是否停留在窗口上;true->当popup控件呈现之后,一直处于窗口界面,不会消失,除非再次点击触发它的控件将IsOpen的状态设置为false。false->popup内容呈现之后,任意点击其它地方,让其失去焦点时,popup内容就会自动消失。
Placement:popup内容呈现时,与屏幕边缘重叠的方式。其值可以参考枚举值PlacementMode的说明。
PlacementTarget:popup内容呈现时,相对参考的控件。
PopupAnimation:popup内容打开和关闭时的动画方式。由枚举值PopupAnimation进行说明。
AllowsTransparency:允许popup内容为透明背景。
积跬步以至千里:) (:一阵没来由的风