Question

In my View, which is a UserControl I have a ListView which has a number of GridViewColumns, and i was wondering if it is possible to bind the first GridViewColumns to the ImageTypes Get/Set Property in my ViewModel and the other two columns to another WorkflowData GetSet property in the ViewModel?

The reason for this is my first column will come from a list of images, and the other columns come from data stored in my database.

At the moment I cannot seem to find the correct bindings to get the Icons to appear in a list with the other data coming from the Model (via ViewModel). Do i need to set the “RelativeSource” in the binding for the Image?

From my example you will see i am simple trying to show one image for now by passing the uri as a string.

Any help will be appreciated.
Thanks

XAML View snippet

<UserControl x:Class="Project.View.WorkflowStatus"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mvvmtk="clr-namespace:MVVMToolkit"
    Height="Auto"        
    xmlns:local="clr-namespace:Project.ViewModel">   
<UserControl.DataContext>
    <local:WorkflowStatusViewModel />
</UserControl.DataContext>
<ListView Grid.Column="0" Grid.Row="1" 
    ItemsSource="{Binding Path=WorkflowData.WFTasks, Mode=TwoWay}"
            SelectedValue="{Binding Workflow.WFTask}"
            HorizontalContentAlignment="Stretch">
    <ListView.View>
        <GridView>
                <GridViewColumn Header="" >
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <Image Source="{Binding ImageTypes, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type local:WorkflowStatusViewModel}}}"
                                        Stretch="None"></Image>
                            </Grid>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
                <GridViewColumn Header="Field1"
                                Width="50"
                                DisplayMemberBinding="{Binding Path=Field1Value1}"></GridViewColumn>
                <GridViewColumn Header="Field2"
                                Width="50"
                                DisplayMemberBinding="{Binding Path=Field1Value2}"></GridViewColumn>
        </GridView>
    </ListView.View>            
</ListView>
</UserControl>

View Model Snippet

/// <summary>
// This is the main class which links the Model and View together.
/// </summary>
public class WorkflowStatusViewModel
{


    /// <summary>
    // Create a public instance of the workflow Model
    /// </summary>
    public WorkflowModel WorkflowData { get; set; }


    /// <summary>
    /// Class Constructor
    /// </summary>
    public WorkflowStatusViewModel()
    {
        InitialiseData();
    }


    ///MatterManagerView;component/Assets/Task.png
    private string _ImageTypes;
    public string ImageTypes
    {
        get { return "Project;component/Assets/Task.png"; }
        set { _ImageTypes = value; }
    }

    /// <summary>
    // Private function that create all the neccessary objects
    /// </summary>
    private void InitialiseData()
    {

        try
        {
            // Create a new instance of the Workflow Model
            WorkflowData = new WorkflowModel();

        }

        // Write Errors captured to Aderant Logging object
        catch (Exception ex)
        {


        }

    }

EDIT: Based on Marcel’s suggestion i tried to Map the Image using RelativeSource

Answer 1

Yes, it can be done via RelativeSource

The listview datacontext points to WorkflowData.WFTasks, but I expect the viewmodel itselfs bound to the page on which the listview is placed.
Otherwise you should change the AncestorType

After making a test project, the binding for you image column is:

Source="{Binding Path=DataContext.ImageTypes, 
         RelativeSource={RelativeSource FindAncestor, 
         AncestorType={x:Type UserControl}}}"