C# Tip Article

Problem

How to add NumericUpDown control in WPF DataGrid?

How to use

One way of adding NumericUpDown feature in WPF DataGrid is to use Extended WPF Toolkit. Extended WPF Toolkit provides various WPF extended controls, which can be found in github or nuget.

• Install Extended.Wpf.Toolkit NuGet package from VS Package Manager Console.

  PM> Install-Package Extended.Wpf.Toolkit -Version 3.3.0
  

• In your XAML, add namespace for the WPF Toolkit assembly.

  		
  <Window x:Class="MyApp.MainWindow"
          xmlns:wpfToolkit="clr-namespace:Xceed.Wpf.Toolkit;assembly=Xceed.Wpf.Toolkit"		
  

• In your XAML, add wpfToolkit:IntegerUpDown in DataGridTemplateColumn.CellTemplate of a DataGrid.

  <DataGrid x:Name="dg">
  	<DataGrid.Columns>
  		<DataGridTextColumn Header="Id" Binding="{Binding Path=Id}"/>
  		
  		<DataGridTemplateColumn Header="Age">
  			<DataGridTemplateColumn.CellTemplate>
  				<DataTemplate>
  					<wpfToolkit:IntegerUpDown Value="{Binding Path=Age, UpdateSourceTrigger=PropertyChanged}" />
  				</DataTemplate>
  			</DataGridTemplateColumn.CellTemplate>
  		</DataGridTemplateColumn>
  		
  	</DataGrid.Columns>
  </DataGrid>