Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 77050

Composite Custom Control based on Xamarin Form components with possible Custom components

$
0
0

Hi there,

My goal for right now is creating a composite control which combines a Image and Entry control (XF) and placing these in a horizontal positioning.
For now i was planning on using a StackPanel in the winphone renderer to accomplish this.

This is what i have so far:
The Model for the control
public class CsImageEntry : View
{
public static readonly BindableProperty ImageSourceProperty = BindableProperty.Create<CsImageEntry, ImageSource>(p => p.ImageSource, null);
public ImageSource ImageSource
{
get { return (ImageSource)GetValue(ImageSourceProperty); }
set { SetValue(ImageSourceProperty, value); }
}

    public static readonly BindableProperty TextProperty = BindableProperty.Create<CsImageEntry, string>(p => p.Text, default(string));
    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public static readonly BindableProperty TextColorProperty = BindableProperty.Create<CsImageEntry, Color>(p => p.TextColor, Color.Default);
    public Color TextColor
    {
        get { return (Color)GetValue(TextColorProperty); }
        set { SetValue(TextColorProperty, value); }
    }
}

The winPhone renderer for the control
public class CsImageEntryRenderer : ViewRenderer<CsImageEntry, FrameworkElement>
{
public CsImageEntryRenderer() { }

    protected override void OnElementChanged(ElementChangedEventArgs<CsImageEntry> e)
    {
        base.OnElementChanged(e);

        CsImageEntry csImageEntry = (CsImageEntry)e.NewElement;

        if (csImageEntry != null)
        {
            var converter = new ColorConverter();

            StackPanel stackPanel = new StackPanel();
            stackPanel.Margin = new System.Windows.Thickness(0);
            stackPanel.Orientation = Orientation.Horizontal;

            TextBox textBox = new TextBox();
            textBox.Text = csImageEntry.Text;
            textBox.Foreground = (SolidColorBrush)converter.Convert(csImageEntry.TextColor, null, null, null);

            stackPanel.Children.Add(textBox);

            SetNativeControl(stackPanel);
        }
    }

    protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if(e.PropertyName == TextBox.TextProperty.ToString())
        {
            TextBox textBox = (TextBox)Children[0];
            textBox.Text = this.Element.Text;
        }
    }
}

Roughly how i intend to use it within a Page
xmlns:Controls="clr-namespace:Controls;assembly=Controls"
Controls:CsImageEntry x:Name="imageEntry" ImageSource="/Assets/greenCheck.png" Text="Hello" TextColor="Black" Grid.Row="6"

The difficulty i am facing right now is that for some reason the Text property is being set to null 2 times before the Renderer ever gets called.
When the Renderer finally does get called it crashes on a nullreference Exception when trying to set csImageEntry.Text on textBox.Text.

Any clues to what i am doing wrong would be much appreciated!


Viewing all articles
Browse latest Browse all 77050

Trending Articles