WPF: listview with checkbox and textbox in the same column

checkbox, listview, textbox, wpf

Solution

Template selectors allow you at runtime to select between different data templates to use in items controls like list view.

XAML:

<Window x:Class="ListViewTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ListViewTest"
    Height="300" Width="300">

    <Window.Resources>
        <DataTemplate x:Key="textBoxTemplate">
            <TextBox Text="{Binding Path=Value}" Width="100"></TextBox>
        </DataTemplate>

        <DataTemplate x:Key="checkBoxTemplate">
            <CheckBox IsChecked="{Binding Path=Value}" IsThreeState="False"></CheckBox>
        </DataTemplate>

        <local:SettingsTemplateSelector 
            x:Key="settingsTemplateSelector" 
            TextBoxTemplate="{StaticResource textBoxTemplate}" 
            CheckBoxTemplate="{StaticResource checkBoxTemplate}" />

    </Window.Resources>

    <ListView ItemsSource="{Binding Path=Settings}">
        <ListView.View>
            <GridView>
                <GridView.Columns>
                    <GridViewColumn 
                        Header="Name" 
                        DisplayMemberBinding="{Binding Path=Name}" />                          
                    <GridViewColumn 
                        Header="Setting" 
                        CellTemplateSelector="{StaticResource settingsTemplateSelector}" />
                </GridView.Columns>
            </GridView>
        </ListView.View>
    </ListView>

</Window>

Code behind:

using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;

namespace ListViewTest
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();

            Settings = new List<Setting>();
            Settings.Add(new Setting("On/Off", true));
            Settings.Add(new Setting("Elevation", "100"));

            DataContext = this;
        }

        public List<Setting> Settings { get; private set; }
    }

    public class Setting
    {
        public Setting(string name, string value)
        {
            Name = name;
            Value = value;
            IsCheckBox = false;
        }

        public Setting(string name, bool value)
        {
            Name = name;
            Value = value;
            IsCheckBox = true;
        }

        public string Name { get; private set; }
        public object Value { get; set; }
        public bool IsCheckBox { get; private set; }
    }

    public class SettingsTemplateSelector : DataTemplateSelector
    {
        public DataTemplate CheckBoxTemplate { get; set;}
        public DataTemplate TextBoxTemplate { get; set;}

        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            Setting setting = item as Setting;
            if (setting.IsCheckBox)
            {
                return CheckBoxTemplate;
            }
            return TextBoxTemplate;
        }
    }
}

Problem

I'd like to accomplish the following listview, which uses different controls in the same column. It has two columns: Name and Setting. The first row's entry in the Name column is "On/Off" and the Setting is a checkbox. The second row's Name is "Elevation" and its setting is a textbox. I want to be able to populate the listview programmatically. Thanks!

Original source