Efekt Parametrelerini Ekli Özellikler Olarak Geçirme

Makale
08/05/2016

Ekli özellikler, çalışma zamanı özellik değişikliklerine yanıt veren efekt parametrelerini tanımlamak için kullanılabilir. Bu makalede, parametreleri bir efekte geçirmek için ekli özelliklerin kullanılması ve çalışma zamanında parametrenin değiştirilmesi gösterilmektedir.

Çalışma zamanı özellik değişikliklerine yanıt veren efekt parametreleri oluşturma işlemi aşağıdaki gibidir:

Efekte geçirilecek her parametre için ekli özellik içeren bir static sınıf oluşturun.
Sınıfına, sınıfın ekleneceği denetime efektin eklenmesini veya kaldırılmasını denetlemek için kullanılacak ek bir ekli özellik ekleyin. Bu ekli özelliğin, özelliğin değeri değiştiğinde yürütülecek bir propertyChanged temsilciyi kaydettiğinizden emin olun.
Eklenen her özellik için alıcı ve ayarlayıcılar oluşturun static .
Efekti eklemek ve kaldırmak için temsilciye mantık propertyChanged uygulayın.
Sınıfın static içinde, etkiden sonra adlandırılan ve sınıfı alt sınıflandıran RoutingEffect iç içe geçmiş bir sınıf uygulayın. Oluşturucu için temel sınıf oluşturucuyu çağırın ve çözüm grubu adının birleştirilmiş bir yapısını ve platforma özgü her efekt sınıfında belirtilen benzersiz kimliği geçirin.

Ardından parametreler, ekli özellikler ve özellik değerleri uygun denetime eklenerek efekte geçirilebilir. Ayrıca, parametreler çalışma zamanında yeni bir ekli özellik değeri belirtilerek değiştirilebilir.

Not

Ekli özellik, bir sınıfta tanımlanan ancak diğer nesnelere eklenmiş özel bir bağlanabilir özellik türüdür ve XAML'de bir sınıf ve noktayla ayrılmış bir özellik adı içeren öznitelikler olarak tanınabilir. Daha fazla bilgi için bkz . Ekli Özellikler.

Örnek uygulama, denetim ShadowEffect tarafından görüntülenen metne gölge ekleyen bir Label gösterir. Ayrıca, gölgenin rengi çalışma zamanında değiştirilebilir. Aşağıdaki diyagramda, örnek uygulamadaki her projenin sorumlulukları ve aralarındaki ilişkiler gösterilmektedir:

Gölge Efekti Proje Sorumlulukları

Label üzerindeki HomePage bir denetim, platforma özgü her projede tarafından LabelShadowEffect özelleştirilir. Parametreler, sınıfındaki ekli özellikler aracılığıyla her LabelShadowEffect birine ShadowEffect geçirilir. Her LabelShadowEffect sınıf, her platform için sınıfından PlatformEffect türetilir. Bu, aşağıdaki ekran görüntülerinde gösterildiği gibi denetim tarafından görüntülenen metne Label gölge eklenmesine neden olur:

Her Platformda Gölge Efekti

Efekt Parametreleri Oluşturma

static Aşağıdaki kod örneğinde gösterildiği gibi efekt parametrelerini temsil eden bir sınıf oluşturulmalıdır:

public static class ShadowEffect
{
  public static readonly BindableProperty HasShadowProperty =
    BindableProperty.CreateAttached ("HasShadow", typeof(bool), typeof(ShadowEffect), false, propertyChanged: OnHasShadowChanged);
  public static readonly BindableProperty ColorProperty =
    BindableProperty.CreateAttached ("Color", typeof(Color), typeof(ShadowEffect), Color.Default);
  public static readonly BindableProperty RadiusProperty =
    BindableProperty.CreateAttached ("Radius", typeof(double), typeof(ShadowEffect), 1.0);
  public static readonly BindableProperty DistanceXProperty =
    BindableProperty.CreateAttached ("DistanceX", typeof(double), typeof(ShadowEffect), 0.0);
  public static readonly BindableProperty DistanceYProperty =
    BindableProperty.CreateAttached ("DistanceY", typeof(double), typeof(ShadowEffect), 0.0);

  public static bool GetHasShadow (BindableObject view)
  {
    return (bool)view.GetValue (HasShadowProperty);
  }

  public static void SetHasShadow (BindableObject view, bool value)
  {
    view.SetValue (HasShadowProperty, value);
  }
  ...

  static void OnHasShadowChanged (BindableObject bindable, object oldValue, object newValue)
  {
    var view = bindable as View;
    if (view == null) {
      return;
    }

    bool hasShadow = (bool)newValue;
    if (hasShadow) {
      view.Effects.Add (new LabelShadowEffect ());
    } else {
      var toRemove = view.Effects.FirstOrDefault (e => e is LabelShadowEffect);
      if (toRemove != null) {
        view.Effects.Remove (toRemove);
      }
    }
  }

  class LabelShadowEffect : RoutingEffect
  {
    public LabelShadowEffect () : base ("MyCompany.LabelShadowEffect")
    {
    }
  }
}

, ShadowEffect her ekli özellik için alıcı ve ayarlayıcı içeren beş ekli özellik static içerir. Bu özelliklerden dördü, platforma özgü LabelShadowEffecther birine geçirilecek parametreleri temsil eder. sınıfı ayrıcaShadowEffect, sınıfın bağlı olduğu denetime efektin eklenmesini veya kaldırılmasını denetlemek ShadowEffect için kullanılan ekli bir özelliği tanımlarHasShadow. Bu ekli özellik, özelliğin OnHasShadowChanged değeri değiştiğinde yürütülecek yöntemi kaydeder. Bu yöntem, ekli özelliğin değerine HasShadow göre efekti ekler veya kaldırır.

Sınıfın alt sınıflarını RoutingEffect oluşturan iç içe LabelShadowEffect geçmiş sınıf, efekt ekleme ve kaldırmayı destekler. sınıfı, RoutingEffect genellikle platforma özgü bir iç efekti sarmalayan platformdan bağımsız bir efekti temsil eder. Bu, platforma özgü bir efektin tür bilgilerine derleme zamanı erişimi olmadığından etki kaldırma işlemini basitleştirir. Oluşturucu LabelShadowEffect temel sınıf oluşturucuyu çağırır ve çözüm grubu adının birleştirmesini içeren bir parametreyi ve platforma özgü her efekt sınıfında belirtilen benzersiz kimliği geçirir. Bu, yöntemde OnHasShadowChanged aşağıdaki gibi efekt ekleme ve kaldırmayı etkinleştirir:

Efekt ekleme – denetiminin LabelShadowEffectEffects koleksiyonuna yeni bir örneği eklenir. Bu, efekti eklemek için yöntemini kullanarak Effect.Resolve yerini alır.
Etki kaldırma – denetimin LabelShadowEffectEffects koleksiyonundaki ilk örneği alınır ve kaldırılır.

Efekti Kullanma

Aşağıdaki XAML kod örneğinde gösterildiği gibi, her platforma özgü LabelShadowEffect ekli özellikler bir Label denetime eklenerek kullanılabilir:

<Label Text="Label Shadow Effect" ...
       local:ShadowEffect.HasShadow="true" local:ShadowEffect.Radius="5"
       local:ShadowEffect.DistanceX="5" local:ShadowEffect.DistanceY="5">
  <local:ShadowEffect.Color>
    <OnPlatform x:TypeArguments="Color">
        <On Platform="iOS" Value="Black" />
        <On Platform="Android" Value="White" />
        <On Platform="UWP" Value="Red" />
    </OnPlatform>
  </local:ShadowEffect.Color>
</Label>

C# ile eşdeğeri Label aşağıdaki kod örneğinde gösterilmiştir:

var label = new Label {
  Text = "Label Shadow Effect",
  ...
};

Color color = Color.Default;
switch (Device.RuntimePlatform)
{
    case Device.iOS:
        color = Color.Black;
        break;
    case Device.Android:
        color = Color.White;
        break;
    case Device.UWP:
        color = Color.Red;
        break;
}

ShadowEffect.SetHasShadow (label, true);
ShadowEffect.SetRadius (label, 5);
ShadowEffect.SetDistanceX (label, 5);
ShadowEffect.SetDistanceY (label, 5);
ShadowEffect.SetColor (label, color));

ShadowEffect.HasShadow ekli özelliğin ayarlandığı true zaman denetimine öğesini ekleyen veya kaldıran LabelShadowEffectLabel yöntemi yürütürShadowEffect.OnHasShadowChanged. Her iki kod örneğinde ShadowEffect.Color de, eklenen özellik platforma özgü renk değerleri sağlar. Daha fazla bilgi için bkz . Cihaz Sınıfı.

Buna ek olarak, gölge Button renginin çalışma zamanında değiştirilmesini sağlar. Button öğesine tıklandığında, aşağıdaki kod ekli özelliği ayarlayarak ShadowEffect.Color gölge rengini değiştirir:

ShadowEffect.SetColor (label, Color.Teal);

Efekti Bir Stille Kullanma

Denetime ekli özellikler eklenerek kullanılabilecek efektler de bir stil tarafından kullanılabilir. Aşağıdaki XAML kodu örneği, denetimlere Label uygulanabilen gölge efekti için açık bir stil gösterir:

<Style x:Key="ShadowEffectStyle" TargetType="Label">
  <Style.Setters>
    <Setter Property="local:ShadowEffect.HasShadow" Value="True" />
    <Setter Property="local:ShadowEffect.Radius" Value="5" />
    <Setter Property="local:ShadowEffect.DistanceX" Value="5" />
    <Setter Property="local:ShadowEffect.DistanceY" Value="5" />
  </Style.Setters>
</Style>

, Style aşağıdaki kod örneğinde gösterildiği gibi işaretleme uzantısını kullanarak StaticResource özelliğini Style örneğe ayarlayarak Style öğesine uygulanabilirLabel:

<Label Text="Label Shadow Effect" ... Style="{StaticResource ShadowEffectStyle}" />

Stiller hakkında daha fazla bilgi için bkz . Stiller.

Her Platformda Etki Oluşturma

Aşağıdaki bölümlerde sınıfın platforma özgü uygulaması LabelShadowEffect açıklanmıştır.

iOS Projesi

Aşağıdaki kod örneği, iOS projesinin uygulamasını gösterir LabelShadowEffect :

[assembly:ResolutionGroupName ("MyCompany")]
[assembly:ExportEffect (typeof(LabelShadowEffect), "LabelShadowEffect")]
namespace EffectsDemo.iOS
{
    public class LabelShadowEffect : PlatformEffect
    {
        protected override void OnAttached ()
        {
            try {
                UpdateRadius ();
                UpdateColor ();
                UpdateOffset ();
                Control.Layer.ShadowOpacity = 1.0f;
            } catch (Exception ex) {
                Console.WriteLine ("Cannot set property on attached control. Error: ", ex.Message);
            }
        }

        protected override void OnDetached ()
        {
        }
        ...

        void UpdateRadius ()
        {
            Control.Layer.ShadowRadius = (nfloat)ShadowEffect.GetRadius (Element);
        }

        void UpdateColor ()
        {
            Control.Layer.ShadowColor = ShadowEffect.GetColor (Element).ToCGColor ();
        }

        void UpdateOffset ()
        {
            Control.Layer.ShadowOffset = new CGSize (
                (double)ShadowEffect.GetDistanceX (Element),
                (double)ShadowEffect.GetDistanceY (Element));
        }
    }

OnAttached yöntemi, getters kullanarak ShadowEffect ekli özellik değerlerini alan ve gölgeyi oluşturmak için özellikleri özellik değerlerine ayarlayan Control.Layer yöntemleri çağırır. Efektin eklendiği denetimin özelliklere sahip olmaması durumunda bu işlev bir try/catch blokta Control.Layer sarmalanır. Temizleme gerekli olmadığından yöntemi tarafından OnDetached hiçbir uygulama sağlanmadı.

Özellik Değişikliklerine Yanıt Verme

Ekli özellik değerlerinden herhangi biri ShadowEffect çalışma zamanında değişirse, etkinin değişiklikleri görüntüleyerek yanıt vermesi gerekir. Platforma özgü efekt sınıfında yönteminin OnElementPropertyChanged geçersiz kılınmış bir sürümü, aşağıdaki kod örneğinde gösterildiği gibi bağlanabilir özellik değişikliklerine yanıt verilebilen yerdir:

public class LabelShadowEffect : PlatformEffect
{
  ...
  protected override void OnElementPropertyChanged (PropertyChangedEventArgs args)
  {
    if (args.PropertyName == ShadowEffect.RadiusProperty.PropertyName) {
      UpdateRadius ();
    } else if (args.PropertyName == ShadowEffect.ColorProperty.PropertyName) {
      UpdateColor ();
    } else if (args.PropertyName == ShadowEffect.DistanceXProperty.PropertyName ||
               args.PropertyName == ShadowEffect.DistanceYProperty.PropertyName) {
      UpdateOffset ();
    }
  }
  ...
}

OnElementPropertyChanged yöntemi, uygun ShadowEffect ekli özellik değerinin değişmesi koşuluyla gölgenin yarıçapını, rengini veya uzaklığını güncelleştirir. Bu geçersiz kılma birçok kez çağrılabildiği için, değiştirilen özellik için her zaman bir denetim yapılmalıdır.

Android Projesi

Aşağıdaki kod örneği, Android projesinin uygulamasını gösterir LabelShadowEffect :

[assembly:ResolutionGroupName ("MyCompany")]
[assembly:ExportEffect (typeof(LabelShadowEffect), "LabelShadowEffect")]
namespace EffectsDemo.Droid
{
    public class LabelShadowEffect : PlatformEffect
    {
        Android.Widget.TextView control;
        Android.Graphics.Color color;
        float radius, distanceX, distanceY;

        protected override void OnAttached ()
        {
            try {
                control = Control as Android.Widget.TextView;
                UpdateRadius ();
                UpdateColor ();
                UpdateOffset ();
                UpdateControl ();
            } catch (Exception ex) {
                Console.WriteLine ("Cannot set property on attached control. Error: ", ex.Message);
            }
        }

        protected override void OnDetached ()
        {
        }
        ...

        void UpdateControl ()
        {
            if (control != null) {
                control.SetShadowLayer (radius, distanceX, distanceY, color);
            }
        }

        void UpdateRadius ()
        {
            radius = (float)ShadowEffect.GetRadius (Element);
        }

        void UpdateColor ()
        {
            color = ShadowEffect.GetColor (Element).ToAndroid ();
        }

        void UpdateOffset ()
        {
            distanceX = (float)ShadowEffect.GetDistanceX (Element);
            distanceY = (float)ShadowEffect.GetDistanceY (Element);
        }
    }

OnAttached yöntemi, getters kullanarak ShadowEffect ekli özellik değerlerini alan yöntemleri çağırır ve özellik değerlerini kullanarak gölge oluşturmak için yöntemini çağıran TextView.SetShadowLayer bir yöntemi çağırır. Efektin eklendiği denetimin özelliklere sahip olmaması durumunda bu işlev bir try/catch blokta Control.Layer sarmalanır. Temizleme gerekli olmadığından yöntemi tarafından OnDetached hiçbir uygulama sağlanmadı.

Özellik Değişikliklerine Yanıt Verme

public class LabelShadowEffect : PlatformEffect
{
  ...
  protected override void OnElementPropertyChanged (PropertyChangedEventArgs args)
  {
    if (args.PropertyName == ShadowEffect.RadiusProperty.PropertyName) {
      UpdateRadius ();
      UpdateControl ();
    } else if (args.PropertyName == ShadowEffect.ColorProperty.PropertyName) {
      UpdateColor ();
      UpdateControl ();
    } else if (args.PropertyName == ShadowEffect.DistanceXProperty.PropertyName ||
               args.PropertyName == ShadowEffect.DistanceYProperty.PropertyName) {
      UpdateOffset ();
      UpdateControl ();
    }
  }
  ...
}

Evrensel Windows Platformu Projesi

Aşağıdaki kod örneği, Evrensel Windows Platformu (UWP) projesinin uygulamasını gösterirLabelShadowEffect:

[assembly: ResolutionGroupName ("MyCompany")]
[assembly: ExportEffect (typeof(LabelShadowEffect), "LabelShadowEffect")]
namespace EffectsDemo.UWP
{
    public class LabelShadowEffect : PlatformEffect
    {
        Label shadowLabel;
        bool shadowAdded = false;

        protected override void OnAttached ()
        {
            try {
                if (!shadowAdded) {
                    var textBlock = Control as Windows.UI.Xaml.Controls.TextBlock;

                    shadowLabel = new Label ();
                    shadowLabel.Text = textBlock.Text;
                    shadowLabel.FontAttributes = FontAttributes.Bold;
                    shadowLabel.HorizontalOptions = LayoutOptions.Center;
                    shadowLabel.VerticalOptions = LayoutOptions.CenterAndExpand;

                    UpdateColor ();
                    UpdateOffset ();

                    ((Grid)Element.Parent).Children.Insert (0, shadowLabel);
                    shadowAdded = true;
                }
            } catch (Exception ex) {
                Debug.WriteLine ("Cannot set property on attached control. Error: ", ex.Message);
            }
        }

        protected override void OnDetached ()
        {
        }
        ...

        void UpdateColor ()
        {
            shadowLabel.TextColor = ShadowEffect.GetColor (Element);
        }

        void UpdateOffset ()
        {
            shadowLabel.TranslationX = ShadowEffect.GetDistanceX (Element);
            shadowLabel.TranslationY = ShadowEffect.GetDistanceY (Element);
        }
    }
}

Evrensel Windows Platformu bir gölge efekti sağlamaz ve bu nedenle her iki platformdaki uygulama birincil Labelöğesinin LabelShadowEffect arkasına ikinci bir uzaklık Label ekleyerek bir benzetim oluşturur. OnAttached yöntemi yenisini Label oluşturur ve üzerinde Labelbazı düzen özelliklerini ayarlar. Ardından, alıcıları kullanarak ShadowEffect ekli özellik değerlerini alan yöntemleri çağırır ve rengini ve konumunu denetlemek için , TranslationXve TranslationY özelliklerini ayarlayarak TextColorgölgeyi Labeloluşturur. shadowLabel ardından, birincil Labelöğesinin arkasına uzaklık eklenir. Efektin eklendiği denetimin özelliklere sahip olmaması durumunda bu işlev bir try/catch blokta Control.Layer sarmalanır. Temizleme gerekli olmadığından yöntemi tarafından OnDetached hiçbir uygulama sağlanmadı.

Özellik Değişikliklerine Yanıt Verme

public class LabelShadowEffect : PlatformEffect
{
  ...
  protected override void OnElementPropertyChanged (PropertyChangedEventArgs args)
  {
    if (args.PropertyName == ShadowEffect.ColorProperty.PropertyName) {
      UpdateColor ();
    } else if (args.PropertyName == ShadowEffect.DistanceXProperty.PropertyName ||
                      args.PropertyName == ShadowEffect.DistanceYProperty.PropertyName) {
      UpdateOffset ();
    }
  }
  ...
}

OnElementPropertyChanged yöntemi, uygun ShadowEffect ekli özellik değerinin değişmesi koşuluyla gölgenin rengini veya uzaklığını güncelleştirir. Bu geçersiz kılma birçok kez çağrılabildiği için, değiştirilen özellik için her zaman bir denetim yapılmalıdır.

Özet

Bu makale, parametreleri bir efekte geçirmek için ekli özelliklerin kullanılmasını ve çalışma zamanında parametrenin değiştirilmesini göstermiştir. Ekli özellikler, çalışma zamanı özellik değişikliklerine yanıt veren efekt parametrelerini tanımlamak için kullanılabilir.

Aracılığıyla paylaş

Efekt Parametrelerini Ekli Özellikler Olarak Geçirme

Efekt Parametreleri Oluşturma

Efekti Kullanma

Efekti Bir Stille Kullanma

Her Platformda Etki Oluşturma

iOS Projesi

Özellik Değişikliklerine Yanıt Verme

Android Projesi

Özellik Değişikliklerine Yanıt Verme

Evrensel Windows Platformu Projesi

Özellik Değişikliklerine Yanıt Verme

Özet

Ek kaynaklar

Aracılığıyla paylaş

Efekt Parametrelerini Ekli Özellikler Olarak Geçirme

Efekt Parametreleri Oluşturma

Efekti Kullanma

Efekti Bir Stille Kullanma

Her Platformda Etki Oluşturma

iOS Projesi

Özellik Değişikliklerine Yanıt Verme

Android Projesi

Özellik Değişikliklerine Yanıt Verme

Evrensel Windows Platformu Projesi

Özellik Değişikliklerine Yanıt Verme

Özet

İlişkili Bağlantılar

Ek kaynaklar