CODEWITHSUNDEEP
xamarinxamarin.forms
Alan2
Alan2

Reputation: 24572

Is it possible to give a Xamarin Frame different border colors?

Here is the XAML that I have:

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

I saw on the Google Translate that's on iOS that they use something like this kind of a frame to surround different rows in settings. However they have a different border color on the top and bottom.

Does anyone know if there is a way to do the with a frame?

enter image description here

Upvotes: 5

Views: 2659

Answers (2)

Santiago Quiroga
Santiago Quiroga

Reputation: 453

You could achieve that with a component, like this

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>

And, in your 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);
        }
    }
}

Then, you just do this on your .xaml

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

You can read more on Bindable Properties here

Upvotes: 2

Alex Pshul
Alex Pshul

Reputation: 702

AFAIK, you don't have a built in option for what you are looking for. You could play around by drawing multiple frames on top of each other with different colors and properties, but it is a bit too "hacky" for my taste.

I suggest you create a Custom Render for your own Frame control. This way, you will be able to draw the frame however you want and reuse your control in any other place.

Upvotes: 1

Related Questions