Question

I’ve got a Collection which I represent in a ListView and it is Grouped by OrderID with an Expander.

In the Expander Header I show the OrderID, as well as an Invoice TextBox.
In the actual ListView.View I show the CustomerName, OrderID and an Invoice TextBox.
So each Row of data has it’s own Invoice TextBox and each Grouping header had an Invoice TextBox.

When I enter a value into the Group Header Invoice TextBox this automatically updates it’s members Invoice TextBoxes. But the individual rows do not update the Grouping Invoice TextBox.

As can be seen from the image (this describes it a lot better)

Now when the user clicks on the “Process Selected Items” button I’d like to be able to have the Collection update with the InvoiceID’s from the TextBoxes. So somehow I need to link the grouped rows to the Collection as well as to the GroupHeader row.
Is this possible?

Here is the code:
WPF

<UserControl x:Class="TestGrouping.MainWindowView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     Height="350" Width="525"
     xmlns:cal="http://www.caliburnproject.org">

<UserControl.Resources>
    <CollectionViewSource x:Key='src' Source="{Binding NewOrders}">
        <CollectionViewSource.GroupDescriptions>
            <PropertyGroupDescription PropertyName="OrderID" />
        </CollectionViewSource.GroupDescriptions>
    </CollectionViewSource>
    <CollectionViewSource x:Key="OrderGroup" Source="{Binding Path=NewOrders}" />

    <Style x:Key="CustomListViewItemStyle" TargetType="{x:Type ListViewItem}">
        <Style.Triggers>
            <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                <Setter Property="Background" Value="#f6f2f2"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" ShowGridLines="False" >


    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />

    </Grid.RowDefinitions>
    <Button Grid.Column="0" Grid.Row="0" x:Name="ProcessItems" Content="Process Selected Items" HorizontalAlignment="Left" MinWidth="80" cal:Message.Attach="ProcessItems($datacontext)"/>

    <ListView ItemsSource="{Binding Source={StaticResource src}}" BorderThickness="1" Grid.Column="0" Grid.Row="1" Height="580">
        <ListView.GroupStyle>
            <GroupStyle>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}">
                        <Setter Property="Margin" Value="0,0,0,5"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type GroupItem}">
                                    <Expander IsExpanded="{Binding Mode=TwoWay, Path=IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}}" BorderBrush="#FFA4B97F" BorderThickness="1,1,1,1" >
                                        <Expander.Header>
                                            <DockPanel>
                                                <TextBlock FontWeight="Bold" Text="OrderID : "  Margin="5,0,0,0" />
                                                <TextBlock FontWeight="Bold" Text="{Binding Path=Name}"  Margin="5,0,0,0" Width="100"/>
                                                <TextBlock FontWeight="Bold" Text="Count : "  Margin="5,0,0,0" />
                                                <TextBlock FontWeight="Bold"  Text="{Binding Path=ItemCount}" Margin="5,0,0,0" Width="100"/>
                                                <TextBlock FontWeight="Bold"  Text="InvoiceID : " Margin="5,0,0,0" />
                                                <TextBox x:Name="GroupInvoiceID" Margin="5,0,0,0" Width="100" BorderThickness="1" BorderBrush="#FFA4C5E8" />
                                            </DockPanel>
                                        </Expander.Header>
                                        <Expander.Content>
                                            <ItemsPresenter />
                                        </Expander.Content>
                                    </Expander>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GroupStyle.ContainerStyle>
            </GroupStyle>
        </ListView.GroupStyle>

        <ListView.View>
            <GridView AllowsColumnReorder="False" x:Name="GridView1">
                <GridViewColumn Header="Customer Name" DisplayMemberBinding="{Binding Path=Customer}" ></GridViewColumn>
                <GridViewColumn Header="Order ID" DisplayMemberBinding="{Binding Path=OrderID}" ></GridViewColumn>
                <GridViewColumn Header="Invoice ID">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <TextBox x:Name="InvoiceID" HorizontalAlignment="Stretch" Width="100" Text="{Binding ElementName=GroupInvoiceID, Path=Text, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" BorderThickness="1" BorderBrush="#FFA4C5E8" />
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>

            </GridView>
        </ListView.View>

    </ListView>


</Grid>

And here is the code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Caliburn.Micro;
using System.Collections.ObjectModel;
using System.Windows;

namespace TestGrouping
{
public class MainWindowViewModel : Conductor<object>
{

    public MainWindowViewModel() {

        List<OrderViewModel> all = new List<OrderViewModel>();
        OrderViewModel ovm = new OrderViewModel();
        ovm.ID = 1;
        ovm.Customer = "cust1";
        ovm.OrderID = "0001";
        all.Add(ovm);
        ovm = new OrderViewModel();
        ovm.ID = 2;
        ovm.Customer = "cust2";
        ovm.OrderID = "0001";
        all.Add(ovm);
        ovm = new OrderViewModel();
        ovm.ID = 3;
        ovm.Customer = "cust3";
        ovm.OrderID = "0002";
        all.Add(ovm);
        ovm = new OrderViewModel();
        ovm.ID = 4;
        ovm.Customer = "cust3";
        ovm.OrderID = "0003";
        all.Add(ovm);

        this.NewOrders = new ObservableCollection<OrderViewModel>(all);
        this.NotifyOfPropertyChange(() => this.NewOrders);
    }

    public ObservableCollection<OrderViewModel> NewOrders { get; private set; }

    public void ProcessItems(object obj)
    {

    }

}


public class OrderViewModel 
{
    public OrderViewModel()
    {

    }

    int _ID;
    public int ID
    {
        get { return _ID; }
        set
        {
            if (value == _ID)
                return;

            _ID = value;

        }
    }

    string _Customer;
    public string Customer
    {
        get { return _Customer; }
        set
        {
            if (value == _Customer)
                return;

            _Customer = value;

        }
    }


    string _OrderID;
    public string OrderID
    {
        get { return _OrderID; }
        set
        {
            if (value == _OrderID)
                return;

            _OrderID = value;
        }
    }

    string _InvoiceNumber;
    public string InvoiceNumber
    {
        get { return _InvoiceNumber; }
        set
        {
            if (value == _InvoiceNumber)
                return;

            _InvoiceNumber = value;
        }
    }

}

}

I know this is quite long but I’ve tried to provide as much information as possible.
Any help would be great, or any pointers in the right direction.
And shout if there is any information I have missed out.

Answer 1

I have managed to figure this out – may not be the most elegant, but I think it works.

I added a Change event to the item TextBox which will update the collection.
So my Listview.View is now as follows:

<ListView.View>
            <GridView AllowsColumnReorder="False" x:Name="GridView1">
                <GridViewColumn Header="Customer Name" DisplayMemberBinding="{Binding Path=Customer}" ></GridViewColumn>
                <GridViewColumn Header="Order ID" DisplayMemberBinding="{Binding Path=OrderID}" ></GridViewColumn>
                <GridViewColumn Header="Invoice ID">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <TextBox x:Name="InvoiceID" HorizontalAlignment="Stretch" Width="100" Text="{Binding ElementName=GroupInvoiceID, Path=Text, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" BorderThickness="1" BorderBrush="#FFA4C5E8" 
                                     cal:Message.Attach="[Event TextChanged]=[Action InvoiceID_TextChanged($datacontext, $eventArgs)]" />
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>

            </GridView>
        </ListView.View>

And I added the following code to the ModelView

public void InvoiceID_TextChanged(object obj, RoutedEventArgs e)
    {
        OrderViewModel ovm = obj as OrderViewModel;
        string invoiceIDText = (e.OriginalSource as TextBox).Text;
        foreach (OrderViewModel o in NewOrders)
        {
            if (o.ID == ovm.ID)
            {
                o.InvoiceNumber = invoiceIDText;
            }
        }
    }

This updates the collection “NewOrders” with the correct InvoiceNumber. Once the “Process Items” button is clicked the collection has been updated and can now be persisted to the database.

I hope this helps someone.