WPF Popup Using

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內容爲透明背景。

---

積跬步以至千里:) (:一陣沒來由的風