Popup with Caliburn Micro in Windows Phone

Question

Could anyone explain how to use the XAML popups with Caliburn Micro.

Thanks

Edit:(Made my code more releavent to what I want to achieve) When I define a popup in xaml like this:

<Button x:Name="ShowPopup" Content="Popup"/>
<Popup x:Name="my_popup_xaml" Grid.Row="2">
    <Border  BorderThickness="2" Margin="10" BorderBrush="Green">
        <StackPanel Background="LightBlue">
            <TextBlock Text="Select Option" FontSize="21" Margin="10,0" />
            <StackPanel Orientation="Horizontal" Margin="0,10">
                <Button x:Name="SelectPhoto"  Content="Select photo From Library" Width="215"/>
                <Button x:Name="CapturePhoto"    Content="Use Camera"   Width="215"/>
            </StackPanel>
        </StackPanel>
    </Border>
</Popup>

How do I display this popup using the WindowManager?

Should I create new View Model for this because I just need to use PhotoChooser task and the Camera Capture task here?

How do I bind Popup to my View Model.

Edit:

@Charleh, Your Suggestion for using with windowmanager with a separate ViewModel worked, with a minor tweak.

I removed the <Popup> tag and used the window manager to display the popup.

But now I cannot close the popup and the popup is cropped as it's displayed at the top of the screen. How do I fix this?

Edit: I was able to close the dialog using the the Screen's TryClose() Method.

When I used the ShowDialog method instead the of the ShowPopup method and the alignment of the window was a bit better but it is still stuck at the top and wont align in the center.

Edit: I have created a new PhoneApplicationPage(Windows Phone 8 equivalent of window) and displayed it as a dialog. The problem with this approach is that the PhoneApplicationPage is not stretching automatically to fill the screen space(Which it does when not displayed as a dialog). It's just stretching to accommodate the content inside it. Setting `VerticalAlignment="Stretch" has no effect.

Giving the Height property a particular value is not suitable because of it does not adjust to well to different phone resolutions.

@Charleh I tried specifying height and width like this:

Dictionary<string, object> properies = new Dictionary<string, object>();
properies.Add("Height", 768);
properies.Add("Width", 480);
windowManager.ShowDialog(new ImageSelectorPopupViewModel(),null,properies);

This Code has no effect (although specifying the height in Xaml works but I cannot use that as I have to accommodate for different screen resolutions on the phone)

Answer 1

You really need to read up on Caliburn Micro before you post - there are literally tons of articles showing how to bind commands on your view to methods on your VM

To do so in this case either:

1. Bind using convention by giving your button the same name as the method

   <Button x:Name="ShowPopup" />

2. Bind using action message syntax:

   <Button cal:Message.Attach="[ShowPopup]" />

All the answers are here: http://caliburnmicro.codeplex.com/documentation

(specifically: http://caliburnmicro.codeplex.com/wikipage?title=All%20About%20Actions&referringTitle=Documentation )

You do the same thing with your button, so you can do the same thing with your popup

(have you also considered using Caliburns WindowManager which has a ShowPopup method?)

Edit:

On re-reading it looks like you want to use the same ViewModel for your current View and Popup - is this the case or do you want a new ViewModel for your Popup? I'd suggest using WindowManager, and creating a ViewModel for the popup - it will be more in-line with what CM already does