Binding to an internal observable collection on a templated control

[nrspring]

I have an Avalonia Templated control that has a Styled Property of "Value" that is a string. It's purpose is to accept a series of tags that are separated by spaces. I would like to split that string and show the individual tags in an item control (or item repeater).

So - I wrote code to catch the changes to "Value" and split out the values and put them in an observable collection. I know that the collection is being populated correctly, but I cannot get it to display on the control.

I've tried making the collection as an observablecollection, avalonialist, styled property, direct property, etc. Also tried templatebinding vs binding to the parent for the itemscontrol.

Any thoughts on what I am doing wrong?

public class FormTagControl : TemplatedControl
{
    public static readonly StyledProperty<string> ValueProperty =
    AvaloniaProperty.Register<FormTagControl, string>(nameof(Value), defaultBindingMode: BindingMode.TwoWay);

    public static readonly StyledProperty<bool> ShowEditModeProperty =
    AvaloniaProperty.Register<FormTagControl, bool>(nameof(ShowEditMode), defaultBindingMode: BindingMode.TwoWay);

    public static readonly StyledProperty<bool> ShowAddButtonProperty =
    AvaloniaProperty.Register<FormTagControl, bool>(nameof(ShowEditMode), defaultBindingMode: BindingMode.TwoWay);

    public static readonly StyledProperty<string> ErrorMessageProperty =
    AvaloniaProperty.Register<FormTagControl, string>(nameof(ErrorMessage), defaultBindingMode: BindingMode.OneWay);

    public static readonly StyledProperty<string> LabelProperty =
        AvaloniaProperty.Register<FormTagControl, string>(nameof(Label), defaultBindingMode: BindingMode.OneWay);

    public static readonly StyledProperty<string> WatermarkProperty =
        AvaloniaProperty.Register<FormTagControl, string>(nameof(Watermark), defaultBindingMode: BindingMode.OneWay);

    public ObservableCollection<string> Tags { get; set; } = new();

    protected bool ShowEditMode
    {
        get => GetValue(ShowEditModeProperty);
        set => SetValue(ShowEditModeProperty, value);
    }

    protected bool ShowAddButton
    {
        get => GetValue(ShowAddButtonProperty);
        set => SetValue(ShowAddButtonProperty, value);
    }

    public string Value
    {
        get => GetValue(ValueProperty);
        set => SetValue(ValueProperty, value);
    }

    public string ErrorMessage
    {
        get => GetValue(ErrorMessageProperty);
        set => SetValue(ErrorMessageProperty, value);
    }

    public string Label
    {
        get => GetValue(LabelProperty);
        set => SetValue(LabelProperty, value);
    }

    public string Watermark
    {
        get => GetValue(WatermarkProperty);
        set => SetValue(WatermarkProperty, value);
    }

    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
    {
        var btnGoToEditMode = e.NameScope.Find<Button>("PART_GoToEditModeButton");
        var btnGoToViewMode = e.NameScope.Find<Button>("PART_GoToViewModeButton");
        var btnAddTags = e.NameScope.Find<Button>("PART_AddButton");

        if (btnGoToEditMode is not null)
        {
            btnGoToEditMode.Click += (s, e) =>
            {
                ShowEditMode = true;
            };
        }

        if (btnGoToViewMode is not null)
        {
            btnGoToViewMode.Click += (s, e) =>
            {
                ShowEditMode = false;
            };
        }

        if (btnAddTags is not null)
        {
            btnAddTags.Click += (s, e) =>
            {
                ShowEditMode = true;
            };
        }

        base.OnApplyTemplate(e);
    }

    protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
    {
        if (change.Property.Name == nameof(Value))
        {
            if (string.IsNullOrEmpty(change.NewValue?.ToString()))
            {
                ShowAddButton = true;
            }
            else
            {
                ShowAddButton = false;
            }

            BuildTagList();
        }

        base.OnPropertyChanged(change);
    }

    protected void BuildTagList()
    {
        Tags.Clear();

        string[] tagValues = Value.Split(' ', StringSplitOptions.RemoveEmptyEntries);
        foreach (string tagValue in tagValues)
        {
            Tags.Add(tagValue);
        }
    }
}

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:i="https://github.com/projektanker/icons.avalonia"
        xmlns:controls="using:NRS.UI.Mvvm.FormControls">
    <Design.PreviewWith>
        <controls:FormTagControl />
    </Design.PreviewWith>

    <Style Selector="controls|FormTagControl">
        <!-- Set Defaults -->
        <Setter Property="Template">
            <ControlTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>

                    <TextBlock Grid.Row="0" Classes="NRSLabel" Text="{TemplateBinding Label}"></TextBlock>

                    <Grid Grid.Row="1" IsVisible="{TemplateBinding ShowEditMode}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Button i:Attached.Icon="fa-solid fa-grip" Grid.Column="0" Name="PART_GoToViewModeButton" Classes="NoStyling" Height="38">
                        </Button>

                        <TextBox Grid.Column="1" Watermark="{TemplateBinding Watermark}"
                            Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"/>
                    </Grid>

                    <Grid Grid.Row="1" IsVisible="{TemplateBinding ShowEditMode,Converter={x:Static BoolConverters.Not}}">
                        <Button Name="PART_GoToEditModeButton" Classes="NoStyling" Height="38"
                                IsVisible="{TemplateBinding ShowAddButton,Converter={x:Static BoolConverters.Not}}">
                            <ItemsControl Margin="0 40 0 0" ItemsSource="{Binding Tags, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <WrapPanel />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>

                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding}" />
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </Button>
                        <Button Name="PART_AddButton" Height="38"
                                IsVisible="{TemplateBinding ShowAddButton}">
                            <Label>Add Tags</Label>
                        </Button>
                    </Grid>

                    <TextBlock Grid.Row="2" Classes="NRSErrorMessage" Text="{TemplateBinding ErrorMessage}" />
                </Grid>
            </ControlTemplate>
        </Setter>
    </Style>
</Styles>

[timunie]

See how Avalonia.samples RatingControl sample does it

[timunie]

Maybe needs to be public getter though

[nrspring]

Thank you for your help. It worked.

[nrspring]

For future reference ... here is the solution. Note that I removed one of the buttons from the original as it messing with the UI.

public class FormTagControl : TemplatedControl
{
    public static readonly StyledProperty<string> ValueProperty =
    AvaloniaProperty.Register<FormTagControl, string>(nameof(Value), defaultBindingMode: BindingMode.TwoWay);

    public static readonly StyledProperty<bool> ShowEditModeProperty =
    AvaloniaProperty.Register<FormTagControl, bool>(nameof(ShowEditMode), defaultBindingMode: BindingMode.TwoWay);

    public static readonly StyledProperty<bool> ShowAddButtonProperty =
    AvaloniaProperty.Register<FormTagControl, bool>(nameof(ShowEditMode), defaultBindingMode: BindingMode.TwoWay);

    public static readonly StyledProperty<string> ErrorMessageProperty =
    AvaloniaProperty.Register<FormTagControl, string>(nameof(ErrorMessage), defaultBindingMode: BindingMode.OneWay);

    public static readonly StyledProperty<string> LabelProperty =
        AvaloniaProperty.Register<FormTagControl, string>(nameof(Label), defaultBindingMode: BindingMode.OneWay);

    public static readonly StyledProperty<string> WatermarkProperty =
        AvaloniaProperty.Register<FormTagControl, string>(nameof(Watermark), defaultBindingMode: BindingMode.OneWay);

    public static readonly DirectProperty<FormTagControl, IEnumerable<string>> TagsProperty =
    AvaloniaProperty.RegisterDirect<FormTagControl, IEnumerable<string>>(
        nameof(Tags),              // The name of the Property
        o => o.Tags);

    private IEnumerable<string> _tags = new AvaloniaList<string>();

    public IEnumerable<string> Tags
    {
        get { return _tags; }
        private set { SetAndRaise(TagsProperty, ref _tags, value); } // make sure the setter is private
    }

    protected bool ShowEditMode
    {
        get => GetValue(ShowEditModeProperty);
        set => SetValue(ShowEditModeProperty, value);
    }

    protected bool ShowAddButton
    {
        get => GetValue(ShowAddButtonProperty);
        set => SetValue(ShowAddButtonProperty, value);
    }

    public string Value
    {
        get => GetValue(ValueProperty);
        set => SetValue(ValueProperty, value);
    }

    public string ErrorMessage
    {
        get => GetValue(ErrorMessageProperty);
        set => SetValue(ErrorMessageProperty, value);
    }

    public string Label
    {
        get => GetValue(LabelProperty);
        set => SetValue(LabelProperty, value);
    }

    public string Watermark
    {
        get => GetValue(WatermarkProperty);
        set => SetValue(WatermarkProperty, value);
    }

    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
    {
        var btnGoToEditMode = e.NameScope.Find<ItemsControl>("PART_GoToEditModeButton");
        var btnGoToViewMode = e.NameScope.Find<Button>("PART_GoToViewModeButton");
        var btnAddTags = e.NameScope.Find<Button>("PART_AddButton");

        if (btnGoToEditMode is not null)
        {
            btnGoToEditMode.PointerPressed += (s, e) =>
            {
                ShowEditMode = true;
            };
        }

        if (btnGoToViewMode is not null)
        {
            btnGoToViewMode.Click += (s, e) =>
            {
                ShowEditMode = false;
            };
        }

        if (btnAddTags is not null)
        {
            btnAddTags.Click += (s, e) =>
            {
                ShowEditMode = true;
            };
        }

        base.OnApplyTemplate(e);
    }

    protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
    {
        if (change.Property.Name == nameof(Value))
        {
            if (string.IsNullOrEmpty(change.NewValue?.ToString()))
            {
                ShowAddButton = true;
            }
            else
            {
                ShowAddButton = false;
            }

            BuildTagList();
        }

        base.OnPropertyChanged(change);
    }

    public FormTagControl()
    {
        BuildTagList();
    }

    protected void BuildTagList()
    {
        var list = new AvaloniaList<string>();

        if(!string.IsNullOrEmpty(Value))
        {
            string[] tagValues = Value.Split(' ', StringSplitOptions.RemoveEmptyEntries);
            foreach (string tagValue in tagValues)
            {
                list.Add(tagValue);
            }
        }

        Tags = list;
    }
}

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:i="https://github.com/projektanker/icons.avalonia"
        xmlns:controls="using:NRS.UI.Mvvm.FormControls">
	<Design.PreviewWith>
		<controls:FormTagControl />
	</Design.PreviewWith>

	<Style Selector="controls|FormTagControl">
		<!-- Set Defaults -->
		<Setter Property="Template">
			<ControlTemplate>
				<Grid>
					<Grid.RowDefinitions>
						<RowDefinition></RowDefinition>
						<RowDefinition></RowDefinition>
						<RowDefinition></RowDefinition>
					</Grid.RowDefinitions>

					<TextBlock Grid.Row="0" Classes="NRSLabel" Text="{TemplateBinding Label}"></TextBlock>

					<Grid Grid.Row="1" IsVisible="{TemplateBinding ShowEditMode}">
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="Auto" />
							<ColumnDefinition Width="*" />
						</Grid.ColumnDefinitions>

						<Button i:Attached.Icon="fa-solid fa-grip" Grid.Column="0" Name="PART_GoToViewModeButton" Classes="NoStyling" Height="38">
						</Button>

						<TextBox Grid.Column="1" Watermark="{TemplateBinding Watermark}"
							Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"/>
					</Grid>

					<Grid Grid.Row="1" IsVisible="{TemplateBinding ShowEditMode,Converter={x:Static BoolConverters.Not}}">
						<ItemsControl ItemsSource="{TemplateBinding Tags}" Name="PART_GoToEditModeButton">
							<ItemsControl.ItemsPanel>
								<ItemsPanelTemplate>
									<WrapPanel  />
								</ItemsPanelTemplate>
							</ItemsControl.ItemsPanel>

							<ItemsControl.ItemTemplate>
								<DataTemplate>
									<Border Padding="10,5,10,5" Background="Blue" CornerRadius="5" Margin="0,0,5,0">
									<TextBlock Text="{Binding}" />
									</Border>
								</DataTemplate>
							</ItemsControl.ItemTemplate>
						</ItemsControl>
						<Button Name="PART_AddButton" Height="38"
								IsVisible="{TemplateBinding ShowAddButton}">
							<Label>Add Tags</Label>
						</Button>
					</Grid>

					<TextBlock Grid.Row="2" Classes="NRSErrorMessage" Text="{TemplateBinding ErrorMessage}" />
				</Grid>
			</ControlTemplate>
		</Setter>
	</Style>
</Styles>