覆盖ContentView上的内容

时间:2020-07-02 18:50:56

标签: xamarin xamarin.forms

我正在尝试做一些我认为很简单的事情,但是我还没有找到解决方案。 我有一个非常基本的自定义元素,用于在框架内添加粗边框。

XAML

<?xml version="1.0" encoding="UTF-8" ?>
<Frame
    x:Class="ResumeApp.CustomElements.BetterFrame"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Name="OuterFrame"
    HorizontalOptions="FillAndExpand"
    OutlineColor="Black">
    <Frame
        x:Name="InnerFrame"
        HorizontalOptions="FillAndExpand"
        OutlineColor="Black" />
</Frame>

CodeBehind

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace ResumeApp.CustomElements
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    [ContentProperty(nameof(Content))]
    public partial class BetterFrame : Frame
    {
        private int _Thickness = 0;

        public int Thickness
        {
            get { return _Thickness; }
            set
            {
                Padding = new Thickness(value); _Thickness = value;
            }
        }

        public float Corner
        {
            get { return InnerFrame.CornerRadius; }
            set
            {
                InnerFrame.CornerRadius = value; OuterFrame.CornerRadius = value;
            }
        }

        public new View Content
        {
            get
            {
//Breakpoint not hit here
                return (View)GetValue(ContentProperty);
            }
            set
            {
//breakpoint not hit here
                SetValue(ContentProperty, value);
            }
        }

        public Color InnerColor { get { return InnerFrame.BackgroundColor; } set { InnerFrame.BackgroundColor = value; } }
        public Color OuterColor { get { return OuterFrame.BackgroundColor; } set { OuterFrame.BackgroundColor = value; } }
        public new Color BorderColor { get { return InnerFrame.BorderColor; } set { InnerFrame.BorderColor = value; OuterFrame.BorderColor = value; } }

        public BetterFrame()
        {
            InitializeComponent();
        }

        protected override void OnParentSet()
        {
            base.OnParentSet();

            for (Element Parent = this.Parent; Parent != null; Parent = Parent.Parent)
            {
                try
                {
                    Color background = Parent.GetPropertyIfSet<Color>(BackgroundColorProperty, Color.Transparent);
                    if (background != Color.Transparent && InnerFrame.BackgroundColor != Color.Transparent)
                    {
                        InnerFrame.BackgroundColor = background;
                        break;
                    }
                }
                catch
                {
                }
            }
        }
    }
}

因此,使用上面的代码,当框架内没有内容时,所有内容均按预期进行,但是一旦添加内容,它就会覆盖InnerFrame。有什么方法可以使我在添加内容时将其添加到InnerFrame而不是Outter Frame。我添加了内容属性以尝试捕获它的设置,但是我从未遇到设置过的断点,因此我不认为它正在被使用。

1 个答案:

答案 0 :(得分:1)

如果在另一个Xaml中添加渐变,它将覆盖内部的Frame。因为添加的内容是外部Frame的子视图,所以Fram只能拥有一个子视图。因此内部Frame将被覆盖。

<local:BetterFrame>
    <StackLayout BackgroundColor="AliceBlue">
        <Entry x:Name="myentry2"
                Text="Second Entry" />
    </StackLayout>
</local:BetterFrame>

此处将不显示内部Frame

enter image description here

因此,如果直接在BetterFrame中添加内容,它将显示。

<?xml version="1.0" encoding="utf-8" ?>
<Frame xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:d="http://xamarin.com/schemas/2014/forms/design"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       x:Name="OuterFrame"
       x:Class="AppEntryTest.BetterFrame"
       HorizontalOptions="FillAndExpand"
       OutlineColor="Black">
    <Frame x:Name="InnerFrame"
           HorizontalOptions="FillAndExpand"
           OutlineColor="Black">
        <StackLayout BackgroundColor="AliceBlue">
            <Entry x:Name="myentry2"
                   Text="Second Entry" />
        </StackLayout>
    </Frame>
</Frame>

效果:

enter image description here

=============================更新================== ===============

创建自定义ContentView并包含外框内框

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="AppEntryTest.Controls.CustomFrameView">
  <ContentView.ControlTemplate>
        <ControlTemplate >
            <Frame x:Name="FrameExtContainer"
                   Padding="5"
                   HasShadow="False"
                   HorizontalOptions="FillAndExpand"
                   CornerRadius="5"
                   OutlineColor="Black"
                   BorderColor="Black">
                <Frame x:Name="FrameIntContainer"
                       Padding="15"
                       Margin="12"
                       HasShadow="False"
                       HorizontalOptions="FillAndExpand"
                       CornerRadius="5"
                       OutlineColor="Black"
                       BorderColor="Black">
                    <ContentPresenter />
                </Frame>
            </Frame>
        </ControlTemplate>
    </ContentView.ControlTemplate>
</ContentView>

现在在另一个 Xaml 中可以使用了:

<local:CustomFrameView>
    <StackLayout BackgroundColor="AliceBlue">
        <Entry x:Name="myentry3"
                Text="Third Entry" />
    </StackLayout>
</local:CustomFrameView>

效果:

enter image description here