是否可以给Xamarin Frame设置不同的边框颜色?

时间:2018-11-21 15:30:13

标签: xamarin xamarin.forms

这是我拥有的XAML:

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

我在iOS上的Google Translate上看到,他们使用类似的框架来包围设置中的不同行。但是,它们的顶部和底部具有不同的边框颜色。

有人知道镜框是否有办法做吗?

enter image description here

2 个答案:

答案 0 :(得分:1)

AFAIK,您没有所需的内置选项。 您可以通过在彼此之上绘制多个具有不同颜色和属性的框架来进行游戏,但是就我的口味而言,这有点“怪异”。

我建议您为自己的框架控件创建一个Custom Render。这样,您将能够根据需要绘制框架并在其他任何地方重复使用控件。

答案 1 :(得分:1)

您可以使用这样的组件来实现这一目标

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>

然后,在您的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);
        }
    }
}

然后,您只需在.xaml上执行此操作

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

您可以阅读有关可绑定属性here

的更多信息