MVVM + WPF + Popup = clueless

Question

I'm still working on modifying my existing WPF application to be "compliant" with the MVVM approach. I'm getting pretty darned close, but am not sure how to solve one of remaining few hurdles.

I have a GUI element (currently a button, though it could be a label), where when the mouse enters it, it fires the MouseEnter event, and this creates a popup in the code-behind. The popup is composed of a simple stackpanel layout with several buttons. Each button's Click event currently is assigned to the same event handler, except that I change the Tag property to do a simple (cheesy) command parameter. I'm wrestling with the "correct" way to do this in MVVM, because the way I'm doing it now is pretty ugly.

In order to solve this, I think this is the direction I should head in, but would appreciate any additional input you can offer me. :)

1. Create Popup in XAML. Since my Popup contents are static, I should be able to create the Popup entirely in XAML. In addition, each button would be bound to the same ICommand-derived class. e.g.

   <Popup x:Key="MyPopup" StaysOpen="False" Placement="Right">
       <Border Background="White" BorderBrush="Black" Padding="5" BorderThickness="2" CornerRadius="5">
           <StackPanel Orientation="Vertical">
               <Button Command="{Binding MyCommand}" CommandParameter="5">5</Button>
               <Button Command="{Binding MyCommand}" CommandParameter="10">10</Button>
               <Button Command="{Binding MyCommand}" CommandParameter="15">15</Button>
               <Button Command="{Binding MyCommand}" CommandParameter="20">20</Button>
           </StackPanel>
       </Border>
   </Popup>
   

2. Make the Popup pop up via a Trigger, e.g.

                           <Button.Triggers>
                               <Trigger Property="Button.IsMouseOver" Value="True">
                                   <Setter TargetName="MyPopup" Property="IsOpen" Value="True" />
                               </Trigger>
                           </Button.Triggers>
   

I think #1 is ok, but I am struggling with #2. Is this the right way to approach the problem? And if so, what's the correct XAML syntax for getting the Popup's IsOpen property to be set to True? I couldn't find examples for this.

If my whole thinking is flawed, I would love to hear what my other options are. Thanks!

Answer 1

Here's what I would do, first I would separate my reusable parts into resources, and reference them using ContentControls in XAML. This applies to the Popup as well as to the Button. However I don't wish to restrict myself to having only a button, so I'll use a ContentControl as well for that:

The Popup template:

<ControlTemplate x:Key="PopupTemplate">
    <Border 
                Background="White" 
                BorderBrush="Black" 
                Padding="5" 
                BorderThickness="2" 
                CornerRadius="5">
        <StackPanel Orientation="Vertical">
            <Button Command="{Binding MyCommand}" 
                            CommandParameter="5">5</Button>
            <Button Command="{Binding MyCommand}" 
                            CommandParameter="10">10</Button>
            <Button Command="{Binding MyCommand}" 
                            CommandParameter="15">15</Button>
            <Button Command="{Binding MyCommand}" 
                            CommandParameter="20">20</Button>
        </StackPanel>
    </Border>
</ControlTemplate>

The ContentControl template:

<ControlTemplate x:Key="MyControlTemplate" TargetType="ContentControl">
    <Grid Name="MyControl">
        <ContentPresenter Content="{TemplateBinding Content}"/>
        <Popup Name="MyPopup" StaysOpen="True" Placement="Bottom">
            <ContentControl Template="{StaticResource PopupTemplate}"/>
        </Popup>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger SourceName="MyControl" 
                 Property="UIElement.IsMouseOver" 
                 Value="True">
            <Setter TargetName="MyPopup" 
                    Property="Popup.IsOpen" 
                    Value="True"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Now in the main window XAML, I would create the following:

<ContentControl Template="{StaticResource MyControlTemplate}">
    <Button Content="Test"/>
</ContentControl>

If you have any questions, I'll be happy to answer.