1+ using System ;
2+ using System . Linq ;
3+
4+ namespace Xamarin . Forms . Controls
5+ {
6+ public class PopoverGallery : ContentPage
7+ {
8+ const string Placeholder =
9+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante dolor, maximus non dignissim non, pellentesque id felis. Etiam accumsan leo et eleifend efficitur. Donec rutrum euismod auctor. Integer metus ante, blandit eget nisl eget, egestas imperdiet libero. Sed lectus purus, placerat quis pretium nec, ullamcorper a orci. Duis eget varius purus, et mollis metus. Sed sed mi vitae justo placerat venenatis ut sit amet sem. Etiam nec neque sit amet tellus mollis faucibus. Aliquam nec urna at leo imperdiet consectetur. Quisque turpis diam, feugiat eu maximus vel, elementum mattis sem." ;
10+
11+ const string ResultTitle = "Popup Result" ;
12+ const string DismissText = "Cool, thanks!" ;
13+
14+ public PopoverGallery ( )
15+ {
16+ var layout = new Grid { HorizontalOptions = LayoutOptions . Fill , VerticalOptions = LayoutOptions . Fill } ;
17+
18+ layout . RowDefinitions . Add ( new RowDefinition { Height = GridLength . Star } ) ;
19+ layout . RowDefinitions . Add ( new RowDefinition { Height = GridLength . Auto } ) ;
20+
21+ var top = new StackLayout { Children = { PopoverWithLabel ( ) , PopoverWithLayout ( ) , TermsOfServicePopup ( ) } } ;
22+ Grid . SetRow ( top , 0 ) ;
23+
24+ // Putting one of the buttons on the bottom so if we're on the iPad we can see the little popover arrows working
25+ var bottom = new StackLayout { Children = { PopoverWithDatePicker ( ) } } ;
26+ Grid . SetRow ( bottom , 1 ) ;
27+
28+ layout . Children . Add ( top ) ;
29+ layout . Children . Add ( bottom ) ;
30+
31+ Content = layout ;
32+ }
33+
34+ Button CreateButton ( string text , string automationId , View content )
35+ {
36+ var button = new Button { Text = text , AutomationId = automationId } ;
37+ button . Clicked += async ( sender , e ) =>
38+ {
39+ var popover = new Popup ( content , text , anchor : button ) ;
40+
41+ var result = await Navigation . ShowPopup ( popover ) ;
42+
43+ await DisplayAlert ( ResultTitle , result . ToString ( ) , DismissText ) ;
44+ } ;
45+
46+ return button ;
47+ }
48+
49+ Button PopoverWithLabel ( )
50+ {
51+ return CreateButton ( "Popup with Label" , "testPopupWithLabel" ,
52+ new Label
53+ {
54+ Text = "This is just a Label inside of a Popup. This is a basic popup which takes a View, and is only light-dismissable." ,
55+ LineBreakMode = LineBreakMode . WordWrap ,
56+ HorizontalTextAlignment = TextAlignment . Center ,
57+ VerticalTextAlignment = TextAlignment . Center ,
58+ HorizontalOptions = LayoutOptions . Fill ,
59+ VerticalOptions = LayoutOptions . Fill
60+ } ) ;
61+ }
62+
63+ Button PopoverWithLayout ( )
64+ {
65+ var content = new StackLayout
66+ {
67+ Margin = new Thickness ( 20 ) ,
68+ Children =
69+ {
70+ new Image { Source = "coffee.png" , Margin = new Thickness ( 5 ) } ,
71+ new Label { LineBreakMode = LineBreakMode . WordWrap , Margin = new Thickness ( 5 ) , Text = "This is a popup with a Layout as its content." } ,
72+ new Label { LineBreakMode = LineBreakMode . WordWrap , Text = Placeholder }
73+ }
74+ } ;
75+
76+ return CreateButton ( "Popup with Layout" , "testPopupWithLayout" , content ) ;
77+ }
78+
79+
80+ Button PopoverWithDatePicker ( )
81+ {
82+ var button = new Button { Text = "Popup with DatePicker" } ;
83+
84+ button . Clicked += async ( sender , e ) =>
85+ {
86+ // Create a DateChooserPopup which uses DateChooserPopupControl as its content and is anchored to this button
87+ var popup = new DateChooserPopup ( new DateChooserPopupControl ( ) , "Select Date" , button ) ;
88+
89+ // Show the popup and await the DateTime? result
90+ DateTime ? result = await Navigation . ShowPopup ( popup ) ;
91+
92+ // Display the user's selection
93+ await DisplayAlert ( ResultTitle , result ? . ToString ( ) , DismissText ) ;
94+ } ;
95+
96+ return button ;
97+ }
98+
99+ class DateChooserPopup : Popup < DateTime ? >
100+ {
101+ public DateChooserPopup ( IPopupView < DateTime ? > popupView , string title = null , View anchor = null )
102+ : base ( popupView , title , false , anchor )
103+ {
104+ // Note that this popup is not light-dismissable
105+ }
106+
107+ protected override DateTime ? OnLightDismissed ( )
108+ {
109+ return null ;
110+ }
111+ }
112+
113+ class DateChooserPopupControl : ContentView , IPopupView < DateTime ? >
114+ {
115+ public View View => this ;
116+ Action < DateTime ? > _dismiss ;
117+
118+ public void SetDismissDelegate ( Action < DateTime ? > dismissDelegate )
119+ {
120+ // Keep track of the dismiss delegate so we can tell the popup what the user selects
121+ _dismiss = dismissDelegate ;
122+ }
123+
124+ public DateChooserPopupControl ( )
125+ {
126+ // Build the UI for our popup
127+ var datePicker = new DatePicker { HorizontalOptions = LayoutOptions . Center } ;
128+ var button = new Button { Text = "OK" , HorizontalOptions = LayoutOptions . Center } ;
129+
130+ Content = new StackLayout
131+ {
132+ Margin = new Thickness ( 40 ) ,
133+ Children =
134+ {
135+ new Label
136+ {
137+ Text = "Choose a Date" ,
138+ HorizontalOptions = LayoutOptions . Center ,
139+ HorizontalTextAlignment = TextAlignment . Center
140+ } ,
141+ datePicker ,
142+ button
143+ }
144+ } ;
145+
146+ // When the user clicks OK, we report the result back to the popup
147+ button . Clicked += ( sender , args ) => { _dismiss ? . Invoke ( datePicker . Date ) ; } ;
148+ }
149+ }
150+
151+ Button TermsOfServicePopup ( )
152+ {
153+ var button = new Button { Text = "Terms of Service Popup" } ;
154+
155+ // Define the content which goes into the popup (in this case, a scrollview with some really long text to read)
156+ var tos = new Label
157+ {
158+ LineBreakMode = LineBreakMode . WordWrap ,
159+ Text = "This example demonstrates a convenience method for creating a popup which returns a binary result (e.g. yes/no, accept/reject, ok/cancel).\n \n "
160+ + string . Concat ( Enumerable . Repeat ( Placeholder + "\n " , 10 ) )
161+ } ;
162+
163+ var scrollView = new ScrollView { Content = tos , Margin = new Thickness ( 20 ) } ;
164+
165+ // Create the popup, specifying the text for the buttons
166+ var tosPopup = new BinaryResultPopup ( scrollView , "Terms of Service" , anchor : button , affirmativeText : "Accept" , negativeText : "Reject" , size : new Size ( 400 , 500 ) ) ;
167+
168+ button . Clicked += async ( sender , args ) =>
169+ {
170+ // Reset the popup in case we've already gotten a result from it
171+ tosPopup . Reset ( ) ;
172+
173+ // Display the popup and await the result
174+ var result = await Navigation . ShowPopup ( tosPopup ) ;
175+
176+ // Show the result that we just got back from the popup
177+ await DisplayAlert ( ResultTitle , result . ToString ( ) , DismissText ) ;
178+ } ;
179+
180+ return button ;
181+ }
182+ }
183+ }
0 commit comments