Using Slider in DataGrid

I came across a question to how to use Slider in DataGrid. This question is very similar to using any other control in Data Grid. Technique is very simple use DataGridTempalateColumn and define data template inside it.

Suppose here is our class to store information about the tasks.

Code Snippet

    public class Task
    {
        public string Description
        { get; set; }

        public double PercentComplete
        { get; set; }
    }

Then we simply define one DataGridTemplateColumn and define data template there.

Code Snippet

<DataGridTemplateColumn Header="Perecent Complete">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Slider Margin="5" Minimum="0" Maximum="100" Value="{Binding Path=PercentComplete, UpdateSourceTrigger=PropertyChanged}"/>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

 

Here is complete C# code of the program.

Code Snippet

using System.Collections.ObjectModel;
using System.Windows;

namespace WpfDataGridSlider
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private ObservableCollection<Task> tasks = new ObservableCollection<Task>();

        public MainWindow()
        {
            InitializeComponent();

            tasks.Add(new Task() { Description = "Write Sample Code", PercentComplete = 88.0 });
            tasks.Add(new Task() { Description = "Code Shadow", PercentComplete = 65.0 });
            tasks.Add(new Task() { Description = "Write Test Cases", PercentComplete = 95.0 });
            tasks.Add(new Task() { Description = "Refactor Code", PercentComplete = 35.0 });
            tasks.Add(new Task() { Description = "Getting feedback", PercentComplete = 15.0 });

            DataContext = tasks;

        }
    }

    public class Task
    {
        public string Description
        { get; set; }

        public double PercentComplete
        { get; set; }
    }
}

 

Here is complete XAML code of the program.

Code Snippet

<Window x:Class="WpfDataGridSlider.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <DataGrid Margin="5" ItemsSource="{Binding}" AutoGenerateColumns="False"
                  AlternationCount="2" AlternatingRowBackground="LightSkyBlue">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Task Description" Binding="{Binding Description}"/>
                <DataGridTextColumn Header="Percent Complete" Binding="{Binding Mode=TwoWay, Path=PercentComplete}"/>
                <DataGridTemplateColumn Header="Perecent Complete">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Slider Margin="5" Minimum="0" Maximum="100" Value="{Binding Path=PercentComplete, UpdateSourceTrigger=PropertyChanged}"/>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>

        </DataGrid>
    </Grid>
</Window>

This is an output of the program.