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內容爲透明背景。
積跬步以至千里:) (:一陣沒來由的風