Populating Data in WPF Domain Updown (SfDomainUpDown)

18 Feb 20253 minutes to read

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

For example, in the following code, the DomainUpDown populates a list of employees:

public class Employee
{
    public string Name { get; set; }
    public string Email { get; set; }
}

Create a collection attribute:

private List<Employee> employees;
public List<Employee> Employees
{
    get { return employees; }
    set { employees = value; }
}

Populate the collection with items:

Employees = new List<Employee>();
Employees.Add(new Employee{Name = "Lucas", Email = "lucas@syncfusion.com"});
Employees.Add(new Employee { Name = "James", Email = "james@syncfusion.com" });
Employees.Add(new Employee { Name = "Jacob", Email = "jacob@syncfusion.com" });

ItemsSource

Bind the Employees collection to the ItemsSource property of DomainUpDown:

<Page xmlns:editors="clr-namespace:Syncfusion.Windows.Controls.Input;assembly=Syncfusion.SfInput.Wpf">
<Grid>
<editors:SfDomainUpDown x:Name="domainUpDown"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       Width="200"
                      ItemsSource="{Binding Employees}" >           
</editors:SfDomainUpDown>
</Grid>
</Page>

NOTE

When the ContentTemplate property of the DomainUpDown 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.

<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>

Populating-Data_img1