[WPF] DataGridCellをWクリックした時にトグルボタンにバインドしたポップアップを開いたままにしたい

Question

前提

DataGridのMouseDoubleClickイベントにセルをWクリックした時に、トグルボタンのIsCheckedプロパティをTrueにし、トグルボタンにバインドされているポップアップを表示する処理を仕込んでいます。

問題・実現したいこと

以下のGifはセルをWクリックした時の動作です。

(3回Wクリックしています)

セルをWクリック時にポップアップが表示されすぐに消えてしまいます。
これを表示されたままにしたいのですが、上記の原因がわかりません。
何か解決方法はありますでしょうか？

コード

<!--トグルボタン-->
<ToggleButton Grid.Row="1" x:Name="ToggleButtonRegistedInfo" Margin="0" IsChecked="{Binding IsOpen, ElementName=PopupRegistedInfo}">
    <ToggleButton.Style>
        <Style TargetType="ToggleButton" BasedOn="{StaticResource NormalToggleButtonStyle}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsOpen, ElementName=PopupRegistedInfo}" Value="True">
                    <Setter Property="IsHitTestVisible" Value="False"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Style>
    <Image Source="./Icons/assignment_white_192x192.png"/>
</ToggleButton>

<!--トグルボタンにバインドされているポップアップ-->
<Popup x:Name="PopupRegistedInfo" PlacementTarget="{Binding ElementName=RegistedInfoToggleButton}" Style="{StaticResource MenuPopupStyle}">
    <Border Style="{StaticResource PopupPanelBorderStyle}">
        <ScrollViewer Margin="5" VerticalScrollBarVisibility="Hidden">
            <StackPanel x:Name="StackPanelRegistedInfo">
                <Label Content="R E G I S T E D   I N F O" FontSize="20"/>
                <Border Margin="0,5,0,5" Style="{StaticResource BottomSeparateBorderStyle}"/>
                <Grid Margin="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Button Grid.Column="0" 
                            x:Name="ButtonDeleted" 
                            Content="削除" FontWeight="DemiBold" Margin="5,0,5,0" Width="Auto" Visibility="Collapsed"     
                            Background="{Binding Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Border}}}"
                            Click="ButtonDeleted_Click"/>
                    <Button Grid.Column="1" 
                            x:Name="ButtonUpdated" 
                            Content="更新" FontWeight="DemiBold" Margin="5,0,5,0" Width="Auto" Visibility="Collapsed" 
                            Background="{Binding Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Border}}}"
                            Click="ButtonUpdated_Click"/>
                    <Button Grid.Column="2" 
                            x:Name="ButtonRegisted" 
                            Content="登録" FontWeight="DemiBold" Margin="5,0,5,0" Width="Auto" Visibility="Collapsed" 
                            Background="{Binding Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Border}}}"
                            Click="ButtonRegisted_Click"/>
                </Grid>
                <Border Margin="0,5,0,5" Style="{StaticResource BottomSeparateBorderStyle}"/>
            </StackPanel>
        </ScrollViewer>
    </Border>
</Popup>

// データグリッドのマウスWクリックイベント
private void View_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
    if (!(sender is DataGrid dataGrid))
        return;

    if (dataGrid.SelectedCells.Count == 0 || dataGrid.SelectedCells[0].Column.DisplayIndex != 0)
        return;

    // Popupにあるテキストボックスなどに値を入れる処理
    SelectedItems = (string[])dataGrid.SelectedCells[0].Item;
    for (int i = 0; i < SelectedItems.Length; i++)
    {
        var element = StackPanelRegistedInfo.Children[ControlIndexes[i]];
        if (element is TextBox textBox)
        {
            textBox.Text = SelectedItems[i];
        }
        else if (element is ComboBox comboBox)
        {
            comboBox.Text = SelectedItems[i];
        }
    }
    ButtonUpdated.Visibility = Visibility.Visible;
    ButtonDeleted.Visibility = Visibility.Visible;

    // ToggleButtonとバインドしているPopupを表示
    ToggleButtonRegistedInfo.IsChecked = true;
}

試したこと

MouseUpイベントでは上記の問題が発生しませんでした。

Answer 1

自己解決しました。

原因

まず今回の質問の反省点としてリソースで定義されたスタイルも乗せるべきでした。
以下はポップアップに適用されているスタイルです。

<!--メニュ―用ポップアップのスタイル-->
<Style TargetType="Popup" x:Key="MenuPopupStyle">
    <Setter Property="AllowsTransparency" Value="True"/>
    <Setter Property="StaysOpen" Value="False"/>
    <Setter Property="Placement" Value="Left"/>
    <Setter Property="PopupAnimation" Value="Fade"/>
</Style>

今回の問題としては、StaysOpenプロパティが原因でした。
このプロパティは値がFalseの時にフォーカスが外れると自動的にポップアップを消すもので、Wクリックイベントではこれが働くようです。

解決策

解決策としては、StaysOpenプロパティをトグルボタンのIsChekcedプロパティにバインドし、ボタンの押下以外ではポップアップを消えないようにしました。

以下、コードです。

<ToggleButton Grid.Row="1" x:Name="ToggleButtonRegistedInfo" Margin="0" IsChecked="{Binding IsOpen, ElementName=PopupRegistedInfo}" Style="{StaticResource NormalToggleButtonStyle}">
    <Image Source="./Icons/assignment_white_192x192.png"/>
</ToggleButton>
<Popup x:Name="PopupRegistedInfo" PlacementTarget="{Binding ElementName=ToggleButtonRegistedInfo}" StaysOpen="{Binding IsChecked, ElementName=ToggleButtonRegistedInfo}" Style="{StaticResource MenuPopupStyle}">
    <Border Style="{StaticResource PopupPanelBorderStyle}">
        <ScrollViewer Margin="5" VerticalScrollBarVisibility="Hidden">
            <StackPanel x:Name="StackPanelRegistedInfo">
                <Label Content="R E G I S T E D   I N F O" FontSize="20"/>
                <Border Margin="0,5,0,5" Style="{StaticResource BottomSeparateBorderStyle}"/>
                <Grid Margin="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Button Grid.Column="0" 
                            x:Name="ButtonDeleted" 
                            Content="削除" FontWeight="DemiBold" Margin="5,0,5,0" Width="Auto" Visibility="Collapsed"     
                            Background="{Binding Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Border}}}"
                            Click="ButtonDeleted_Click"/>
                    <Button Grid.Column="1" 
                            x:Name="ButtonUpdated" 
                            Content="更新" FontWeight="DemiBold" Margin="5,0,5,0" Width="Auto" Visibility="Collapsed" 
                            Background="{Binding Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Border}}}"
                            Click="ButtonUpdated_Click"/>
                    <Button Grid.Column="2" 
                            x:Name="ButtonRegisted" 
                            Content="登録" FontWeight="DemiBold" Margin="5,0,5,0" Width="Auto" Visibility="Collapsed" 
                            Background="{Binding Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Border}}}"
                            Click="ButtonRegisted_Click"/>
                </Grid>
                <Border Margin="0,5,0,5" Style="{StaticResource BottomSeparateBorderStyle}"/>
            </StackPanel>
        </ScrollViewer>
    </Border>
</Popup>

トグルボタンのIsHitTestVisible辺りを丸々消し、Popupに以下を追加しています。

StaysOpen="{Binding IsChecked, ElementName=ToggleButtonRegistedInfo}"

最後に

ただこの解決方法だと、「フォーカスが外れた時に自動的にポップアップを消す」という動作ができなくなるため、他の機能部分で自動的にポップアップを消す動作をしていると、この解決方法を導入している部分のみ変則的な動きになり、違和感の原因になってしまいます。

開発中のアプリは自分用のためこれで解決としますが、エンドユーザーを考えるならもう少し考える必要がありそうです。

(私のWPFに対する知見が浅いのでもっとスタイリッシュな解決方法があるような気もしますが...)