主页 / 问题 / 765447
Accepted
BadCatss
Asked:2021-01-01 04:14:14 +0800 CST2021-01-01 04:14:14 +0800 CST

通过绑定更改图像透明度？

  • 772

Xamarin 应用程序具有以下页面结构：（以内容为中心）Frame - StackLayout - ScrollView - 具有两行和一列的网格 - 第一行是 Image 元素，第二行是标签 - 一个标签。这是实际的代码：

 InitializeComponent();
        Label lb = new Label { Text="pasta"};
      img = new Image {Source ="pasta.jpg" };
        Frame fr = new Frame { HeightRequest=250, WidthRequest=250  };
        StackLayout st = new StackLayout {HeightRequest=fr.HeightRequest , WidthRequest =fr.WidthRequest , Orientation=StackOrientation.Vertical };
        sc  = new ScrollView { WidthRequest=st.WidthRequest , HeightRequest = st.HeightRequest  };
        Grid gr = new Grid {
            RowDefinitions = { new RowDefinition { Height =new GridLength(sc.HeightRequest) }, new RowDefinition { Height = new GridLength(sc.HeightRequest) } } ,
            ColumnDefinitions = { new ColumnDefinition { Width = new GridLength(sc.WidthRequest)} }

        };

        gr.Children.Add(img,0,0);
        gr.Children.Add(lb, 0, 1);
        sc.Content = gr;

        sc.Scrolled += On_scroll;
        st.Children.Add(sc);

        fr.Content = st;
        this.Content = fr;

现在，实际需要的是：滚动时，图像的透明度必须降低。为此，我使用事件Scrolled

 sc.Scrolled += On_scroll;
 stp = new Stepper { Increment=0.5};
  img.BindingContext = Img_Pr;//привязываем Img_Pr к   img.BindingContext
private void On_scroll(object sender, ScrolledEventArgs e)
    {
        stp.ValueChanged += Scroll_Step_img; //вызываем обработку stepper
    }

控制透明度的程度 - 我使用 Stepper - 我在事件处理程序中调用的处理程序Scrolled。在 Stepper 对象 - stp - 我调用一个事件ValueChanged并为它订阅一个处理程序。

为了控制图像的透明度——因为它没有这样的属性，我决定创建一个 BindableProperty

public  class Image_Property_Class : Xamarin.Forms.Image
{
    public static readonly BindableProperty transperentProperty = BindableProperty.Create("Transparent", typeof(Color), typeof(Xamarin.Forms.Image), new Color(255, 255, 255, 0));

    public Color Transparent
        {
        set { SetValue(transperentProperty,value); }

        get { return (Color)GetValue(transperentProperty); }
        }
  }

- 为此，我创建了一个从 Image 类中检查的类，并且已经在其中创建了 BindableProperty。理论上，通过它，我想改变原始图像的 alpha 通道的值——使其更透明。

public static Image_Property_Class Img_Pr = new Image_Property_Class { };//объект привязки

ValueChanged在stp 对象的事件处理程序中

public static void Scroll_Step_img(object sender, ValueChangedEventArgs e)
    {
        //настраиваем объект привязки
        Img_Pr.SetBinding(Image_Property_Class.transperentProperty, "img.BackgroundColor");
        //устанавливаем новое значение
        Img_Pr.Transparent = new Color(img.BackgroundColor.R, img.BackgroundColor.G, img.BackgroundColor.B, e.NewValue);
    }

我通过设置依赖项并传递 Transperent 属性本身来设置绑定 - 新值作为 -e 事件参数。但同时，当滚动时，图像并没有变得更加透明。这是完整的代码，按顺序：

 ScrollView sc;
   public static Image img;
    Stepper stp;
    public MainPage()
    {
        InitializeComponent();
        Label lb = new Label { Text="pasta"};
      img = new Image {Source ="pasta.jpg" };
        Frame fr = new Frame { HeightRequest=250, WidthRequest=250  };
        StackLayout st = new StackLayout {HeightRequest=fr.HeightRequest , WidthRequest =fr.WidthRequest , Orientation=StackOrientation.Vertical };
        sc  = new ScrollView { WidthRequest=st.WidthRequest , HeightRequest = st.HeightRequest  };
        Grid gr = new Grid {
            RowDefinitions = { new RowDefinition { Height =new GridLength(sc.HeightRequest) }, new RowDefinition { Height = new GridLength(sc.HeightRequest) } } ,
            ColumnDefinitions = { new ColumnDefinition { Width = new GridLength(sc.WidthRequest)} }

        };

        gr.Children.Add(img,0,0);
        gr.Children.Add(lb, 0, 1);
        sc.Content = gr;

        sc.Scrolled += On_scroll;
        st.Children.Add(sc);

        fr.Content = st;
        this.Content = fr;
       stp = new Stepper { Increment=0.5};
        img.BindingContext = Img_Pr;//привязываем Img_Pr к   img.BindingContext



    }
    public static Image_Property_Class Img_Pr = new Image_Property_Class { };//объект привязки


    private void On_scroll(object sender, ScrolledEventArgs e)
    {
        stp.ValueChanged += Scroll_Step_img; //вызываем обработку stepper
    }

    public static void Scroll_Step_img(object sender, ValueChangedEventArgs e)
    {
        //настраиваем объект привязки
        Img_Pr.SetBinding(Image_Property_Class.transperentProperty, "img.BackgroundColor");
        //устанавливаем новое значение
        Img_Pr.Transparent = new Color(img.BackgroundColor.R, img.BackgroundColor.G, img.BackgroundColor.B, e.NewValue);
    }

}

可绑定的操作

public  class Image_Property_Class : Xamarin.Forms.Image
{
    public static readonly BindableProperty transperentProperty = BindableProperty.Create("Transparent", typeof(Color), typeof(Xamarin.Forms.Image), new Color(255, 255, 255, 0));

    public Color Transparent
        {
        set { SetValue(transperentProperty,value); }

        get { return (Color)GetValue(transperentProperty); }
        }
}
c#

1 个回答

  1. Best Answer

    您可以通过这种方式使用 Opacity 和 Binding 属性。

    例如

    视图模型

     class ViewModel : INotifyPropertyChanged {
    double _opacity;
    public double Opacity {
        get => _opacity; 
        set {
            _opacity = value;
            OnPropertyChanged(nameof(Opacity));
        }
    }

    //Impement INotifyPropertyChanged 
    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

    Xaml

    <Image Opacity="{Binding Opacity}" Source="image.png" />

    在您的情况下，您可以执行以下操作：

    public static void Scroll_Step_img(object sender, ValueChangedEventArgs e)
        {
            Device.BeginInvokeOnMainThread(() => {
                                               Img_Pr.Opacity =  e.NewValue/255;
                                           });
        }
    • 2

相关问题