1+ using System ;
2+ using System . Linq ;
3+ using Microsoft . Maui ;
4+ using Microsoft . Maui . Controls ;
5+ using Microsoft . Maui . Controls . PlatformConfiguration ;
6+ using Microsoft . Maui . Controls . PlatformConfiguration . iOSSpecific ;
7+ using Microsoft . Maui . Graphics ;
8+
9+ namespace Maui . Controls . Sample . Pages ;
10+
11+ public partial class iOSLargeTitlePage : ContentPage
12+ {
13+ public iOSLargeTitlePage ( )
14+ {
15+ Title = "Large Titles" ;
16+
17+ // Set the parent NavigationPage's BarTextColor to black when this page appears
18+ Appearing += ( s , e ) =>
19+ {
20+ if ( Parent is Microsoft . Maui . Controls . NavigationPage navPage )
21+ {
22+ navPage . BarTextColor = Colors . Black ;
23+ }
24+ } ;
25+
26+ var scrollView = new Microsoft . Maui . Controls . ScrollView
27+ {
28+ Content = new StackLayout
29+ {
30+ Padding = new Thickness ( 10 ) ,
31+ Spacing = 15 ,
32+ Children =
33+ {
34+ // Display Mode Section
35+ new Label
36+ {
37+ Text = "Display Mode" ,
38+ FontSize = 20 ,
39+ FontAttributes = FontAttributes . Bold ,
40+ Margin = new Thickness ( 0 , 10 , 0 , 0 )
41+ } ,
42+ new Button
43+ {
44+ Text = "Never - Hide large title" ,
45+ Command = new Command ( ( ) => On < iOS > ( ) . SetLargeTitleDisplay ( LargeTitleDisplayMode . Never ) )
46+ } ,
47+ new Button
48+ {
49+ Text = "Always - Show large title" ,
50+ Command = new Command ( ( ) => On < iOS > ( ) . SetLargeTitleDisplay ( LargeTitleDisplayMode . Always ) )
51+ } ,
52+ new Button
53+ {
54+ Text = "Automatic - Inherit from previous page" ,
55+ Command = new Command ( async ( ) =>
56+ {
57+ var page = new ContentPage { Title = "Automatic Mode" } ;
58+ page . On < iOS > ( ) . SetLargeTitleDisplay ( LargeTitleDisplayMode . Automatic ) ;
59+ await Navigation . PushAsync ( page ) ;
60+ } )
61+ } ,
62+
63+ // Navigation Configuration Section
64+ new BoxView { HeightRequest = 1 , Color = Colors . Gray , Margin = new Thickness ( 0 , 10 ) } ,
65+ new Label
66+ {
67+ Text = "Navigation Configuration" ,
68+ FontSize = 20 ,
69+ FontAttributes = FontAttributes . Bold
70+ } ,
71+ new Button
72+ {
73+ Text = "Toggle PrefersLargeTitles on NavigationPage" ,
74+ Command = new Command ( async ( ) =>
75+ {
76+ var navPage = ( Microsoft . Maui . Controls . NavigationPage ) Parent ;
77+ navPage . On < iOS > ( ) . SetPrefersLargeTitles ( ! navPage . On < iOS > ( ) . PrefersLargeTitles ( ) ) ;
78+
79+ // Refresh the page to show the change
80+ Navigation . InsertPageBefore ( new iOSLargeTitlePage ( ) , this ) ;
81+ await Navigation . PopAsync ( false ) ;
82+ } )
83+ } ,
84+
85+ // Scrolling Behavior Section
86+ new BoxView { HeightRequest = 1 , Color = Colors . Gray , Margin = new Thickness ( 0 , 10 ) } ,
87+ new Label
88+ {
89+ Text = "Scrolling Behavior" ,
90+ FontSize = 20 ,
91+ FontAttributes = FontAttributes . Bold
92+ } ,
93+ new Button
94+ {
95+ Text = "ScrollView - Watch title collapse on scroll" ,
96+ Command = new Command ( async ( ) =>
97+ {
98+ var navPage = ( Microsoft . Maui . Controls . NavigationPage ) Parent ;
99+ navPage . On < iOS > ( ) . SetPrefersLargeTitles ( true ) ;
100+
101+ var page = new ContentPage { Title = "Scroll Me" } ;
102+ page . On < iOS > ( ) . SetLargeTitleDisplay ( LargeTitleDisplayMode . Always ) ;
103+
104+ var scrollContent = new StackLayout { Padding = 20 , Spacing = 10 } ;
105+ for ( int i = 1 ; i <= 50 ; i ++ )
106+ {
107+ scrollContent . Children . Add ( new Label
108+ {
109+ Text = $ "Item { i } - Scroll to see the large title collapse",
110+ FontSize = 16 ,
111+ Padding = new Thickness ( 0 , 10 )
112+ } ) ;
113+ }
114+
115+ page . Content = new Microsoft . Maui . Controls . ScrollView { Content = scrollContent } ;
116+ await Navigation . PushAsync ( page ) ;
117+ } )
118+ } ,
119+ new Button
120+ {
121+ Text = "CollectionView - Large title with SafeArea" ,
122+ Command = new Command ( async ( ) =>
123+ {
124+ var navPage = ( Microsoft . Maui . Controls . NavigationPage ) Parent ;
125+ navPage . On < iOS > ( ) . SetPrefersLargeTitles ( true ) ;
126+
127+ var page = new ContentPage { Title = "CollectionView Demo" , BackgroundColor = Colors . LightBlue } ;
128+ page . On < iOS > ( ) . SetLargeTitleDisplay ( LargeTitleDisplayMode . Always ) ;
129+ page . SafeAreaEdges = Microsoft . Maui . SafeAreaEdges . All ;
130+
131+ var collectionView = new Microsoft . Maui . Controls . CollectionView
132+ {
133+ VerticalOptions = LayoutOptions . Fill
134+ } ;
135+
136+ collectionView . ItemTemplate = new DataTemplate ( ( ) =>
137+ {
138+ var label = new Label
139+ {
140+ Text = "Scroll to see title collapse" ,
141+ FontSize = 18 ,
142+ Padding = 15
143+ } ;
144+ return label ;
145+ } ) ;
146+
147+ collectionView . ItemsSource = Enumerable . Range ( 1 , 40 ) ;
148+ collectionView . Header = new Label { BackgroundColor = Colors . Pink , Text = "Header" , Padding = 10 , FontSize = 16 } ;
149+ collectionView . Footer = new Label { BackgroundColor = Colors . Yellow , Text = "Footer" , Padding = 10 , FontSize = 16 } ;
150+
151+ page . Content = collectionView ;
152+ await navPage . PushAsync ( page ) ;
153+ } )
154+ } ,
155+ new Button
156+ {
157+ Text = "Transparent NavBar - Content shows through" ,
158+ Command = new Command ( async ( ) =>
159+ {
160+ var navPage = ( Microsoft . Maui . Controls . NavigationPage ) Parent ;
161+ navPage . On < iOS > ( ) . SetPrefersLargeTitles ( true ) ;
162+ var previousBarColor = navPage . BarBackgroundColor ;
163+ navPage . BarBackgroundColor = Colors . Transparent ;
164+
165+ var page = new ContentPage
166+ {
167+ Title = "Transparent Bar" ,
168+ // Create a gradient background that shows through the nav bar
169+ Background = new LinearGradientBrush
170+ {
171+ StartPoint = new Point ( 0 , 0 ) ,
172+ EndPoint = new Point ( 0 , 1 ) ,
173+ GradientStops = new GradientStopCollection
174+ {
175+ new GradientStop { Color = Color . FromArgb ( "#667eea" ) , Offset = 0.0f } ,
176+ new GradientStop { Color = Color . FromArgb ( "#764ba2" ) , Offset = 1.0f }
177+ }
178+ }
179+ } ;
180+ page . On < iOS > ( ) . SetLargeTitleDisplay ( LargeTitleDisplayMode . Always ) ;
181+
182+ var scrollContent = new StackLayout { Padding = 20 , Spacing = 15 } ;
183+ scrollContent . Children . Add ( new Label
184+ {
185+ Text = "Notice how the gradient background shows through the navigation bar area. This follows Apple's HIG recommendation." ,
186+ FontSize = 16 ,
187+ TextColor = Colors . White ,
188+ Margin = new Thickness ( 0 , 20 )
189+ } ) ;
190+
191+ for ( int i = 1 ; i <= 30 ; i ++ )
192+ {
193+ scrollContent . Children . Add ( new Frame
194+ {
195+ BackgroundColor = Colors . White . WithAlpha ( 0.9f ) ,
196+ CornerRadius = 10 ,
197+ Padding = 15 ,
198+ Content = new Label
199+ {
200+ Text = $ "Card { i } - Scroll to see the effect",
201+ FontSize = 16
202+ }
203+ } ) ;
204+ }
205+
206+ page . Content = new Microsoft . Maui . Controls . ScrollView { Content = scrollContent } ;
207+ await Navigation . PushAsync ( page ) ;
208+
209+ // Restore opaque background when returning
210+ page . Disappearing += ( s , e ) => navPage . BarBackgroundColor = previousBarColor ;
211+ } )
212+ } ,
213+
214+ // Back Button
215+ new BoxView { HeightRequest = 1 , Color = Colors . Gray , Margin = new Thickness ( 0 , 10 ) } ,
216+ new Button
217+ {
218+ Text = "← Back To Gallery" ,
219+ Margin = new Thickness ( 0 , 10 , 0 , 20 ) ,
220+ Command = new Command ( async ( ) => await Navigation . PopAsync ( ) )
221+ }
222+ }
223+ }
224+ } ;
225+
226+ Content = scrollView ;
227+ }
228+ }
0 commit comments