WPF Popup don't appears on ToggleButton Checked

Question

Firstly, I apologize if my English is not good.

I have a custom WPF control, which is a RadioButton. I created a control template for the RadioButton consisting of a grid with three columns containing an icon (Path), text (TextBlock), and another icon (Path).

<RadioButton GroupName="{Binding ElementName=this, Path=Group}" Style="{StaticResource MenuItemStyle}"/>

Here is the style:

<Style x:Key="MenuItemStyle" TargetType="{x:Type ToggleButton}">
     <Setter Property="Background" Value="Transparent"/>
     <Setter Property="Foreground" Value="{Binding ElementName=this, Path=ForegroundColor}"/>
     <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="{x:Type ToggleButton}">
                 <Border Background="{TemplateBinding Background}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                     <Grid>
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="{Binding ElementName=this, Path=IconMargin}"/>
                             <ColumnDefinition Width="*"/>
                             <ColumnDefinition Width="{Binding ElementName=this, Path=IconMargin}"/>
                         </Grid.ColumnDefinitions>

                         <Path Data="{Binding ElementName=this, Path=Icon}"
                               Stretch="Uniform"
                               Style="{StaticResource MenuIconStyle}"/>

                         <TextBlock Text="{Binding ElementName=this, Path=Text}"
                                    Grid.Column="1"
                                    Style="{StaticResource MenuTextStyle}"/>

                     <Path Data="{Binding ElementName=this, Path=ChevronIcon}"
                           Width="{Binding ElementName=this, Path=ChevronIconWidth, FallbackValue='8'}"
                           Stretch="Uniform"
                           Grid.Column="2"
                           Style="{StaticResource ChevronIconStyle}"/>
                            
                     </Grid>

                 </Border>

                 <ControlTemplate.Triggers>
                     <Trigger Property="IsMouseOver" Value="True">
                         <Setter Property="Foreground" Value="{Binding ElementName=this, Path=HoverForegroundColor}"/>
                     </Trigger>
                     <Trigger Property="IsFocused" Value="True">
                         <!--<Setter Property="Foreground" Value="{Binding ElementName=this, Path=HoverForegroundColor}"/>-->
                     </Trigger>
                     <Trigger Property="IsChecked" Value="True">
                         <Setter Property="Background" Value="{Binding ElementName=this, Path=SelectedBGColor}"/>
                         <Setter Property="Foreground" Value="{Binding ElementName=this, Path=HoverForegroundColor}"/>
                     </Trigger>
                 </ControlTemplate.Triggers>
                        
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>

In MainWindow, I placed the custom control inside a ToggleButton, and then I have a Popup that appears based on the checked state of the ToggleButton.

<ToggleButton x:Name="btnSettings" HorizontalAlignment="Left"
               Style="{StaticResource MenuButtonStyle}" Background="Red"
               Foreground="{DynamicResource PrimaryBackgroundColor}">
     <Grid>
         <ui:MenuItem Text="Settings"
                  Icon="{DynamicResource Add}"
                  IconSize="10"
                  IconMargin="24"
                  ChevronIcon="{DynamicResource ChevronDown}"
                  ForegroundColor="{DynamicResource PrimaryBackgroundColor}"
                  HoverForegroundColor="{DynamicResource SelectedBackgroundColor}">
         </ui:MenuItem>
         <Popup IsOpen="{Binding ElementName=btnSettings, Path=IsChecked}" StaysOpen="False">
             <Border>
                 <TextBlock Text="I am Popup"/>
             </Border>
         </Popup>
     </Grid>
 </ToggleButton>

Now, When I click on the ToggleButton outside the text or icon content, the Popup appears, but clicking directly on the text or icon does not trigger the Popup to appear.

I want the Popup to appear when clicking on any pixel inside the ToggleButton.

Can anyone help me please