Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to have custom control update when inner content has changed

JoshuaNovakJoshuaNovak USMember ✭✭

I have a Xamarin Forms custom renderer I built using NControlView. It works, but if I have content bound to something inside it, for example a label inside it has bound text, it does not render properly. I think I need to Invalidate when content is updated inside of it or something of that nature, but I don't know how to go about doing that. Anyone have any ideas?

Here is my code:

using System;
using NControl.Abstractions;
using Xamarin.Forms;
using NGraphics;
using System.Diagnostics;
using System.Collections.Generic;

namespace MyApp.Controls
    public class HalfRibbon : NControlView
        public static BindableProperty EndPercentageProperty = 
            BindableProperty.Create<HalfRibbon, double> (p => p.EndPercentage, 0.07, 
                BindingMode.OneWay, null, EndPercentageChanged);

        public double EndPercentage 
            get { return (double)GetValue(EndPercentageProperty); }
            set { SetValue(EndPercentageProperty, value); }

        private static void EndPercentageChanged(BindableObject bindable, double oldValue, double newValue)
            (bindable as HalfRibbon).Invalidate();

        public static new BindableProperty BackgroundColorProperty = 
            BindableProperty.Create<HalfRibbon, Xamarin.Forms.Color> (
                p => p.BackgroundColor, Xamarin.Forms.Color.Transparent, BindingMode.OneWay, null, BackgroundColorChanged);

        public new Xamarin.Forms.Color BackgroundColor
            get { return (Xamarin.Forms.Color)GetValue(BackgroundColorProperty); }
            set { SetValue(BackgroundColorProperty, value); }

        private static void BackgroundColorChanged(BindableObject bindable, Xamarin.Forms.Color oldValue, Xamarin.Forms.Color newValue)
            (bindable as HalfRibbon).Invalidate();

        public HalfRibbon ()

        public override void Draw(NGraphics.ICanvas canvas, NGraphics.Rect rect)
            base.Draw(canvas, rect);

            var backgroundBrush = new SolidBrush(new NGraphics.Color(BackgroundColor.R,
                BackgroundColor.G, BackgroundColor.B, BackgroundColor.A));

            var width = rect.Width;
            var ribbonWidth = Math.Ceiling(width * EndPercentage);
            var height = rect.Height;

            canvas.DrawPath(new PathOp []{ 
                new MoveTo(0, 0),
                new LineTo(width, 0),
                new LineTo(width - ribbonWidth, height / 2),
                new LineTo(width, height),
                new LineTo(0, height),
                new LineTo(0, 0),
                new ClosePath()
            }, null, backgroundBrush);


  • JoshuaNovakJoshuaNovak USMember ✭✭

    Actually this seems to be because I am using commands and the commands don't seem to update the UI View properly. Is there a proper way to run commands so they update the UI View correctly?

  • JoshuaNovakJoshuaNovak USMember ✭✭

    Never mind, it has to do with me adding items to an observable collection and the collection not notifying the view properly. I'll make a new post for it.

Sign In or Register to comment.