Posted by: Zeeshan Amjad | July 27, 2011

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.

GridSliderOutput

Advertisements

Responses

  1. Hi,

    do you know if its possible for sliders to have variable valid ranges per row?
    for example, 1-10 for row one and 0-127 for row 2.

    Thanks

  2. Best implementation of wpf extended datagrid can be found here http://wpfextendeddatagrid.codeplex.com

    Project Description

    This is extended version of WPF toolkit DataGrid control.

    This grid has features like

    1:Column Choosers.
    2:AutoFilter Control.
    3:Export To Excel Feature.
    4:Copy Paste To Excel and Copy Paste From Excel 5:To DataGrid.
    6:Three State Sorting.
    7:Displaying Sort Order If Multiple Sort is done

    • Thanks for your link. I will take a look at your extended data grid.

      Regards
      Zeeshan Amjad


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: