How to make the components , followed by reuse in XAML?

Question

I decided to make the control and then reuse. as directives in angular. but only reached Ads.

namespace Chainhub.Forms.UI.Controls
{
    public partial class BoxPickerControl : ContentView
    {
        public BoxPickerControl()
        {
           InitializeComponent();
        }
    }
}

BoxPickerControl in xaml for example

<?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="Chainhub.Forms.UI.Controls.BoxPickerControl">
  <StackLayout>
    <StackLayout>
    <StackLayout  BackgroundColor="#383940" Padding="5,5,5,5"  Orientation="Horizontal">
      <StackLayout  HorizontalOptions="StartAndExpand">
        <Label Text="Categories"   TextColor="White"></Label>
      </StackLayout>
</ContentView>

register and call in content page

<controls:BoxPickerControl>
</controls:BoxPickerControl>

and successfully caught

---

target invocation exception

---

What have I done wrong?

Answer 1

To create reusable controls you should create UserControl, then add some necessary controls inside your UserControl. For example, we are creating UserControl and it would be called FooUserControl:

<UserControl x:Class="OpenExcelFileAndConvertToArray.FooUserControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:OpenExcelFileAndConvertToArray"
         mc:Ignorable="d">
   <Grid>
       <StackPanel Orientation="Horizontal">
           <TextBlock Text="SomeText"/>
           <Button Content="Delete"/>
       </StackPanel>            
   </Grid>
</UserControl>

Then just in any other controls you can reuse this FooUserControl. For example:

<Window x:Class="OpenExcelFileAndConvertToArray.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    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:local="clr-namespace:OpenExcelFileAndConvertToArray"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid>        
    <StackPanel>            
        <ComboBox Text="qq" Name="comboBox">
            <ComboBoxItem Content="1"/>
            <ComboBoxItem Content="2"/>
            <ComboBoxItem Content="3"/>
        </ComboBox>
        <!--reusable control-->
        <local:FooUserControl/>            
    </StackPanel>
</Grid>