Xamarin 表格 - 选项卡式视图?
Xamarin Forms - Tabbed View?
我需要创建一个弹出窗口,其中会有一些选项卡,每个选项卡都包含一个列表视图。我知道有一个 TabbedPage,但我需要一个 "TabbedView" 以便我可以使用 Xlabs PopupLayout 构建我的弹出窗口。我如何在 Xamarin Forms 中执行此操作?
您可以自己创建自定义控件。
(假设您要创建 3 个选项卡)
例如,您可以看到它是一个 2 行 3 列的网格。
您设置按钮的第 1 行将 RowHeight 设置为自动或您想要的大小,并将每个按钮添加到每一列。
在第 2 行,您可以使用 RowHeight 为 * 的 ContentView(以填充 space 的其余部分),您还应将 GridSpan 设置为 3 列,以便它填充网格上的所有可用宽度。
然后当您单击一个按钮时,您只需将 ContentView 视图设置为您想要的特定选项卡。您还可以在更改内容之前播放动画。
希望对您有所帮助
请查看 TabView 插件。
我在过去的项目中遇到过类似的问题,因此决定根据我的实现创建一个插件。
我还包含了一个使用 TabView 的示例项目here,请看一下。
该插件在 NuGet 中也可用。在包管理控制台中输入以下命令以在您的项目中安装最新版本的插件:
PM> Install-Package Xam.Plugin.TabView
由于 TabView 继承自 ContentView,因此您可以像 Xamarin 中的任何其他视图一样使用它。
这是一个例子:
var tabView = new TabViewControl(new List<TabItem>()
{
new TabItem(
"Tab 1",
new Image{
Source = ImageSource.FromUri(new Uri("https://assets-cdn.github.com/images/modules/logos_page/Octocat.png")),
Aspect = Aspect.AspectFit,
BackgroundColor = Color.LightBlue
}),
new TabItem(
"Tab 2",
new StackLayout()
{
Children =
{
new Label(){
FontSize = 18,
Text = "This is a label control.",
TextColor = Color.Green,
}
},
BackgroundColor = Color.LightGray,
Padding = 10
}),
new TabItem(
"Tab 3",
new StackLayout()
{
Children =
{
new ListView(){
ItemsSource = new string[] { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6" }
}
},
BackgroundColor = Color.LightSalmon,
Padding = 10
})
});
tabView.VerticalOptions = LayoutOptions.StartAndExpand;
this.Content = tabView;
我需要创建一个弹出窗口,其中会有一些选项卡,每个选项卡都包含一个列表视图。我知道有一个 TabbedPage,但我需要一个 "TabbedView" 以便我可以使用 Xlabs PopupLayout 构建我的弹出窗口。我如何在 Xamarin Forms 中执行此操作?
您可以自己创建自定义控件。
(假设您要创建 3 个选项卡)
例如,您可以看到它是一个 2 行 3 列的网格。
您设置按钮的第 1 行将 RowHeight 设置为自动或您想要的大小,并将每个按钮添加到每一列。
在第 2 行,您可以使用 RowHeight 为 * 的 ContentView(以填充 space 的其余部分),您还应将 GridSpan 设置为 3 列,以便它填充网格上的所有可用宽度。
然后当您单击一个按钮时,您只需将 ContentView 视图设置为您想要的特定选项卡。您还可以在更改内容之前播放动画。
希望对您有所帮助
请查看 TabView 插件。
我在过去的项目中遇到过类似的问题,因此决定根据我的实现创建一个插件。
我还包含了一个使用 TabView 的示例项目here,请看一下。
该插件在 NuGet 中也可用。在包管理控制台中输入以下命令以在您的项目中安装最新版本的插件:
PM> Install-Package Xam.Plugin.TabView
由于 TabView 继承自 ContentView,因此您可以像 Xamarin 中的任何其他视图一样使用它。 这是一个例子:
var tabView = new TabViewControl(new List<TabItem>()
{
new TabItem(
"Tab 1",
new Image{
Source = ImageSource.FromUri(new Uri("https://assets-cdn.github.com/images/modules/logos_page/Octocat.png")),
Aspect = Aspect.AspectFit,
BackgroundColor = Color.LightBlue
}),
new TabItem(
"Tab 2",
new StackLayout()
{
Children =
{
new Label(){
FontSize = 18,
Text = "This is a label control.",
TextColor = Color.Green,
}
},
BackgroundColor = Color.LightGray,
Padding = 10
}),
new TabItem(
"Tab 3",
new StackLayout()
{
Children =
{
new ListView(){
ItemsSource = new string[] { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6" }
}
},
BackgroundColor = Color.LightSalmon,
Padding = 10
})
});
tabView.VerticalOptions = LayoutOptions.StartAndExpand;
this.Content = tabView;