How to add custom properties to a usercontrol used in ItemsRepeater.ItemTemplate?

[ajmcateer]

Hey, I have an ItemsRepeater, inside of it I want to display a UserControl I created called CardView. How would I go about adding properties to it that can be bound to.

current usage

<core:CardView/>

target usage

<core:CardView Title="{Binding Title}" Image={Binding Image}/>

On top of that I have one other question.

1. Each card is going to add a view to a treeveiw, Sometimes these views need inputs that won't fit on the card itself. Any suggestions on the best way to prompt for dynamic inputs?

I was thinking of decorating properties with an attribute or getting the parameters of a constructor using reflection to get the inputs dynamically, but not sure what the best way to show these prompts on the screen would be.

[timunie]

That's not a UserControl. I'd create a new Control based on HeaderedContentControl. I've a sample, which is not yet merged: https://github.com/timunie/Avalonia.Samples/tree/Controls/RatingControl/src/Avalonia.Samples/CustomControls/RatingControlSample

[ajmcateer]

This is the implementation of CardView, Its very simple, I hardcoded things for testing, but now I am looking on the best way to add binding from another view.

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:avalonia="clr-namespace:Projektanker.Icons.Avalonia;assembly=Projektanker.Icons.Avalonia"
             mc:Ignorable="d" d:DesignWidth="175" d:DesignHeight="250"
             x:Class="my.name.space.Desktop.Views.Core.CardView">
	<Button Width="175"
            Height="250">
		<StackPanel HorizontalAlignment="Center">
			<TextBlock FontSize="32"
                       FontWeight="SemiBold"
                       HorizontalAlignment="Center"
                       Text="Github"/>
			<avalonia:Icon Value="fa-github" FontSize="64" Margin="0,30,0,0"/>
			<TextBox Margin="0,20,0,0"
                     Text=""
                     Watermark="BranchName?"
                     UseFloatingWatermark="True"
                     Width="150"/>
			<Button VerticalAlignment="Center"
                    HorizontalAlignment="Center"
                    Margin="0,15,0,0">Add</Button>
		</StackPanel>
	</Button>
</UserControl>```

[timunie]

Again, UserControl is probably not what you are looking for. You most likely need to create your own CardControl and add the needed Properties to it. Then create a style and add this to your App.axaml.

Example Card Control: https://github.com/PieroCastillo/Aura.UI/blob/master/src/Aura.UI/Controls/CardCollection/CardControl.cs
https://github.com/PieroCastillo/Aura.UI/blob/master/src/Aura.UI.FluentTheme/Controls/CardControlStyles.xaml

probably you can also use Aura.UI as it already provides what you need.

Thanks to @PieroCastillo for this great control. I use it in my App as well :-)