样式化WPF Popup(就像iTunes有弹出窗口一样)

时间:2014-03-12 10:33:02

标签: wpf popup itunes

我正在尝试创建一个类似于iTunes单击箭头按钮或单击上下文按钮时弹出的弹出窗口。任何人都可以帮我在WPF中设置这个样式吗?我可以使用一些代码示例,谢谢

enter image description here enter image description here

1 个答案:

答案 0 :(得分:3)

<DataTemplate x:Key="popupStyle">
    <Canvas>
        <ToggleButton Content="test" IsChecked="{Binding IsPopupVisible, Mode=TwoWay}"/>
        <AdornerDecorator Opacity="0" x:Name="adorner" Margin="20,0,0,0">
            <AdornerDecorator.Effect>
                <DropShadowEffect BlurRadius="10" ShadowDepth="0"/>
            </AdornerDecorator.Effect>
            <Grid>
                <Polygon Stroke="Silver" StrokeThickness="2" Fill="#AFFF" Points="0 10 20 0 150 0 150 150 20 150 20 20"/>
                <StackPanel Margin="30,10,10,10">
                    <MenuItem Header="asfsd"/>
                    <MenuItem Header="asfsd"/>
                    <MenuItem Header="asfsd"/>
                    <MenuItem Header="asfsd"/>
                </StackPanel>
            </Grid>
        </AdornerDecorator>
    </Canvas>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding IsPopupVisible}" Value="True">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard Duration="0:0:0.3">
                        <DoubleAnimation 
                            Storyboard.TargetName="adorner"
                            Storyboard.TargetProperty="Opacity"
                            Duration="0:0:0.3" To="1"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard Duration="0:0:0.3">
                        <DoubleAnimation 
                            Storyboard.TargetName="adorner"
                            Storyboard.TargetProperty="Opacity"
                            Duration="0:0:0.3" To="0"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.ExitActions>
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

此DataTemplate在其ViewModel中使用一个名为IsPopupVisible的布尔变量。

您可以在如下窗口中使用DataTemplate:

<Window... MouseDown="Window_MouseDown">
<Window.Resources>
    <DataTemplate x:Key="popupStyle">
        ...
    </DataTemplate>
</Window.Resources>
    <ContentPresenter ContentTemplate="{StaticResource popupStyle}" Content="{Binding}"/>
</Window>

并将mouseDown事件添加到整个Window:

private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
    IsPopupVisible = false;
}

这样当用户点击其他任何地方时,弹出窗口就会隐藏。