PopUpにDateTime Picker、ドロップダウンリスト

Question

初心者のような他のコントロールが含まれています。私はWin10で、ドロップダウンボックス、DatePcikerなどのような多くのコントロールを含むことができるPopUp UIがあることを覚えています。このPopUpはXamlで構築できます。

私はタブレット用のアプリケーションを開発しています。 DropUp List、DatePicker、Time Pickerを含むXamarinフォームでこのようなPopUpを使用することは可能ですか？このような複雑なUIを行うことをお勧めしますか？ AndroidとiOSで問題が発生しますか？

問題：更新

<?xml version="1.0" encoding="utf-8" ?> 

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      x:Class="MyApp.View.PopUpDemo" 
      Title="PopUp Demo" 
      Icon="itemIcon3"> 

<Grid> 
    <Grid> 

     <!--Your Page xaml--> 

     <Button x:Name="btnPopUp" Click="ShowPopUp"/> 

    </Grid> 

    <Grid HorizontalOptions="Fill" BackgroundColor="##60000000" IsVisible="{Binding GridVisibility}"> 
     <Grid VerticalOptions="CenterAndExpand"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width=".5*"/> 
       <ColumnDefinition Width="9*"/> 
       <ColumnDefinition Width=".5*"/> 
      </Grid.ColumnDefinitions> 
      <Frame Grid.Column="1" Padding="0" HasShadow="True" OutlineColor="#e6e6e6"> 
       <Grid BackgroundColor="White" RowSpacing="0" ColumnSpacing="0"> 
       <!--content for popup--> 
       </Grid> 
      </Frame> 
     </Grid> 

    </Grid> 
</Grid> 

</ContentPage> 

so ,I can use a button to open or close it. 

var button = new Button {Text = "Show Popup"}; 
button.Clicked += (s, e) => popup.Show(); 

XAML

のポップアップを作成するために、どのように私は知っているしたいと思います：

を、私は通常のContentPageを使用しています。

1）その中で、私はあなたのマークアップ<グリッド>を置いて、私はContentPage.Content > <を削除します。これは正しいです？

2）FrameはPopUpになりますか？
3）PopUpを表示するためにbtnPopUpで使用するコードは？

ありがとうございました

Answer 1

はい、パフォーマンス上の問題なしに達成できます。次のようにオーバーレイを使用してポップアップを表示することができます

<Grid> 
    <Grid> 
     <!--Your Page xaml--> 
    </Grid> 
    <Grid HorizontalOptions="Fill" BackgroundColor="##60000000" IsVisible="{Binding GridVisibility}"> 
     <Grid VerticalOptions="CenterAndExpand"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width=".5*"/> 
       <ColumnDefinition Width="9*"/> 
       <ColumnDefinition Width=".5*"/> 
      </Grid.ColumnDefinitions> 
      <Frame Grid.Column="1" Padding="0" HasShadow="True" OutlineColor="#e6e6e6"> 
       <Grid BackgroundColor="White" RowSpacing="0" ColumnSpacing="0"> 
       <!--content for popup--> 
       </Grid> 
      </Frame> 
     </Grid> 

    </Grid> 
</Grid> 

これは非常に簡単です。ここで私はこれを達成するためにグリッドを追加しました。他のレイアウトを使用することもできます。しかし、性能グリッドは、xamarinチームごとに優れています。

2番目のグリッドでは、Visibilityプロパティを追加して、どのイベントでも結びつけることができます。 ここではポップアップの背景色が## 60000000になっているので、ポップアップが表示されたときに背景が明るい黒の色効果で透明になります。

複数の画面で同じポップアップを表示する必要がある場合は、サードパーティのプラグインhttps://github.com/rotorgames/Rg.Plugins.Popupを使用すると簡単に作業できます。 youpage.xaml.csにPopupPageでcontentPageを置き換えます。このためには、新しいcontentpageを作る

<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms" 
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
     xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup" 
     xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup" 
     x:Class="" 
     BackgroundColor="##60000000" 
     InputTransparent="True" 
     HasSystemPadding="True" 
     CloseWhenBackgroundIsClicked="False"> 
<pages:PopupPage.Animation> 
    <animations:MoveAnimation 
       PositionIn="Bottom" 
       PositionOut="Bottom"/> 
</pages:PopupPage.Animation> 
<Grid> 
    <!--your xaml code--> 
</Grid> 

注意してcontentpageを交換する必要があります。ポップアップエフェクトを得るには、レイアウトは最初の例のようにする必要があります。ここで素晴らしいアニメーション効果を得ることもできます。あなたのサイトでもっと詳しく知ることができます。

今、あなたは呼び出すことでポップアップを呼び出すことができます。navigation.PushPopupAsync(new YourContentPage());

そして、私の更新を参照してください。