How to bind popup user control to view model and how to handle back button? (Windows Phone 8.1 Runtime) - mvvm

Question

I'm working on WP 8.1 runtime application and I'm using Caliburn.Micro. Application follows MVVM pattern. I have an ItemPageView and ItemPageViewModel and data binding works as it should.
I want to add popup (UserControl) over ItemPageView(Page) after I click one item on ItemPage. Popup has only one ScrollViewer containg one Image and I want to do something like this :
<Image x:Name="imageFull"
Source="{Binding _currentItem.ImageURL}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
_currentItem is a property of ItemPageViewModel.
My second problem is related to Back button. I've added this to my code:
void HardwareButtons_BackPressed(object sender, Windows.Phone.UI.Input.BackPressedEventArgs e)
{
Frame frame = Window.Current.Content as Frame;
if (_popUpActive)
{
_popUpActive = false;
_showImagePopUp.Close();
frame.GoForward();
//var lastPage = frame.BackStack.LastOrDefault();
//frame.Navigate(typeof(SingleGuideView));
e.Handled = true;
}
else
{
frame.GoBack();
e.Handled = true;
}
}
After I click on Back button Popup will close, and after that, it will navigate back. Only "solution" to stay on current view is to call frame.GoForward(); .

Answer 1

About the Popup, you can write some Code like the following in you XAML (Keep the Popup in just below the First Grid):
<!-- This is the First Grid -->
<Grid>
<Popup x:Name="myPopup" Width="400">
<ScrollViewer>
<StackPanel>
<Image x:Name="imageFull"
Source="{Binding _currentItem.ImageURL}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</StackPanel>
</ScrollViewer>
</Popup>
</Grid>
You can handle the problem with the Popup by having a Counter for the Hardware Back Button Press. Have a look at the Code Below:
int _popUpCounter = 0, _dummyCounter = 0;
void HardwareButtons_BackPressed(object sender, Windows.Phone.UI.Input.BackPressedEventArgs e)
{
_dummyCounter++;
Frame frame = Window.Current.Content as Frame;
if (_popUpCounter == 0 && _dummyCounter == 1)
{
_popUpCounter = 1;
_popUpActive = false;
_showImagePopUp.Close();
frame.GoForward();
//var lastPage = frame.BackStack.LastOrDefault();
//frame.Navigate(typeof(SingleGuideView));
e.Handled = true;
}
else if (_popUpCounter == 1 && _dummyCounter == 2)
{
_popUpCounter = _dummyCounter = 0;
frame.GoBack();
e.Handled = true;
}
}
This will help you with the problem related to Popup.