Xamarin Forms'da sayfalar arasında nasıl geçiş yaparsınız?
Ana sayfam bir ContentPage ve Sekmeli Sayfa gibi bir şeye geçmek istemiyorum.
Bunu, ContentPage'i bulana kadar yeni sayfayı tetiklemesi gereken kontrollerin ebeveynlerini bularak ve ardından yeni bir sayfanın kontrolleriyle İçeriği değiştirerek yapabildim. Ama bu gerçekten özensiz görünüyor.
Yanıtlar:
Xamarin.Forms yerleşik birden çok navigasyon ana bilgisayarını destekler:
NavigationPage, sonraki sayfanın kaydığı yer,TabbedPagesevmediğin biriCarouselPage, bu, sonraki / önceki sayfalara sola ve sağa geçişe izin verir.Bunun da PushModalAsync()ötesinde , tüm sayfalar yalnızca yeni bir sayfanın mevcut sayfanın üstüne itilmesini destekler .
En sonunda, kullanıcının önceki sayfaya geri dönemeyeceğinden emin olmak istiyorsanız (bir hareket veya arka donanım düğmesini kullanarak), aynısını Pagegörüntüleyebilir ve Content.
Kök sayfanın değiştirilmesi için önerilen seçenekler de işe yarar, ancak bunu her platform için farklı şekilde ele almanız gerekir.
App sınıfında, MainPage'i bir Gezinme Sayfası olarak ayarlayabilir ve kök sayfayı ContentPage olarak ayarlayabilirsiniz:
public App ()
{
// The root page of your application
MainPage = new NavigationPage( new FirstContentPage() );
}Ardından ilk ContentPage aramanızda:
Navigation.PushAsync (new SecondContentPage ());Android.Content.Resgezinme için içe aktarmayı önerir . Bu doğru görünmüyor, nereden ithal etmem gerekiyor?
Projeniz bir PCL formları projesi olarak kurulmuşsa (ve büyük olasılıkla Paylaşılan Formlar olarak da oluşturulmuşsa, ancak bunu denemedim) şuna benzeyen bir App.cs sınıfı var:
public class App
{
public static Page GetMainPage ()
{
AuditorDB.Model.Extensions.AutoTimestamp = true;
return new NavigationPage (new LoginPage ());
}
}GetMainPageyeni bir TabbedPaged veya projede tanımladığınız başka bir sayfayı döndürmek için yöntemi değiştirebilirsiniz.
Oradan, kodu yürütmek ve yapmak için komutlar veya olay işleyicileri ekleyebilirsiniz.
// to show OtherPage and be able to go back
Navigation.PushAsync(new OtherPage());
// to show AnotherPage and not have a Back button
Navigation.PushModalAsync(new AnotherPage());
// to go back one step on the navigation stack
Navigation.PopAsync();NavigationBu örnekte ne halt var ? - Bu bir yerde yarattığın bir nesne mi? - Bu kod örneğinde görmüyorum.
PushAsync()benim için işe yaramadı, işe PushModalAsync()yaradı
Yığına yeni bir sayfa itin, ardından mevcut sayfayı kaldırın. Bu bir değişime neden olur.
item.Tapped += async (sender, e) => {
await Navigation.PushAsync (new SecondPage ());
Navigation.RemovePage(this);
};
Önce bir Gezinme Sayfasında olmanız gerekir:
MainPage = NavigationPage(new FirstPage());
İçeriği değiştirmek ideal değildir, çünkü yalnızca bir büyük sayfanız ve OnAppearing gibi bir dizi sayfa etkinliği vardır.
Navigation.RemovePage();Android'de desteklenmemektedir.
await Navigation.PushAsync(new SecondPage(),false);
Bir önceki sayfaya gitmek istemiyorsanız, yani yetkilendirme yapıldıktan sonra kullanıcının oturum açma ekranına geri dönmesine izin vermemeniz durumunda kullanabilirsiniz;
App.Current.MainPage = new HomePage();
Geri işlevselliği etkinleştirmek istiyorsanız, sadece
Navigation.PushModalAsync(new HomePage())
Görünüşe göre bu konu çok popüler ve burada alternatif bir yol olduğundan bahsetmemek üzücü olacak - ViewModel First Navigation. MVVM çerçevelerinin çoğu bunu kullanıyor, ancak ne hakkında olduğunu anlamak istiyorsanız okumaya devam edin.
Tüm resmi Xamarin.Forms belgeleri, basit ama biraz da olsa MVVM saf çözümü gösteriyor. Bunun nedeni, Page(Görünüm) 'ün ViewModelve bunun tersi hakkında hiçbir şey bilmemesidir . İşte bu ihlalin harika bir örneği:
// C# version
public partial class MyPage : ContentPage
{
public MyPage()
{
InitializeComponent();
// Violation
this.BindingContext = new MyViewModel();
}
}
// XAML version
<?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:viewmodels="clr-namespace:MyApp.ViewModel"
x:Class="MyApp.Views.MyPage">
<ContentPage.BindingContext>
<!-- Violation -->
<viewmodels:MyViewModel />
</ContentPage.BindingContext>
</ContentPage>
2 sayfalık bir uygulamanız varsa bu yaklaşım sizin için iyi olabilir. Ancak, büyük bir kurumsal çözüm üzerinde çalışıyorsanız, bir ViewModel First Navigationyaklaşım izlemeniz daha iyi olur . (Görünümler) ViewModelsarasında gezinmek yerine aralarında gezinmenize izin veren biraz daha karmaşık ancak çok daha temiz bir yaklaşımdır Pages. Kaygıları net bir şekilde ayırmanın avantajlarından biri, parametreleri kolayca bir sonrakine aktarabilmeniz ViewModelveya navigasyondan hemen sonra bir zaman uyumsuz başlatma kodunu çalıştırabilmenizdir. Şimdi ayrıntılara.
(Tüm kod örneklerini olabildiğince basitleştirmeye çalışacağım).
1. Öncelikle tüm nesnelerimizi kaydedebileceğimiz ve isteğe bağlı olarak ömürlerini tanımlayabileceğimiz bir yere ihtiyacımız var. Bu konu için bir IOC konteyneri kullanabiliriz, kendiniz birini seçebilirsiniz. Bu örnekte Autofac kullanacağım (mevcut olan en hızlılardan biridir). AppKüresel olarak erişilebilir olması için ona bir referans tutabiliriz (iyi bir fikir değil, basitleştirme için gerekli):
public class DependencyResolver
{
static IContainer container;
public DependencyResolver(params Module[] modules)
{
var builder = new ContainerBuilder();
if (modules != null)
foreach (var module in modules)
builder.RegisterModule(module);
container = builder.Build();
}
public T Resolve<T>() => container.Resolve<T>();
public object Resolve(Type type) => container.Resolve(type);
}
public partial class App : Application
{
public DependencyResolver DependencyResolver { get; }
// Pass here platform specific dependencies
public App(Module platformIocModule)
{
InitializeComponent();
DependencyResolver = new DependencyResolver(platformIocModule, new IocModule());
MainPage = new WelcomeView();
}
/* The rest of the code ... */
}
2. PageBelirli bir için (Görünüm) ' ü almaktan sorumlu bir nesneye ihtiyacımız olacak ViewModelve bunun tersi de geçerlidir. İkinci durum, uygulamanın kök / ana sayfasının ayarlanması durumunda faydalı olabilir. Bunun için hepsinin dizinde ve (Görünümler) dizinde ViewModelsolması gerektiği konusunda basit bir kongre üzerinde anlaşmalıyız . Diğer bir deyişle ad alanında ve (Görünümler) ad alanında yaşamalıdır . Buna ek olarak, (Sayfa) ' nın bir vb. Olması gerektiğini kabul etmeliyiz . İşte bir eşleştiricinin kod örneği:ViewModelsPagesViewsViewModels[MyApp].ViewModelsPages[MyApp].ViewsWelcomeViewWelcomeViewModel
public class TypeMapperService
{
public Type MapViewModelToView(Type viewModelType)
{
var viewName = viewModelType.FullName.Replace("Model", string.Empty);
var viewAssemblyName = GetTypeAssemblyName(viewModelType);
var viewTypeName = GenerateTypeName("{0}, {1}", viewName, viewAssemblyName);
return Type.GetType(viewTypeName);
}
public Type MapViewToViewModel(Type viewType)
{
var viewModelName = viewType.FullName.Replace(".Views.", ".ViewModels.");
var viewModelAssemblyName = GetTypeAssemblyName(viewType);
var viewTypeModelName = GenerateTypeName("{0}Model, {1}", viewModelName, viewModelAssemblyName);
return Type.GetType(viewTypeModelName);
}
string GetTypeAssemblyName(Type type) => type.GetTypeInfo().Assembly.FullName;
string GenerateTypeName(string format, string typeName, string assemblyName) =>
string.Format(CultureInfo.InvariantCulture, format, typeName, assemblyName);
}
3. Bir kök sayfasının ViewModelLocatorayarlanması durumunda, aşağıdakileri BindingContextotomatik olarak ayarlayacak bir şeye ihtiyacımız olacak :
public static class ViewModelLocator
{
public static readonly BindableProperty AutoWireViewModelProperty =
BindableProperty.CreateAttached("AutoWireViewModel", typeof(bool), typeof(ViewModelLocator), default(bool), propertyChanged: OnAutoWireViewModelChanged);
public static bool GetAutoWireViewModel(BindableObject bindable) =>
(bool)bindable.GetValue(AutoWireViewModelProperty);
public static void SetAutoWireViewModel(BindableObject bindable, bool value) =>
bindable.SetValue(AutoWireViewModelProperty, value);
static ITypeMapperService mapper = (Application.Current as App).DependencyResolver.Resolve<ITypeMapperService>();
static void OnAutoWireViewModelChanged(BindableObject bindable, object oldValue, object newValue)
{
var view = bindable as Element;
var viewType = view.GetType();
var viewModelType = mapper.MapViewToViewModel(viewType);
var viewModel = (Application.Current as App).DependencyResolver.Resolve(viewModelType);
view.BindingContext = viewModel;
}
}
// Usage example
<?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:viewmodels="clr-namespace:MyApp.ViewModel"
viewmodels:ViewModelLocator.AutoWireViewModel="true"
x:Class="MyApp.Views.MyPage">
</ContentPage>
4. Son olarak, NavigationServicebu ViewModel First Navigationyaklaşımı destekleyecek bir yaklaşıma ihtiyacımız olacak :
public class NavigationService
{
TypeMapperService mapperService { get; }
public NavigationService(TypeMapperService mapperService)
{
this.mapperService = mapperService;
}
protected Page CreatePage(Type viewModelType)
{
Type pageType = mapperService.MapViewModelToView(viewModelType);
if (pageType == null)
{
throw new Exception($"Cannot locate page type for {viewModelType}");
}
return Activator.CreateInstance(pageType) as Page;
}
protected Page GetCurrentPage()
{
var mainPage = Application.Current.MainPage;
if (mainPage is MasterDetailPage)
{
return ((MasterDetailPage)mainPage).Detail;
}
// TabbedPage : MultiPage<Page>
// CarouselPage : MultiPage<ContentPage>
if (mainPage is TabbedPage || mainPage is CarouselPage)
{
return ((MultiPage<Page>)mainPage).CurrentPage;
}
return mainPage;
}
public Task PushAsync(Page page, bool animated = true)
{
var navigationPage = Application.Current.MainPage as NavigationPage;
return navigationPage.PushAsync(page, animated);
}
public Task PopAsync(bool animated = true)
{
var mainPage = Application.Current.MainPage as NavigationPage;
return mainPage.Navigation.PopAsync(animated);
}
public Task PushModalAsync<TViewModel>(object parameter = null, bool animated = true) where TViewModel : BaseViewModel =>
InternalPushModalAsync(typeof(TViewModel), animated, parameter);
public Task PopModalAsync(bool animated = true)
{
var mainPage = GetCurrentPage();
if (mainPage != null)
return mainPage.Navigation.PopModalAsync(animated);
throw new Exception("Current page is null.");
}
async Task InternalPushModalAsync(Type viewModelType, bool animated, object parameter)
{
var page = CreatePage(viewModelType);
var currentNavigationPage = GetCurrentPage();
if (currentNavigationPage != null)
{
await currentNavigationPage.Navigation.PushModalAsync(page, animated);
}
else
{
throw new Exception("Current page is null.");
}
await (page.BindingContext as BaseViewModel).InitializeAsync(parameter);
}
}
Gördüğünüz gibi , gezinmeden hemen sonra çalıştırılacak bu gibi yöntemleri tanımlayabileceğiniz BaseViewModelher şey için bir - soyut temel sınıf vardır . Ve işte bir navigasyon örneği:ViewModelsInitializeAsync
public class WelcomeViewModel : BaseViewModel
{
public ICommand NewGameCmd { get; }
public ICommand TopScoreCmd { get; }
public ICommand AboutCmd { get; }
public WelcomeViewModel(INavigationService navigation) : base(navigation)
{
NewGameCmd = new Command(async () => await Navigation.PushModalAsync<GameViewModel>());
TopScoreCmd = new Command(async () => await navigation.PushModalAsync<TopScoreViewModel>());
AboutCmd = new Command(async () => await navigation.PushModalAsync<AboutViewModel>());
}
}
Anladığınız gibi, bu yaklaşım daha karmaşık, hata ayıklaması daha zor ve kafa karıştırıcı olabilir. Ancak birçok avantajı vardır ve MVVM çerçevelerinin çoğu kutudan çıkar çıkmaz desteklediği için bunu kendiniz uygulamak zorunda değilsiniz. Burada gösterilen kod örneği github'da mevcuttur . Yaklaşım
hakkında birçok iyi makale var ViewModel First Navigationve bunu ve diğer birçok ilginç konuyu ayrıntılı olarak açıklayan Xamarin.Forms eBook kullanan ücretsiz bir Kurumsal Uygulama Modelleri var .
PushAsync () yöntemini kullanarak, PopModalAsync () öğesini itebilir ve gezinme yığınından sayfalar açabilirsiniz. Aşağıdaki kod örneğimde bir Gezinme sayfam var (Kök Sayfa) ve bu sayfadan, giriş sayfamı tamamladıktan sonra giriş sayfası olan bir içerik sayfasını gönderiyorum, kök sayfaya geri dönüyorum
~~~ Gezinme, son giren, ilk çıkan Sayfa nesneleri yığını olarak düşünülebilir. Bir sayfadan diğerine geçmek için bir uygulama bu yığına yeni bir sayfa gönderecektir. Önceki sayfaya geri dönmek için, uygulama mevcut sayfayı yığından açacaktır. Xamarin.Forms içindeki bu gezinti INavigation arabirimi tarafından işlenir
Xamarin.Forms, bu arabirimi uygulayan ve Sayfa yığınını yöneten bir NavigationPage sınıfına sahiptir. NavigationPage sınıfı ayrıca, ekranın üst kısmına bir başlık görüntüleyen bir gezinme çubuğu ekleyecektir ve ayrıca, önceki sayfaya dönecek platforma uygun bir Geri düğmesine sahip olacaktır. Aşağıdaki kod, bir uygulamadaki ilk sayfanın etrafına bir NavigationPage'in nasıl sarılacağını gösterir:
Yukarıda listelenen içeriğe ve Xamarin Forms hakkında daha fazla bilgi için incelemeniz gereken bir bağlantıya başvuru, Gezinti bölümüne bakın:
http://developer.xamarin.com/guides/cross-platform/xamarin-forms/introduction-to-xamarin-forms/
~~~
public class MainActivity : AndroidActivity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
Xamarin.Forms.Forms.Init(this, bundle);
// Set our view from the "main" layout resource
SetPage(BuildView());
}
static Page BuildView()
{
var mainNav = new NavigationPage(new RootPage());
return mainNav;
}
}
public class RootPage : ContentPage
{
async void ShowLoginDialog()
{
var page = new LoginPage();
await Navigation.PushModalAsync(page);
}
}// Basit olması için kaldırılan kod, yalnızca pop görüntüleniyor
private async void AuthenticationResult(bool isValid)
{
await navigation.PopModalAsync();
}Gezinme özelliğini kullanarak Xamarin.forms'ta bir sayfadan başka bir sayfaya gezinme Örnek kodun altında
void addClicked(object sender, EventArgs e)
{
//var createEmp = (Employee)BindingContext;
Employee emp = new Employee();
emp.Address = AddressEntry.Text;
App.Database.SaveItem(emp);
this.Navigation.PushAsync(new EmployeeDetails());
this.Navigation.PushModalAsync(new EmployeeDetails());
}
Görünüm hücresinde bir sayfadan başka bir sayfaya gitmek için Xamrian.forms kodunun altında
private async void BtnEdit_Clicked1(object sender, EventArgs e)
{
App.Database.GetItem(empid);
await App.Current.MainPage.Navigation.PushModalAsync(new EmployeeRegistration(empid));
}
Aşağıdaki gibi örnek
public class OptionsViewCell : ViewCell
{
int empid;
Button btnEdit;
public OptionsViewCell()
{
}
protected override void OnBindingContextChanged()
{
base.OnBindingContextChanged();
if (this.BindingContext == null)
return;
dynamic obj = BindingContext;
empid = Convert.ToInt32(obj.Eid);
var lblname = new Label
{
BackgroundColor = Color.Lime,
Text = obj.Ename,
};
var lblAddress = new Label
{
BackgroundColor = Color.Yellow,
Text = obj.Address,
};
var lblphonenumber = new Label
{
BackgroundColor = Color.Pink,
Text = obj.phonenumber,
};
var lblemail = new Label
{
BackgroundColor = Color.Purple,
Text = obj.email,
};
var lbleid = new Label
{
BackgroundColor = Color.Silver,
Text = (empid).ToString(),
};
//var lbleid = new Label
//{
// BackgroundColor = Color.Silver,
// // HorizontalOptions = LayoutOptions.CenterAndExpand
//};
//lbleid.SetBinding(Label.TextProperty, "Eid");
Button btnDelete = new Button
{
BackgroundColor = Color.Gray,
Text = "Delete",
//WidthRequest = 15,
//HeightRequest = 20,
TextColor = Color.Red,
HorizontalOptions = LayoutOptions.EndAndExpand,
};
btnDelete.Clicked += BtnDelete_Clicked;
//btnDelete.PropertyChanged += BtnDelete_PropertyChanged;
btnEdit = new Button
{
BackgroundColor = Color.Gray,
Text = "Edit",
TextColor = Color.Green,
};
// lbleid.SetBinding(Label.TextProperty, "Eid");
btnEdit.Clicked += BtnEdit_Clicked1; ;
//btnEdit.Clicked += async (s, e) =>{
// await App.Current.MainPage.Navigation.PushModalAsync(new EmployeeRegistration());
//};
View = new StackLayout()
{
Orientation = StackOrientation.Horizontal,
BackgroundColor = Color.White,
Children = { lbleid, lblname, lblAddress, lblemail, lblphonenumber, btnDelete, btnEdit },
};
}
private async void BtnEdit_Clicked1(object sender, EventArgs e)
{
App.Database.GetItem(empid);
await App.Current.MainPage.Navigation.PushModalAsync(new EmployeeRegistration(empid));
}
private void BtnDelete_Clicked(object sender, EventArgs e)
{
// var eid = Convert.ToInt32(empid);
// var item = (Xamarin.Forms.Button)sender;
int eid = empid;
App.Database.DeleteItem(empid);
}
}
Aramak:
((App)App.Current).ChangeScreen(new Map());
Bu yöntemi App.xaml.cs içinde oluşturun:
public void ChangeScreen(Page page)
{
MainPage = page;
}
In App.Xaml.Cs:
MainPage = new NavigationPage( new YourPage());
Sayfanızdan sonraki sayfaya gitmek istediğinizde şunları yaparsınız:
await Navigation.PushAsync(new YourSecondPage());
Xamarin Forms gezintisi hakkında daha fazla bilgiyi buradan okuyabilirsiniz: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical
Microsoft'un bu konuda oldukça iyi belgeleri var.
Daha yeni Shell. Uygulamanızı yapılandırmanın yeni bir yolunu sağlar ve bazı durumlarda gezinmeyi basitleştirir.
Giriş: https://devblogs.microsoft.com/xamarin/shell-xamarin-forms-4-0-getting-started/
Shell ile ilgili temel bilgiler hakkında video: https://www.youtube.com/watch?v=0y1bUAcOjZY&t=3112s
Dokümanlar: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/
Xamarin'de NavigationPage adında bir sayfamız var. ContentPages yığınını tutar. NavigationPage, PushAsync () ve PopAsync () gibi bir yönteme sahiptir. PushAsync yığının en üstüne bir sayfa ekler, o zaman o sayfa o anda aktif olan sayfa olur. PopAsync () yöntemi, sayfayı yığının en üstünden kaldırır.
App.Xaml.Cs'de gibi ayarlayabiliriz.
MainPage = new NavigationPage (yeni YourPage ());
Navigation.PushAsync (new newPage ()); bu yöntem yığının en üstüne newPage ekleyecektir . Şu anda nePage şu anda etkin sayfa olacaktır.