PopupBox - Changing the style of the ToggleButton

[mprmax]

Is there a way to change the style of the ToggleButton used in the PopupBox so it can be a MaterialDesignActionToggleButton. What I really want is a PopupBox that is opened AND closed by clicking on the ToggleButton (and not closed by clicking on anything else) with animation to flip between 3 vertical dot icon and a close icon.

Any ideas would be gratefully received (I'm very new to this WPF stuff so struggling a bit, but enjoying it)

[corvinsz]

Since the attribute [TemplatePart(Name = TogglePartName, Type = typeof(ToggleButton))] on the PopupBox class defines that the ToggleButton with the name Part_Toggle has to be a ToggleButton, you can't use a "normal" Button for that.

Currenty I am not aware of any functionality of disabling the behavior that the PopupBox closes if anything else in the Window is clicked.

What you are trying to achieve could look something like this:

<Grid>
    <ToggleButton x:Name="myToggleButton">
        <ToggleButton.Style>
            <Style BasedOn="{StaticResource MaterialDesignFloatingActionButton}" TargetType="ToggleButton">
                <Setter Property="Content">
                    <Setter.Value>
                        <materialDesign:PackIcon Kind="DotsHorizontal" />
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Content">
                            <Setter.Value>
                                <materialDesign:PackIcon Kind="DotsVertical" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ToggleButton.Style>

    </ToggleButton>
    <Popup AllowsTransparency="True"
           IsOpen="{Binding IsChecked, ElementName=myToggleButton}"
           Placement="Bottom"
           PlacementTarget="{Binding ElementName=myToggleButton}"
           PopupAnimation="Scroll">
        <materialDesign:Card Width="200"
                             Height="200"
                             UniformCornerRadius="20">
            <TextBlock HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       Text="Your content" />
        </materialDesign:Card>
    </Popup>
</Grid>

With the code above you don't have the "flip" or "morphing" animation between the 2 icons in the button.
To my knowledge this is not trivial to implement. You can check the Style MaterialDesignHamburgerToggleButton (here) to see how this morphing animation can be done.