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.

You could use a decorator or there are plenty of questions asked like this: [wpf-speech-bubble](https://stackoverflow.com/questions/43734151/wpf-speech-bubble) or [wpf-tooltip-like-a-speech-bubble](https://stackoverflow.com/questions/11446250/how-to-style-wpf-tooltip-like-a-speech-bubble) — bazsisz, Oct 06 '22 at 06:23
Does this answer your question? [How to style WPF tooltip like a speech bubble?](https://stackoverflow.com/questions/11446250/how-to-style-wpf-tooltip-like-a-speech-bubble) — bazsisz, Oct 06 '22 at 06:25
@bazsisz Oh, sorry. I didn't know the exact name of this type of tooltip. I didn't know that this type was called speech bubble. Sorry. Thx for the links. — Willy, Oct 06 '22 at 12:23

EldHasp · Answer 1 · 2022-11-28T18:42:36.150

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>

I have created an style and put this within controltemplate and it is not working. Nothing appears. — Willy, Nov 28 '22 at 15:27
@Rodri , So you copied or used something incorrectly. I've updated my response with a gif showing my example in action. Without seeing your code, I can't tell why it doesn't work. — EldHasp, Nov 28 '22 at 18:44
what happens if you move the control to the lowest of the window and then you click on it. Tooltip is opened above or under? and tooltip arrow in which position? — Willy, Nov 28 '22 at 18:54
@Rodri , In my example, the Popup will be shown below the button, wherever that button is. The location of the Popup is set by the properties: PlacementTarget, Placement, PlacementRectangle, HorizontalOffset , VerticalOffset, CustomPopupPlacementCallback. — EldHasp, Nov 28 '22 at 19:43

How to change style of an WPF popup window

1 Answers1