Comment faire un bouton composite sur des formes de xamarin?

Question

Je voudrais ajouter 2 étiquettes ou 2 photos dans le bouton. Je veux définir les options verticales et les options horizontales. Comment puis-je faire? Je travaille actuellement sur ios. Ce serait mieux si vous me dites ios renderer.

Comme ceci;

Merci à tous.

Answer 1

Vous pouvez personnaliser un bouton via Custom Renderer. Créez votre rendu de bouton et ajoutez connexes BindableProperty. Ensuite, vous pouvez définir le texte des étiquettes dans Xaml.

Voici mon code comme exemple:

1. MyButton.cs dans PCL, réglez le BindableProperty ici:

   public class MyButton : Button 
   { 
       public static readonly BindableProperty LabelOneTextProperty = BindableProperty.Create("LabelOneText", typeof(string), typeof(MyButton), defaultBindingMode: BindingMode.TwoWay); 
       public static readonly BindableProperty LabelTwoTextProperty = BindableProperty.Create("LabelTwoText", typeof(string), typeof(MyButton), defaultBindingMode: BindingMode.TwoWay); 
   
   
       public string LabelOneText 
       { 
        get { return (string)GetValue(LabelOneTextProperty); } 
        set { SetValue(LabelOneTextProperty, value); } 
       } 
   
       public string LabelTwoText 
       { 
        get { return (string)GetValue(LabelTwoTextProperty); } 
        set { SetValue(LabelTwoTextProperty, value); } 
       } 
   } 
   

2. MyButtonRenderer.cs dans la plate-forme iOS, ajouter les étiquettes à MyButton et définir leurs cadres:

   class MyButtonRenderer: ButtonRenderer 
   { 
   
       UILabel labelOne; 
       UILabel labelTwo; 
   
       public override void LayoutSubviews() 
       { 
        base.LayoutSubviews(); 
        nfloat height = Control.Frame.Size.Height; 
        nfloat width = Control.Frame.Size.Width; 
   
        if (labelOne!=null) 
         labelOne.Frame = new CGRect(0, 0, width, height/2); 
   
        if (labelTwo != null) 
         labelTwo.Frame = new CGRect(0, height/2, width, height/2); 
   
       } 
       protected override void OnElementChanged(ElementChangedEventArgs<Button> e) 
       { 
        base.OnElementChanged(e); 
   
        if (Control != null) 
        { 
         var button = e.NewElement as MyButton; 
   
         labelOne = new UILabel(); 
         labelOne.Text = button.LabelOneText; 
         labelOne.TextAlignment = UITextAlignment.Center; 
   
         labelTwo = new UILabel(); 
         labelTwo.Text = button.LabelTwoText; 
         labelTwo.TextAlignment = UITextAlignment.Center; 
   
         this.AddSubview(labelOne); 
         this.AddSubview(labelTwo); 
        } 
       } 
   } 
   

3. définir les textes du bu Les étiquettes de tton à MainPage.xaml dans PCL:

   <ContentPage.Content> 
       <StackLayout> 
        <local:MyButton LabelOneText="OneText" LabelTwoText="TwoText" BackgroundColor="Red"/> 
       </StackLayout> 
   </ContentPage.Content> 
   

   Il fonctionne comme ceci:

   

En outre, pour l'ajout de photos, il vous suffit de remplacer les UILabels à UIImageViews.

Answer 2

Vous pouvez créer une grille, ajouter un bouton occupant toutes les lignes et colonnes, puis ajouter les vues souhaitées (les deux étiquettes dans ce cas) avec InputTransparent = true.

C'est tout, espérons que ça aide!