Est-il possible de donner à un cadre Xamarin des couleurs de bordure différentes ?

Question

Voici le XAML que j'ai :

<Frame CornerRadius="1" HasShadow="false" Margin="10" 
   BackgroundColor="White" BorderColor="Silver" Padding="0" >

J'ai vu sur Google Translate qui est sur iOS qu'ils utilisent quelque chose comme ce genre de cadre pour entourer les différentes rangées dans les paramètres. Cependant, la couleur de la bordure est différente en haut et en bas.

Quelqu'un sait-il s'il est possible de le faire avec un cadre ?

Answer 1

Pour ce faire, vous pouvez utiliser un composant, comme suit

BorderEntryComponent.xaml

<?xml version="1.0" encoding="UTF-8"?>
<StackLayout
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="X.Y.Z.BorderEntryComponent"

    Spacing="0">
    <BoxView
        x:Name="TopBorder"
        HeightRequest="2"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="EndAndExpand" />
    <Entry x:Name="Entry" />
    <BoxView
        x:Name="BottomBorder"
        HeightRequest="2"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="EndAndExpand" />
</StackLayout>

Et, dans votre BorderEntryComponent.xaml.cs

using System;
using System.Collections.Generic;
using System.Runtime.CompilerServices;
using Xamarin.Forms;

namespace X.Y.Z
{
    public partial class BorderEntryComponent : StackLayout
    {    
        public static readonly BindableProperty TopColorProperty =
            BindableProperty.Create(nameof(TopColor), typeof(Color), typeof(BorderEntryComponent), default(Color), BindingMode.OneWay);

        public static readonly BindableProperty BottomColorProperty =
            BindableProperty.Create(nameof(BottomColor), typeof(Color), typeof(BorderEntryComponent), default(Color), BindingMode.OneWay);

        public UnderlineEntryComponent()
        {
            InitializeComponent();
        }

        protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            base.OnPropertyChanged(propertyName);

            if (propertyName == TopColorProperty.PropertyName)
            {
                this.TopBorder.Color = TopColor;
            }
            else if (propertyName == BottomColorProperty.PropertyName)
            {
                this.BottomBorder.Color = BottomColor;
            }
        }

        public Color TopColor
        {
            get => (Color)GetValue(TopColorProperty);
            set => SetValue(TopColorProperty, value);
        }

        public Color BottomColor
        {
            get => (Color)GetValue(BottomColorProperty);
            set => SetValue(BottomColorProperty, value);
        }
    }
}

Ensuite, il suffit de faire ceci dans votre fichier .xaml

<components:UnderlineEntryComponent
                    TopColor = "Blue"
                    BottomColor = "Black" />

Pour en savoir plus sur les propriétés liables aquí

Answer 2

AFAIK, vous n'avez pas d'option intégrée pour ce que vous recherchez. Vous pourriez vous amuser à dessiner plusieurs cadres les uns sur les autres avec des couleurs et des propriétés différentes, mais c'est un peu trop "bricolé" à mon goût.

Je vous suggère de créer un Rendu personnalisé pour votre propre contrôle du cadre. De cette façon, vous pourrez dessiner le cadre comme vous le souhaitez et réutiliser votre contrôle à n'importe quel autre endroit.