动态页面生成
BuildAPage程序是一个多页面应用程序,但BuildAPage项目只包含一个名为BuildAPageHomePage的页面类。 顾名思义,该程序从代码构造一个新页面,然后导航到它。
XAML文件允许您在此构造的页面上指定所需内容:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BuildAPage.BuildAPageHomePage"
Title="Build-a-Page"
Padding="10, 5">
<StackLayout>
<Label Text="Enter page title:" />
<Entry x:Name="titleEntry"
Placeholder="page title" />
<Grid VerticalOptions="FillAndExpand">
<ContentView Grid.Row="0">
<StackLayout>
<Label Text="Tap to add to generated page:" />
<ListView x:Name="viewList"
ItemSelected="OnViewListItemSelected">
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>BoxView</x:String>
<x:String>Button</x:String>
<x:String>DatePicker</x:String>
<x:String>Entry</x:String>
<x:String>Slider</x:String>
<x:String>Stepper</x:String>
<x:String>Switch</x:String>
<x:String>TimePicker</x:String>
</x:Array>
</ListView.ItemsSource>
</ListView>
</StackLayout>
</ContentView>
<ContentView Grid.Row="1">
<StackLayout>
<Label Text="Tap to remove from generated page:" />
<ListView x:Name="pageList"
ItemSelected="OnPageListItemSelected" />
</StackLayout>
</ContentView>
</Grid>
<Button x:Name="generateButton"
Text="Generate the Page!"
IsEnabled="False"
HorizontalOptions="Center"
VerticalOptions="Center"
Clicked="OnGenerateButtonClicked" />
</StackLayout>
</ContentPage>
使用页面顶部的条目为构造的页面指定Title属性。 然后,ListView会列出您在页面上可能需要的八个常见视图。 当您选择这些视图时,它们将被传输到第二个ListView。 如果要从页面中删除其中一个,只需在第二个ListView中点击它。
以下是您为页面选择了一些元素后的样子。 请注意,您可以选择多个相同类型的元素,每个元素都有一个唯一的数字:
当你完成“设计”你的页面时,只需点击生成页面! 底部的按钮,程序构建该页面并导航到它:
代码隐藏文件具有两个ListView元素的ItemSelected处理程序,用于添加项目和从第二个ListView中删除项目,但Button的Clicked处理程序中发生了更有趣的处理:
public partial class BuildAPageHomePage : ContentPage
{
ObservableCollection<string> viewCollection = new ObservableCollection<string>();
Assembly xamarinForms = typeof(Label).GetTypeInfo().Assembly;
public BuildAPageHomePage()
{
InitializeComponent();
pageList.ItemsSource = viewCollection;
}
void OnViewListItemSelected(object sender, SelectedItemChangedEventArgs args)
{
if (args.SelectedItem != null)
{
viewList.SelectedItem = null;
int number = 1;
string item = null;
while (-1 != viewCollection.IndexOf(
item = ((string)args.SelectedItem) + ' ' + number))
{
number++;
}
viewCollection.Add(item);
generateButton.IsEnabled = true;
}
}
void OnPageListItemSelected(object sender, SelectedItemChangedEventArgs args)
{
if (args.SelectedItem != null)
{
pageList.SelectedItem = null;
viewCollection.Remove((string)args.SelectedItem);
generateButton.IsEnabled = viewCollection.Count > 0;
}
}
async void OnGenerateButtonClicked(object sender, EventArgs args)
{
ContentPage contentPage = new ContentPage
{
Title = titleEntry.Text,
Padding = new Thickness(10, 0)
};
StackLayout stackLayout = new StackLayout();
contentPage.Content = stackLayout;
foreach (string item in viewCollection)
{
string viewString = item.Substring(0, item.IndexOf(' '));
Type viewType = xamarinForms.GetType("Xamarin.Forms." + viewString);
View view = (View)Activator.CreateInstance(viewType);
view.VerticalOptions = LayoutOptions.CenterAndExpand;
switch (viewString)
{
case "BoxView":
((BoxView)view).Color = Color.Accent;
goto case "Stepper";
case "Button":
((Button)view).Text = item;
goto case "Stepper";
case "Stepper":
case "Switch":
view.HorizontalOptions = LayoutOptions.Center;
break;
}
stackLayout.Children.Add(view);
}
await Navigation.PushAsync(contentPage);
}
}
这个Clicked处理程序创建一个ContentPage和一个StackLayout,然后简单地遍历第二个ListView中的字符串,通过使用Assembly类定义的GetType方法找到相应的Type对象。 (注意名为xamarinForms的Assembly对象被定义为一个字段。)对Activator.CreateInstance的调用会创建实际元素,然后可以针对最终布局略微定制。
在代码中创建ContentPage对象并向其添加元素并不新鲜。事实上,标准的Xamarin.Forms项目模板包含一个带有构造函数的App类,该构造函数实例化了ContentPage并为其添加了一个Label,因此您在第2章中介绍了这种技术。但是这种方法很快被放弃了,转而支持从ContentPage派生类的更灵活的技术。派生类更强大,因为派生类可以访问受保护的方法,如OnAppearing和OnDisappearing。
但是,有时候回到基础会很有帮助。