How to show grid items inside adaptive grid view in user control

Question

Does anyone know the correct and most efficient way to add items as strings to an AdaptiveGridView located inside my user control? I tried to use an array but I'm not sure of the correct way to implement this.

MainPage.xaml.cs

...
            var controlTitle = new MyUserControl();
            controlTitle .TextTitle= "Prime Numbers";
            controlTitle.TSGridExpandableTextEntitiesDetails = "2", "3", "5, "7", "11", "13", "17", "19", "23", "29", "31", "37", "41", "43", "47", "53", "59", "61", "67", "71", "73", "79", "83", "89", "97", "101";

...

MyUserControl.xaml

<UserControl
    x:Class="MyApp.UserControls.MyUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp.UserControls"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <UserControl.Resources>
        <DataTemplate x:Key="GridItemsTemplate">
            <Grid>
                <TextBlock
                    Text="{x:Bind GridItem}"
                    Style="{StaticResource TitleTextBlockStyle}"/>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>

    <controls:DropShadowPanel x:Name="myGrid" BlurRadius="10" ShadowOpacity="2" OffsetX="0" OffsetY="3" 
                              HorizontalAlignment="Left">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <StackPanel Grid.Row="0" Orientation="Vertical">
                <TextBlock x:Name="txtHeader" Text="Hello World"/>
            </StackPanel>
            <StackPanel Grid.Row="1" Orientation="Vertical" Padding="10,0,10,10" x:Name="myStackPanel">
                <TextBlock x:Name="txtTitle" 
                           Text="{x:Bind TSGridExpandableTextEntitiesDetails}" />
                <controls:AdaptiveGridView Name="MyAdaptiveGridView"
                                   OneRowModeEnabled="False"
                                   ItemHeight="200"
                                   DesiredWidth="300"
                                   SelectionMode="None"
                                   IsItemClickEnabled="False"
                                   ItemTemplate="{StaticResource GridItemsTemplate}"/>
            </StackPanel>
        </Grid>
    </controls:DropShadowPanel>
</UserControl>

MyUserControl.xaml.cs

    public sealed partial class MyUserControl : UserControl
    {
        public MyUserControl()
        {
            this.InitializeComponent();
        }

        // Dependency properties
        public static readonly DependencyProperty TitleTextProperty =
            DependencyProperty.Register("TitleText", typeof(string),
                typeof(MyUserControl),
                new PropertyMetadata(""));

        public static readonly DependencyProperty GridItemsProperty =
            DependencyProperty.Register("GridItems", typeof(array?),
                typeof(MyUserControl),
                new PropertyMetadata(""));


        // String declarations
        public string TitleText
        {
            get => GetValue(TitleTextProperty).ToString();
            set { SetValue(TitleTextProperty, value); }
        }

        // Grid items - I think this is wrong
        public string GridItems
        {
            get => GetValue(GridItemsProperty).ToArray?();
            set { SetValue(GridItemsProperty, value); }
        }
    }

Answer 1

Hello,

Welcome to Microsoft Q&A.

We can create a dependency property similar to GridView.ItemsSource and bind it to AdaptiveGridView.

MyUserControl.xaml.cs

public object ItemsSource
{
    get { return (object)GetValue(ItemsSourceProperty); }
    set { SetValue(ItemsSourceProperty, value); }
}

public static readonly DependencyProperty ItemsSourceProperty =
    DependencyProperty.Register("ItemsSource", typeof(object), typeof(MyUserControl), new PropertyMetadata(null));

MyUserControl.xaml

<controls:AdaptiveGridView
                           ItemsSource="{x:Bind ItemsSource, Mode=OneWay}"
                           />

Usage

var controlTitle = new MyUserControl();
controlTitle.TextTitle = "Prime Numbers";
controlTitle.ItemsSource = new List<string>
{
    "2", "3", "5", "7", "11", "13", "17", "19", "23", "29"
}; // Or ObservableCollection

Thanks.