I want to show a popup over the current page. Within this popup I need to ask for a password and a checkbox (switcher). The popup should look similar to the popup which you get when iTunes asks for your password to install an app.
Unfortunately I cannot use PushModalAsync because it opens a new page and the current page contents are not visible anymore. DisplayAlert and DisplayActionSheet are also not configurable enough (AFAIK). So I tried it like this:
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ListView AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<!-- my normal page -->
</ListView>
<BoxView AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All"
HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"
Color="{x:Static common:Colors.GreyedOut}"
IsVisible="{Binding PasswordDialogIsVisible}" />
<StackLayout AbsoluteLayout.LayoutBounds="0.5, 0.5, 0.5, 0.5" AbsoluteLayout.LayoutFlags="All"
Spacing="0" Padding="0"
WidthRequest="440"
HeightRequest="300"
BackgroundColor="{x:Static common:Colors.PageBackground}"
IsVisible="{Binding PasswordDialogIsVisible}">
<StackLayout Spacing="10" Padding="20"
WidthRequest="440">
<Label Text="Document Password" Font="Bold"
XAlign="Center"
WidthRequest="400" />
<Label Text="The document is password protected. Please enter your password and choose if it should be used to open other documents which might be opened later."
XAlign="Center"
WidthRequest="400" />
<Entry Text="{Binding Password}" Placeholder="Password" IsPassword="True"
WidthRequest="400" />
<!--<SwitchCell Text="Remember password" On="{Binding RememberPassword}" />-->
<StackLayout Orientation="Horizontal" WidthRequest="400" Spacing="10" >
<Switch /> <!-- On="{Binding RememberPassword}" /> -->
<Label Text="Remember password" VerticalOptions="CenterAndExpand" />
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" Spacing="0" WidthRequest="440">
<Button Text="Cancel" WidthRequest="192" HorizontalOptions="CenterAndExpand" BorderWidth="1" BorderColor="{x:Static common:Colors.PopupButtonBorder}" BorderRadius="0" Command="{Binding PasswordCancelCommand}" />
<Button Text="OK" WidthRequest="192" HorizontalOptions="CenterAndExpand" BorderWidth="1" BorderColor="{x:Static common:Colors.PopupButtonBorder}" BorderRadius="0" Command="{Binding PasswordOKCommand}" />
</StackLayout>
</StackLayout>
</AbsoluteLayout>
This looks like this:
But this approach also has several problems where I couldn't find an answer yet. I only tested on the iPad so far. The other OSes/devices come when this works.
- How can I make the StackLayout showing the whole popup exactly as high as its contents? I set the WidthRequest to 440 and the HeightRequest to 300 but it is much higher than wide.
- How can I bind the current state of a Switch to the property of my ViewModel? SwitchCell has "On" but Switch only has "IsToggled" which seems useless to me.
- How can I set the width of both buttons to exactly 50% of the popup? If I use half of the WidthRequest of their container then they are much too wide in portrait and not wide enough in landscape.
- The whole ContentPage is showed in a NavigationPage but my popup does not hide the navigation bar and toolbar items. How can I do that?
- In which units are the WidthRequest, HeightRequest and Thickness?
- How can I set the size in mm or inches? This would be much better for cross platform development where you have different devices with different dpi.
- And as there are so many problems I have to ask: Is there an easier way to do this?