Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 58056

Modal Popup Window

$
0
0

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?

Viewing all articles
Browse latest Browse all 58056

Trending Articles