web-dev-qa-db-ja.com

xamarin.formsを使用してポップアップでフォームを作成する方法は？

Xamarin.formsを使用していますが、次の画像のようなポップアップビューでログインフォームが必要です。

https://github.com/michaeled/FormsPopup/blob/master/pictures/androidPopup.gif?raw=true

現在、私はPushModalAsyncを使用していますが、これにより、フォームの新しいページが、必要に応じてポップアップビューを表示するのではなく、画面全体に表示されます。

Xamarin.formsを使用してこれを行う方法はありますか？そうでない場合、クロスプラットフォーム（Android、iOS、およびUWP）の代替手段は既に実装されていますか？

c#xamarinpopupmodal-dialogxamarin.forms
13
Mr. Phil

XLabs には、これを行うために使用できるPopupLayoutがあります。

var pop = new XLabs.Forms.Controls.PopupLayout();

// PatientSearch is a ContentView I was to display in the popup
var search = new PatientSearch(data, this);
search.WidthRequest = 600;
search.HeightRequest = 500;
search.BackgroundColor = new Color (1, 1, 1, 0.8);
pop.ShowPopup(search);
4
Jason

ポップアップをシミュレートするためにAbsoluteLayoutを使用します。

<AbsoluteLayout x:Name="rootLayout" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
        <StackLayout x:Name="mainLayout" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
            <!-- Put your main contents-->
        </StackLayout>
        <ContentView x:Name="popupOverlay"
                     IsVisible="{Binding IsPopupVisible}"
                     BackgroundColor="#C0808080"
                     AbsoluteLayout.LayoutBounds="0,0,1,1"
                     AbsoluteLayout.LayoutFlags="All">
            <StackLayout x:Name="popupContent"
                         VerticalOptions="Center"
                         HorizontalOptions="Center"
                         WidthRequest="200"
                         HeightRequest="200">
                <Entry Placeholder="UserName"></Entry>
                <Entry Placeholder="Password"></Entry>
            </StackLayout>
        </ContentView>
</AbsoluteLayout>
  1. まず、バックグラウンドコンテンツ、つまりメインコンテンツをAbsoluteLayout内に配置します
  2. 次に、フォームコンテンツを子として保持するContentView（popupOverlay）を追加します。この外部ビューは、半透明の灰色がかった背景色（＃C 808080）で画面全体に広がる必要があります。
  3. オーバーレイ内のポップアップ要素レイアウト（popupContent）を中央に配置します。
  4. また、通常、popupContentの閉じるボタンを使用して非表示にします。
  5. PopupOverlayのIsVisibleプロパティをそれぞれtrueまたはfalseに設定して、ポップアップを表示または非表示にします。
1
Shiblu

私が使用した一般的な解決策は、これを解決するために使用され、すべてのフォームを含むStackLayoutを作成し、現在使用しているページの子を挿入することです。

PopupPage popUp; //This will be the layout of the form

Page : ContentPage {

    var gird = new Gird();

    popUp = PopupPage();
    popUp.IsVisible = false;

    var mainContainer = new StackLayout();

    mainContainer.Children.Add(All you UI stuff..);

    var btn = new Button();
    btn.Clicked += OnButtonClicked;

    grid.Children.Add(mainContainer,0,0);
    grid.Children.Add(popUp,0,0);

}

したがって、popoUPを表示するには、IsVisibleプロパティを使用する必要があります。次に例を示します。

void OnButtonClicked(){

    //You can center the popup using Vertical options or whatever you need
    //and to resize the pop up you can do different calculations like
    //popUp.Width = ScreenWidth / 2 and popUp.Height = ScreenWidth / 2
    popUp.IsVisile = true;

}

そして、これはすべてのプラットフォームで機能します。唯一の欠点は、透明なレイアウトが得られないことですが、そのために使用できます：

https://github.com/gaborv/xam-forms-transparent-modal

1
Mario Galván