El siguiente código de ejemplo que vamos a ver crea una MasterDetailPage que permite al usuario ver información detallada sobre el color que ha elegido a partir de una lista. Atención, la clase NamedColorPage, definida como una subclase de ContentPage en otro fichero de la aplicación simplemente muestra la información RGB, el color de fondo de un BoxView cambiará con el color seleccionado por el usuario, finalmente, la información sobre, matiz, saturación y luminosidad.
El siguiente ejemplo muestra tres conceptos claves. El primero, la propiedad Master es la parte principal de MasterDetailPage, la cual en el ejemplo tiene asignado un ListView. Este elemento ListView contiene una etiqueta y una lista de colores. Segundo, la propiedad Detail Tendrá asignada la clase NAmedColorPage que hemos mencionado anteriormente. Por tercero y último, la pagina asignada a la propiedad MasterDetailPage.Detail es mostrada con la propiedad MasterDetailPage.IsPresented = false, esto significa que la propiedad IsPresented controla si la pagina asignada a la propiedad Master es mostrada o no al usuario.
Atención la página MasterDetailPage.Master tiene que tener un valor asignado en la propiedad Page.Title. Por último, la pagina MasterDetailPage.Detail solo mostrará la barra de navegación si es una instancia de NavigationPage.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
using System; using Xamarin.Forms; namespace FormsGallery { class MasterDetailPageDemoPage : MasterDetailPage { public MasterDetailPageDemoPage() { Label header = new Label { Text = "MasterDetailPage", FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label)), HorizontalOptions = LayoutOptions.Center }; // Assemble an array of NamedColor objects. NamedColor[] namedColors = { new NamedColor("Aqua", Color.Aqua), new NamedColor("Black", Color.Black), new NamedColor("Blue", Color.Blue), new NamedColor("Fuschia", Color.Fuschia), new NamedColor("Gray", Color.Gray), new NamedColor("Green", Color.Green), new NamedColor("Lime", Color.Lime), new NamedColor("Maroon", Color.Maroon), new NamedColor("Navy", Color.Navy), new NamedColor("Olive", Color.Olive), new NamedColor("Purple", Color.Purple), new NamedColor("Red", Color.Red), new NamedColor("Silver", Color.Silver), new NamedColor("Teal", Color.Teal), new NamedColor("White", Color.White), new NamedColor("Yellow", Color.Yellow) }; // Create ListView for the master page. ListView listView = new ListView { ItemsSource = namedColors }; // Create the master page with the ListView. this.Master = new ContentPage { Title = header.Text, Content = new StackLayout { Children = { header, listView } } }; // Create the detail page using NamedColorPage and wrap it in a // navigation page to provide a NavigationBar and Toggle button this.Detail = new NavigationPage(new NamedColorPage(true)); // For Windows Phone, provide a way to get back to the master page. if (Device.OS == TargetPlatform.WinPhone) { (this.Detail as ContentPage).Content.GestureRecognizers.Add( new TapGestureRecognizer((view) => { this.IsPresented = true; })); } // Define a selected handler for the ListView. listView.ItemSelected += (sender, args) => { // Set the BindingContext of the detail page. this.Detail.BindingContext = args.SelectedItem; // Show the detail page. this.IsPresented = false; }; // Initialize the ListView selection. listView.SelectedItem = namedColors[0]; } } } |
Podéis descargar el código del ejemplo desde Github