Xamarin.Forms Malzeme görseli

Örneği indirin

Malzeme tasarımı , Google tarafından oluşturulan, görüntüleme ve mizanpajların boyut, renk, Aralık ve diğer yönlerini ve görünüm ve mizanpajların nasıl görüneceğine ve davrandığına ilişkin diğer noktaları Içeren, Google tarafından oluşturulan bir tasarım sistemidir.

Xamarin.Forms Malzeme görseli, uygulamalara malzeme tasarımı kuralları uygulamak Xamarin.Forms , iOS ve Android 'de büyük ölçüde özdeş olarak görünen uygulamalar oluşturmak için kullanılabilir. Malzeme görseli etkinleştirildiğinde desteklenen görünümler aynı tasarımı platformlar arası bir şekilde benimseyin ve birleştirilmiş bir görünüm oluşturur.

Xamarin.FormsUygulamanızda malzeme görselini etkinleştirme işlemi şu şekilde olur:

1. Xamarin. Forms ekleyin . Visual. materyal/"Data-LinkType =" External ">Xamarin.Forms . iOS ve Android platform projelerinize yönelik Visual. materyalNuGet paketi. bu NuGet paketi iOS ve Android 'de iyileştirilmiş malzeme tasarımı oluşturuculara sunar. İOS 'ta, paket, Google 'ın iOS içinbir C# bağlama olan Xamarin. IOS. materialcomponentsöğesine geçişli bağımlılık sağlar. Android 'de paket, TargetFramework 'Ün doğru şekilde kurulduğundan emin olmak için derleme hedefleri sağlar.
2. Her platform projesinde malzeme görselini başlatın. Daha fazla bilgi için bkz. malzeme görselini başlatma.
3. "Data-LinkType =" Absolute-path ">Visual özelliğini Material , malzeme tasarımı kurallarını benimseyen tüm sayfalarda Xamarin_Forms _VisualElement_Visual ayarlayarak malzeme görsel denetimleri oluşturun. Daha fazla bilgi için bkz. malzeme oluşturucularını tüketme.
4. seçim Malzeme denetimlerini özelleştirin. Daha fazla bilgi için bkz. malzeme denetimlerini özelleştirme.

Malzeme görseli Şu anda aşağıdaki denetimleri desteklemektedir:

• ActivityIndicator
• Button
• CheckBox
• DatePicker
• Editor
• Entry
• Frame
• Picker
• ProgressBar
• Slider
• Stepper
• TimePicker

Malzeme denetimleri, malzeme tasarımı kurallarını uygulayan malzeme oluşturuculara göre gerçekleştirilir. İşlevsellik, malzeme oluşturuculara varsayılan oluşturuculara göre farklılık göstermemelidir. Daha fazla bilgi için bkz. malzeme görselini özelleştirme.

Malzeme görselini Başlat

Xamarin. Forms 'u yükledikten sonra . Visual. materyal/"Data-LinkType =" External ">Xamarin.Forms . Visual. materyalNuGet paketi, her platform projesinde işleyicilere 'ın başlatılması gerekir.

İOS 'ta, yöntemi yönteminden sonra yöntemini çağırarak Appdelegate. cs dosyasında gerçekleşmelidir :

global::Xamarin.Forms.Forms.Init();
global::Xamarin.Forms.FormsMaterial.Init();

Android 'de, bu yöntem yönteminden sonra yöntemi çağrılarak MainActivity. cs dosyasında gerçekleşmelidir :

global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
global::Xamarin.Forms.FormsMaterial.Init(this, savedInstanceState);

Malzeme görseli Uygula

Uygulamalar, VisualElement.Visual bir sayfada, düzende veya görünümde "Data-LinkType =" absolute-path ">özelliğini Xamarin_Forms _VisualElement_Visual ayarlayarak malzeme görselini etkinleştirebilir Material :

<ContentPage Visual="Material"
             ...>
    ...
</ContentPage>

Eşdeğer C# kodu:

ContentPage contentPage = new ContentPage();
contentPage.Visual = VisualMarker.Material;

Özelliği, VisualElement.VisualMaterial uygulamanızı varsayılan Oluşturucu yerine malzeme görsel oluşturucularını kullanacak şekilde yönlendirir. Xamarin_Forms _VisualElement_Visual "Data-LinkType =" Absolute-path ">Visual özelliği IVisual , VisualMarker aşağıdaki özellikleri sağlayan sınıfıyla birlikte öğesini uygulayan herhangi bir türe ayarlanabilir IVisual :

• Default – görünümün varsayılan oluşturucuyu kullanarak işlenmesi gerektiğini gösterir.
• MatchParent – görünümün doğrudan üst öğesiyle aynı oluşturucuyu kullanması gerektiğini belirtir.
• Material – görünümün bir malzeme Oluşturucu kullanılarak işlenmesi gerektiğini gösterir.

Aşağıdaki ekran görüntülerinde, varsayılan işleyiciler kullanılarak işlenmiş bir kullanıcı arabirimi gösterilmektedir:

Varsayılan işleyicilere

Aşağıdaki ekran görüntüleri, malzeme Oluşturucu kullanılarak işlenmiş Kullanıcı arabirimini gösterir:

Malzeme oluşturuculara malzeme oluşturucularının ekran görüntüsü

Burada gösterilen varsayılan Oluşturucu ve malzeme Oluşturucu arasındaki başlıca görünür farklılıklar, işleyicilere metnin büyük/büyük harfle gösterilmesi Button ve kenarlıkların köşelerini yuvarlaklaştırmalardır Frame . Ancak, malzeme oluşturuculara yerel denetimler kullanır ve bu nedenle, yazı tipleri, gölgeler, renkler ve yükseltme gibi alanlarda platformlar arasında kullanıcı arabirimi farklılıkları olabilir.

Malzeme görselini özelleştirme

malzeme görsel NuGet paketi, denetimleri gerçekleştiren bir oluşturucu koleksiyonudur Xamarin.Forms . Malzeme görsel denetimlerini özelleştirmek, varsayılan denetimleri özelleştirmeye benzer.

Amaç, var olan bir denetimi özelleştirmek için önerilen tekniktir. Bir malzeme görsel Oluşturucusu varsa, denetimi, oluşturucuyu alt sınıflara ayırmak yerine, bir efekt ile özelleştirmek daha az çalışmadır. Etkiler hakkında daha fazla bilgi için bkz Xamarin.Forms effects ..

Özel işleyiciler, bir malzeme Oluşturucusu mevcut olmadığında önerilen tekniktir. Aşağıdaki Oluşturucu sınıfları malzeme Görselinle dahildir:

• MaterialButtonRenderer
• MaterialCheckBoxRenderer
• MaterialEntryRenderer
• MaterialFrameRenderer
• MaterialProgressBarRenderer
• MaterialDatePickerRenderer
• MaterialTimePickerRenderer
• MaterialPickerRenderer
• MaterialActivityIndicatorRenderer
• MaterialEditorRenderer
• MaterialSliderRenderer
• MaterialStepperRenderer

Altsınıflama bir malzeme Oluşturucusu, malzemesiz oluşturuculara neredeyse aynıdır. Ancak, bir malzeme oluşturucuyu alt sınıflara uygulayan bir oluşturucuyu dışarı aktarırken, bu tür belirten özniteliğe üçüncü bir bağımsız değişken sağlamanız gerekir ExportRendererVisualMarker.MaterialVisual :

using Xamarin.Forms.Material.Android;

[assembly: ExportRenderer(typeof(ProgressBar), typeof(CustomMaterialProgressBarRenderer), new[] { typeof(VisualMarker.MaterialVisual) })]
namespace MyApp.Android
{
    public class CustomMaterialProgressBarRenderer : MaterialProgressBarRenderer
    {
        //...
    }
}

Bu örnekte, sınıfının, ExportRendererAttributeCustomMaterialProgressBarRenderer görünümü işlemek için ProgressBar , IVisual üçüncü bağımsız değişken olarak kaydedilen türle kullanılacağını belirtir.

Özel işleyiciler hakkında daha fazla bilgi için bkz. özel işleyiciler.

İlgili bağlantılar

• Malzeme görseli (örnek)
• Create a Xamarin.Forms Visual Renderer
• Xamarin.Forms Effects
• Özel Oluşturucular