如何在WPF中使用适当的阴影和箭头制作弹出窗口？

Question

我想要在WPF中弹出如下图所示的内容：

我已经使用CSS实现了它。 那么，是否可以建立使用XAML slimier弹出？

我尝试使用XAML来实现它，但是阴影无处不在。

Answer 1

是的Wpf中的Style是某种CSS。

在此示例中，您可以在以下URL中找到它： http : //stevenhollidge.blogspot.fr/2012/04/custom-tooltip-and-popup.html

 <Style x:Key="{x:Type ToolTip}" TargetType="ToolTip">
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="HorizontalOffset" Value="0" />
        <Setter Property="VerticalOffset" Value="-75" />
        <Setter Property="Background" Value="GhostWhite" />
        <Setter Property="Foreground" Value="Gray" />
        <Setter Property="FontSize" Value="12" />
        <Setter Property="FontFamily" Value="Segoe UI" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToolTip">
                    <Grid>
                        <Path x:Name="Container"
                              Margin="20"
                              Data="M 0,40 L15,50 15,80 150,80 150,0 15,0 15,30 z"
                              Fill="{TemplateBinding Background}"
                              Stroke="Black">
                            <Path.Effect>
                                <DropShadowEffect BlurRadius="10"
                                                  Opacity="0.5"
                                                  ShadowDepth="4" />
                            </Path.Effect>
                        </Path>
                        <TextBlock Width="100"
                                   Height="65"
                                   Text="{TemplateBinding Content}"
                                   TextWrapping="Wrapwithoverflow" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 2

因此，我已经进行了一些研究来解决此问题。 这有点复杂，但是可以，这是完全可行的。

首先做个Style

<Style x:Key="PopupContentStyle" TargetType="ContentControl">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ContentControl}">
                        <!--main grid 8px wider than actual size of popup to create shadow effect-->
                        <Grid Background="Transparent"
                              Width="{Binding ActualWidth, ConverterParameter='+,8', Converter={StaticResource WidthHeightExtender}, ElementName=mainGrid, Mode=OneWay}" 
                              Height="{Binding ActualHeight, ConverterParameter='+,8', Converter={StaticResource WidthHeightExtender}, ElementName=mainGrid}">
                            <!--below is the grid to create blur effect which will looks like shadow after putting another grid on top of this-->
                            <Grid VerticalAlignment="Center" HorizontalAlignment="Center" 
                                  Width="{Binding ActualWidth, ElementName=mainGrid}"
                                  Height="{Binding ActualHeight, ElementName=mainGrid}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <!--12px for arrow-->
                                    <RowDefinition Height="12"/>
                                </Grid.RowDefinitions>
                                <!--a box with blur effect for shadow-->
                                <Grid Background="Black" Opacity=".2" VerticalAlignment="Top" Width="{Binding ActualWidth, ElementName=mainGrid}" 
                                      Height="{Binding ActualHeight, ConverterParameter='-,12', Converter={StaticResource WidthHeightExtender}, ElementName=mainGrid, Mode=OneWay}">
                                    <Grid.Effect>
                                        <BlurEffect Radius="8"/>
                                    </Grid.Effect>
                                </Grid>
                                <!--path which is a arrow with blur effect for shadow-->
                                <Path Grid.Row="1" Opacity=".25" Data="M 0 0 12 12 L 24 0 Z" Fill="Black" Margin="25,0,0,0" HorizontalAlignment="Left">
                                    <Path.Effect>
                                        <BlurEffect Radius="8"/>
                                    </Path.Effect>
                                </Path>
                            </Grid>
                            <!--below is similer grid as above without any blur effect so that we can hide blur in side the contentpresenter--> 
                            <Grid Name="Mask" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent"
                                  Width="{Binding ActualWidth, ElementName=mainGrid}"
                                  Height="{Binding ActualHeight, ElementName=mainGrid}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="12"/>
                                </Grid.RowDefinitions>
                                <Grid Background="#FFFFFF" VerticalAlignment="Top" Width="{Binding ActualWidth, ElementName=mainGrid}"
                                      Height="{Binding ActualHeight, ConverterParameter='-,12', Converter={StaticResource WidthHeightExtender}, ElementName=mainGrid, Mode=OneWay}">
                                </Grid>
                                <!--margin's left value is 25 that means arrow is 25 px away fro left-->
                                <Path Grid.Row="1" Data="M 0 0 12 12 L 24 0 Z" Fill="#FFFFFF" Margin="25,0,0,0" HorizontalAlignment="Left"/>
                            </Grid>

                            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,4,0,16">
                                <!--if you want visualBrush then uncomment below's code and remove margin from ContentPresenter-->
                                <!--<ContentPresenter.OpacityMask >
                                    <VisualBrush  Visual="{Binding ElementName=Mask}" AlignmentX="Left" AlignmentY="Top" Stretch="None"/>
                                </ContentPresenter.OpacityMask>-->
                            </ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

在以上样式中，它分为三个部分。 首先：8px通过宽度和高度扩展了网格，我对其进行模糊处理以使其看起来像阴影。 第二：所需高度和宽度的网格以隐藏额外的模糊部分。 第三名：ContentPresenter

由于我使用了自定义转换器，因此代码如下：

/// <summary>
    /// Author: Suman Kumar
    /// It will increase or decrease width and height of any conrol
    /// Parameter should be like: "+,12"
    /// + is indicating increase and 12 is indicating length will be increased by 12 px
    /// </summary>
    public class WidthHeightExtender: IValueConverter
    {
        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            try
            {
                string []str = (parameter as string).Split(',');
                if (str[0].Equals("+"))
                    return System.Convert.ToDouble(value) + System.Convert.ToDouble(str[1]);
                else if (str[0].Equals("-"))
                    return System.Convert.ToDouble(value) - System.Convert.ToDouble(str[1]);
                else
                    return System.Convert.ToDouble(value);
            }
            catch(Exception ex)
            {
                return System.Convert.ToDouble(value);
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        #endregion

    }

最后，如何将样式应用于弹出窗口：

<Popup>
        <ContentControl Name="popupMain"  Style="{DynamicResource PopupContentStyle}">

                <Grid Name="mainGrid" Width="255" Height="333" Background="#FFFFFF">
    <!-- Your content will we here-->
    <!-- Name="mainGrid": This is very impotent to give name as "mainGrid" because I am using it in style to fetch height and width of grid.-->
            </Grid>
        </ContentControl>
</Popup>

这是我们可以在任何内容中归档对称阴影效果的方式。