Create custom view to be used throughout Xamarin Forms App

Question

I wish to create a custom view (a label and an entry in a vertical stack) which I have to use throughout the app. The requirement is that when the entry has no text, the label above should be hidden and vice versa. I tried creating a content view but am unable to set the visibility while using the custom control from an xaml.

CustomControl

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

namespace iTrans.CustomControls
{
    public partial class LabelEditor : ContentView
    {
        public LabelEditor()
        {
            InitializeComponent();
        }

        void Handle_TextChanged(object sender, Xamarin.Forms.TextChangedEventArgs e)
        {
            if (string.IsNullOrEmpty(entry.Text))
                label.IsVisible = false;
            else
                label.IsVisible = true;
        }
    }
}

Xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="iTrans.CustomControls.LabelEditor">
    <ContentView.Content>
        <Label x:Name="label"></Label>
        <Entry x:Name="entry" TextChanged="Handle_TextChanged"/>
    </ContentView.Content>
</ContentView>

Usage:

<custom:LabelEditor EditorText="hello" LabelText="bye"/>

Steve Chadbourne Steve Chadbourne · Accepted Answer · 2017-11-06T23:07:52

You need to add some bindable properties to your custom view, one for editor text and one for label text.

This blog post will show you how to do that.

Create custom view to be used throughout Xamarin Forms App

1 Answers