如何在Xamarin.forms中实现面板功能 [英] How do implement panel feature in Xamarin.forms
问题描述
就像Windows窗体一样，我们可以在同一窗体中添加多个面板，并根据某些条件显示和隐藏特定的面板. Xamarin.Forms中有没有可以像这样使用的控件?
Like in Windows Forms we can add multiple panels in the same Form and based on some condition show and hide particular panel. Is there any control in Xamarin.Forms which can be used like this?
这背后的主要原因是，我在页面上有3个标签.我使用的是选项卡按钮而不是选项卡页面，因为选项卡栏的设计不是我的客户想要的.所以我有3个页面，分别是Page A，Page B，Page C，每个页面都有3个选项卡可以转到相应页面.如果用户在Page A上并填充某种数据(尚未保存)，并且想要转到Page B，然后在Page B上他填写了更多详细信息，则在以下情况下不将数据保存在Page B上:他返回到Page A，用户必须填写Page A和Page B上的所有详细信息.
The main reason behind this is, I have 3 tabs on a page. I am using buttons for tabs and not tabbed pages as design of tabbed bar is not what my client wants. So I have 3 pages say Page A, Page B, Page C and each of the page has 3 tabs to go to respective page. If user is on Page A and fills some sort of data(which is not yet saved) and wants to go to Page B and then on Page B he fills in some more details and then without saving data on Page B when he comes back to Page A all the details filled by user on Page A and Page B has to be available.
因此，如果为此使用多个页面，则当我重定向到新页面时，数据将丢失.那么，有什么方法可以让我拥有多个面板，并且在第二个面板可见时隐藏第一个面板，这将不会清除任何数据，因此我可以实现我想要的.
Hence If I use multiple pages for this then the data will be lost when I redirect to new page. So Is there any way by which I have multiple panels and hide 1st panel when 2nd panel is visible which will not clear any data and hence I can achieve what I want.
推荐答案
您可以隐藏未使用的面板(使用IsVisible属性)-这会将它们从视觉树中拉出，但不会释放从内存中获取它们.
You can just hide the panels that aren't being used (using the IsVisible property) - this pulls them out of the visual tree but does not release them from memory.
如果为每个页面创建一个内容视图，则可以轻松地在主UI中使用它们，例如本示例.即使我们隐藏了各个面板，它们在隐藏时仍将保留在内存中:
If you create a Content View for each page, then you can easily use them in your main UI such as in this example. Even though we are hiding the individual panels they will still remain in memory while hidden:
MyView.cs(可以是面板中想要的任何内容)
MyView.cs (this could be anything you want in your panels):
using System;
using Xamarin.Forms;
namespace FormsSandbox
{
public class MyView : ContentView
{
public static BindableProperty TextProperty = BindableProperty.Create("Text", typeof(string), typeof(MyView),
String.Empty, BindingMode.Default, null, TextChanged);
public string Text {
get {
return (string)GetValue (TextProperty);
}
set {
SetValue (TextProperty, value);
}
}
private Label _contentLabel;
public MyView ()
{
_contentLabel = new Label {
FontSize = 56,
FontAttributes = FontAttributes.Bold,
HorizontalTextAlignment = TextAlignment.Center,
VerticalTextAlignment = TextAlignment.Center
};
Content = _contentLabel;
}
static void TextChanged (BindableObject bindable, object oldValue, object newValue)
{
var view = (MyView)bindable;
view._contentLabel.Text = (newValue ?? "").ToString ();
}
}
}
XamlPage.xaml(主UI页面):
XamlPage.xaml (main UI page):
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sandbox="clr-namespace:FormsSandbox"
x:Class="FormsSandbox.XamlPage">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0,20,0,0" Android="0" WinPhone="0"/>
</ContentPage.Padding>
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Text="1" Clicked="ButtonClicked" x:Name="Button1" Grid.Column="0" />
<Button Text="2" Clicked="ButtonClicked" x:Name="Button2" Grid.Column="1" />
<Button Text="3" Clicked="ButtonClicked" x:Name="Button3" Grid.Column="2" />
<sandbox:MyView Text="1" x:Name="View1" Grid.Row="1" Grid.ColumnSpan="3" />
<sandbox:MyView Text="2" x:Name="View2" Grid.Row="1" Grid.ColumnSpan="3" />
<sandbox:MyView Text="3" x:Name="View3" Grid.Row="1" Grid.ColumnSpan="3" />
</Grid>
</ContentPage>
XamlPage.xaml.cs:
XamlPage.xaml.cs:
using System;
using Xamarin.Forms;
namespace FormsSandbox
{
public partial class XamlPage : ContentPage
{
public XamlPage ()
{
InitializeComponent ();
SelectButton (Button1);
}
void SelectButton(Button button)
{
View view = null;
if (button == Button1)
view = View1;
if (button == Button2)
view = View2;
if (button == Button3)
view = View3;
View1.IsVisible = View1 == view;
View2.IsVisible = View2 == view;
View3.IsVisible = View3 == view;
Button1.TextColor = (Button1 == button) ? Color.Accent.AddLuminosity(0.18) : (Color)Button.TextColorProperty.DefaultValue;
Button2.TextColor = (Button2 == button) ? Color.Accent.AddLuminosity(0.18) : (Color)Button.TextColorProperty.DefaultValue;
Button3.TextColor = (Button3 == button) ? Color.Accent.AddLuminosity(0.18) : (Color)Button.TextColorProperty.DefaultValue;
Button1.BackgroundColor = (Button1 == button) ? Color.Silver.AddLuminosity(0.18) : Color.Silver.AddLuminosity(0.1);
Button2.BackgroundColor = (Button2 == button) ? Color.Silver.AddLuminosity(0.18) : Color.Silver.AddLuminosity(0.1);
Button3.BackgroundColor = (Button3 == button) ? Color.Silver.AddLuminosity(0.18) : Color.Silver.AddLuminosity(0.1);
}
void ButtonClicked (object sender, EventArgs e)
{
SelectButton ((Button)sender);
}
}
}
这篇关于如何在Xamarin.forms中实现面板功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
