Populating Data in UWP Domain UpDown (SfDomainUpDown)

10 May 20215 minutes to read

The DomainUpDown control can be populated with a predefined list of items.

For example, in the following code, the SfDomainUpDown will populate a list of employees:

C#

public class Employee

    {

        public string Name { get; set; }



        public string Email { get; set; }

    }

VB.NET

Public Class Employee


		Public Property Name() As String



		Public Property Email() As String

End Class

Create a collection attribute:

C#

private List<Employee> employees;



     public List<Employee> Employees

     {

         get { return employees; }

         set { employees = value; }

     }

VB.NET

Private employees_Renamed As List(Of Employee)

Public Property Employees() As List(Of Employee)


		 Get
			 Return employees_Renamed
		 End Get

		 Set(ByVal value As List(Of Employee))
			 employees_Renamed = value
		 End Set

End Property

Populate the collection with items:

C#

Employees = new List<Employee>();

Employees.Add(new Employee{Name = "Lucas", Email = "[e-mail]"});

Employees.Add(new Employee { Name = "James", Email = "[e-mail]" });

Employees.Add(new Employee { Name = "Jacob", Email = "[e-mail]" });

VB.NET

Employees = New List(Of Employee)()

Employees.Add(New Employee With {
	.Name = "Lucas",
	.Email = "[e-mail]"
})

Employees.Add(New Employee With {
	.Name = "James",
	.Email = "[e-mail]"
})

Employees.Add(New Employee With {
	.Name = "Jacob",
	.Email = "[e-mail]"
})

ItemsSource

Bind the Employees collection to the ItemsSource property of DomainUpDown:

XAML

<Page xmlns:editors="using:Syncfusion.UI.Xaml.Controls.Input">

            <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

                <editors:SfDomainUpDown x:Name="domainUpDown"

                               HorizontalAlignment="Center"

                               VerticalAlignment="Center"

                               Width="200"

ItemsSource="{Binding Employees}" >

                </editors:SfDomainUpDown>

            </Grid>

   </Page>

NOTE

If the ContentTemplate property of the SfDomainUpDown control is not set, Items will be displayed as business objects in the control.

ContentTemplate

ContentTemplate helps the user decorate the content with visual elements. At this point, the control is populated with list of employees, and the Employee model contains two properties: Name and Email. In this example, the control is set to display content based on Name.

XAML

<editors:SfDomainUpDown x:Name="domainUpDown"

                               HorizontalAlignment="Center"

                               VerticalAlignment="Center"

                               Width="200"

                              ItemsSource="{Binding Employees}">

<editors:SfDomainUpDown.ContentTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Horizontal">

                        <Image Height="24" Width="24" Source="Image.png"/>

                        <TextBlock Text="{Binding Name}"/>

                    </StackPanel>

                </DataTemplate>

            </editors:SfDomainUpDown.ContentTemplate>

</editors:SfDomainUpDown>