Xamarin Forms Xlabs

Question

我想添加一個按鈕，應該在listView上面，就像whatsapp人做的一樣，我想用Xamarin Forms做同樣的事情，我試過用xlab PopupLayout做但我無法修復圖像中顯示的按鈕的位置問題是與不同的屏幕尺寸和方向。 因此，任何1可以幫助我如何通過在xamarin表單中使用xlab popuplayout來修復彈出窗口的位置，並且它應該處理所有屏幕尺寸和方向。

Answer 1

看一看this great post亞歷克斯·鄧恩。他通過Xamarin.Forms在Android和iOS上實現了浮動操作按鈕（因爲它被稱爲）。這是基本的，但你可以自己擴展。

要點是你在你的共享代碼創建一個控制，像這樣：

public partial class FloatingActionButton : Button 
{ 
    public static BindableProperty ButtonColorProperty = BindableProperty.Create(nameof(ButtonColor), typeof(Color), typeof(FloatingActionButton), Color.Accent); 
    public Color ButtonColor 
    { 
     get 
     { 
      return (Color)GetValue(ButtonColorProperty); 
     } 

     set 
     { 
       SetValue(ButtonColorProperty, value); 
     } 
    } 

    public FloatingActionButton() 
    { 
     InitializeComponent(); 
    } 
} 

現在在Android上實現custom renderer，像這樣：

using FAB = Android.Support.Design.Widget.FloatingActionButton; 

[assembly: ExportRenderer(typeof(SuaveControls.Views.FloatingActionButton), typeof(FloatingActionButtonRenderer))] 
namespace SuaveControls.FloatingActionButton.Droid.Renderers 
{ 
    public class FloatingActionButtonRenderer : Xamarin.Forms.Platform.Android.AppCompat.ViewRenderer<SuaveControls.Views.FloatingActionButton, FAB> 
    { 
     protected override void OnElementChanged(ElementChangedEventArgs<SuaveControls.Views.FloatingActionButton> e) 
     { 
      base.OnElementChanged(e); 

      if (e.NewElement == null) 
       return; 

      var fab = new FAB(Context); 
      // set the bg 
      fab.BackgroundTintList = ColorStateList.ValueOf(Element.ButtonColor.ToAndroid()); 

      // set the icon 
      var elementImage = Element.Image; 
      var imageFile = elementImage?.File; 

      if (imageFile != null) 
      { 
       fab.SetImageDrawable(Context.Resources.GetDrawable(imageFile)); 
      } 
      fab.Click += Fab_Click; 
      SetNativeControl(fab); 

     } 
     protected override void OnLayout(bool changed, int l, int t, int r, int b) 
     { 
      base.OnLayout(changed, l, t, r, b); 
      Control.BringToFront(); 
     } 

     protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e) 
     { 
      var fab = (FAB)Control; 
      if (e.PropertyName == nameof(Element.ButtonColor)) 
      { 
       fab.BackgroundTintList = ColorStateList.ValueOf(Element.ButtonColor.ToAndroid()); 
      } 
      if (e.PropertyName == nameof(Element.Image)) 
      { 
       var elementImage = Element.Image; 
       var imageFile = elementImage?.File; 

       if (imageFile != null) 
       { 
        fab.SetImageDrawable(Context.Resources.GetDrawable(imageFile)); 
       } 
      } 
      base.OnElementPropertyChanged(sender, e); 

     } 

     private void Fab_Click(object sender, EventArgs e) 
     { 
      // proxy the click to the element 
      ((IButtonController)Element).SendClicked(); 
     } 
    } 
} 

和iOS，就像這樣：

[assembly: ExportRenderer(typeof(SuaveControls.Views.FloatingActionButton), typeof(FloatingActionButtonRenderer))] 
namespace SuaveControls.FloatingActionButton.iOS.Renderers 
{ 
    [Preserve] 
    public class FloatingActionButtonRenderer : ButtonRenderer 
    { 
     public static void InitRenderer() 
     { 
     } 
     public FloatingActionButtonRenderer() 
     { 
     } 
     protected override void OnElementChanged(ElementChangedEventArgs<Button> e) 
     { 
      base.OnElementChanged(e); 

      if (e.NewElement == null) 
       return; 

      // remove text from button and set the width/height/radius 
      Element.WidthRequest = 50; 
      Element.HeightRequest = 50; 
      Element.BorderRadius = 25; 
      Element.BorderWidth = 0; 
      Element.Text = null; 

      // set background 
      Control.BackgroundColor = ((SuaveControls.Views.FloatingActionButton)Element).ButtonColor.ToUIColor(); 
     } 
     public override void Draw(CGRect rect) 
     { 
      base.Draw(rect); 
      // add shadow 
      Layer.ShadowRadius = 2.0f; 
      Layer.ShadowColor = UIColor.Black.CGColor; 
      Layer.ShadowOffset = new CGSize(1, 1); 
      Layer.ShadowOpacity = 0.80f; 
      Layer.ShadowPath = UIBezierPath.FromOval(Layer.Bounds).CGPath; 
      Layer.MasksToBounds = false; 

     } 
     protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e) 
     { 
      base.OnElementPropertyChanged(sender, e); 

      if (e.PropertyName == "ButtonColor") 
      { 
       Control.BackgroundColor = ((SuaveControls.Views.FloatingActionButton)Element).ButtonColor.ToUIColor(); 
      } 
     } 
    } 
} 

您現在應該可以使用XAML中的按鈕和代碼。 這裏是XAML樣本：

<?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:local="clr-namespace:SuaveControls.FabExample" xmlns:controls="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton" x:Class="SuaveControls.FabExample.MainPage"> 
    <StackLayout Margin="32"> 
     <Label Text="This is a Floating Action Button!" VerticalOptions="Center" HorizontalOptions="Center"/> 

     <controls:FloatingActionButton x:Name="FAB" HorizontalOptions="CenterAndExpand" WidthRequest="50" HeightRequest="50" VerticalOptions="CenterAndExpand" Image="ic_add_white.png" ButtonColor="#03A9F4" Clicked="Button_Clicked"/> 
    </StackLayout> 
</ContentPage> 

請注意，所有這一切學分出去亞歷克斯。他的所有代碼都是here。在過去，我也使用NControls code代碼來創建類似的東西。我相信還有更棒的圖書館。但是，請仔細閱讀對圖書館的支持。如果我沒有錯誤，XLabs軟件包不再受支持。