CODEWITHSUNDEEP
wpfxamllistviewgridview
Berchmans
Berchmans

Reputation: 323

WPF Editable Listview with an editable ComboBox

I'm trying to create a ListView with editable cells, say when I double click on a cell it turns into an editable ComboBox, I can then type something or select from the comboItems. Before I double click on a cell to edit I wouldn't wish to see the comboBox Arrow (A cell shouldnt present itself as a combobox before I am on edit mode, but as Label/TextBlock).

What I have done so far is this :

<GridViewColumn.CellTemplate>
    <DataTemplate>
            <ComboBox IsEditable="True" SelectedIndex="0" >
                <ComboBoxItem>One</ComboBoxItem>
                <ComboBoxItem>Two</ComboBoxItem>
                <ComboBoxItem>Three</ComboBoxItem>
            </ComboBox>
    </DataTemplate>
</GridViewColumn.CellTemplate>

But I can still see the ComboBox Arrow before getting in edit mode (I simply dont know how to hide the Arrow) also there is a difference in color between the ListView's selected row and the ComboBox, see:

enter image description here

Would you please help with sample codes, pointers or ideas. Thanks in advance.

PS: Am a beginner in WPF

Upvotes: 0

Views: 1513

Answers (2)

AnjumSKhan
AnjumSKhan

Reputation: 9827

Use two different templates one normal and other for editing. And show/hide either.

You can build upon this approach further.

        <ListView.Resources>
            <DataTemplate x:Key="Tmpl1">
                <TextBlock Text="{Binding Name}" GotFocus="TextBlock_GotFocus" MouseDown="TextBlock_MouseDown_1"/>
            </DataTemplate>
            <DataTemplate x:Key="Tmpl2">
                <ComboBox LostFocus="ComboBox_LostFocus_1"/>
            </DataTemplate>
        </ListView.Resources>
        <ListView.View>
            <GridView>
                <GridViewColumn Header="Name" CellTemplate="{StaticResource Tmpl1}"/>
            </GridView>
        </ListView.View>

Code : 

private void TextBlock_MouseDown_1(object sender, MouseButtonEventArgs e)
{
    ((GridView)ListView1.View).Columns[0].CellTemplate = (DataTemplate)ListView1.FindResource("Tmpl2");
}

private void ComboBox_LostFocus_1(object sender, RoutedEventArgs e)
{
    ((GridView)ListView1.View).Columns[0].CellTemplate = (DataTemplate)ListView1.FindResource("Tmpl1");
}

Upvotes: 1

icebat
icebat

Reputation: 4774

You can use DataGrid (not ListView-GridView) with DataGridTemplateColumn and specify different templates for display and edit modes (using your static example):

<DataGridTemplateColumn>
    <!-- display mode template -->
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="One" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>

    <!-- edit mode template -->
    <DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate>
            <ComboBox IsEditable="True" SelectedIndex="0" >
                <ComboBoxItem>One</ComboBoxItem>
                <ComboBoxItem>Two</ComboBoxItem>
                <ComboBoxItem>Three</ComboBoxItem>
            </ComboBox>
        </DataTemplate>
    </DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>

In reality, you'd want to bind your data so your ComboBox actually selects something and TextBox displays that selection:

 <DataGridTemplateColumn>
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding SelectedNumber}" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
    <DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate>
            <ComboBox IsEditable="True" SelectedIndex="0" 
                      ItemsSource="{Binding Numbers}" SelectedItem="{Binding SelectedNumber}" />
        </DataTemplate>
    </DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>

Upvotes: 2

Related Questions