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内容为透明背景。

---

积跬步以至千里:) (:一阵没来由的风