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 ShowPopupmethod and the alignment of the window was a bit better but it is still stuck at the top and wont align in the center.

Dialog Image

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)

Well I've never done anything with WP8 so I'm not sure - can you post a screenshot? — Charleh
When you create a popup or dialog via ShowPopup or ShowDialog, CM inspects the view type: if the view does not inherit from Popup/Window it will create one and wrap your control with the new instance. You can try inheriting from Popup or Window instead so you can set the location etc - you can also pass parameters to ShowPopup/ShowDialog to set window location/size. void ShowDialog(object rootModel, object context = null, IDictionary<string, object> settings = null);. The dictionary allows you to pass key/value pairs which will be set on the window/popup. Let me know if this helps — Charleh
e.g. ShowPopup(SomeViewModel, null, Properties); where properties = dictionary with an entry of Key = "Width" and Value = 100 — Charleh

Charleh Charleh · Accepted Answer · 2013-10-07T11:34:54

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:

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

<Button x:Name="ShowPopup" />
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

Popup with Caliburn Micro in Windows Phone

1 Answers