How to change style of an WPF popup window

Question

I would like to change the style of an WPF popup window to look like below:

How can I do it?

In this case the "up arrow" of the popup window is in the top left corner (more or less) but depending on the space available it could be in other places around the popup, i mean, on the left side (top, center or bottom), on the right side (top, center or bottom), on the top side (left, center or right), on the bottom side (left, center or right). I don't know who controlls it.

Answer 1

An example of one of the possible variant:

    <UniformGrid Rows="2" Columns="2">
        <ToggleButton x:Name="toggleButton" Content="Some Element.&#xd;&#xa;Click for Popup"/>
        <Popup IsOpen="{Binding IsChecked, ElementName=toggleButton}"
               PlacementTarget="{Binding ElementName=toggleButton, Mode=OneWay}"
               AllowsTransparency="True">
            <Grid>
                <Path Fill="LightYellow" Stroke="LightGray">
                    <Path.Data>
                        <CombinedGeometry GeometryCombineMode="Union">
                            <CombinedGeometry.Geometry1>
                                <RectangleGeometry Rect="0,10 100,200"/>
                            </CombinedGeometry.Geometry1>
                            <CombinedGeometry.Geometry2>
                                <RectangleGeometry Rect="40,0 20,20">
                                    <RectangleGeometry.Transform>
                                        <RotateTransform Angle="45" CenterX="40"/>
                                    </RectangleGeometry.Transform>
                                </RectangleGeometry>
                            </CombinedGeometry.Geometry2>
                        </CombinedGeometry>
                    </Path.Data>
                </Path>
                <TextBlock Text="Popup text" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Grid>
        </Popup>
    </UniformGrid>

Second variant:

    <CombinedGeometry GeometryCombineMode="Union">
        <CombinedGeometry.Geometry1>
            <!--Vertical offset by the height of the arrow-->
            <RectangleGeometry Rect="0,30 100,200"/>
        </CombinedGeometry.Geometry1>
        <CombinedGeometry.Geometry2>
            <!--Arrow shape-->
            <PathGeometry Figures="M0,30 L10,0 L20,30 Z">
                <PathGeometry.Transform>
                    <!--Arrow position-->
                    <TranslateTransform X="30"/>
                </PathGeometry.Transform>
            </PathGeometry>
        </CombinedGeometry.Geometry2>
    </CombinedGeometry>