绑定到网格的特定行和列

Question

I have a ContainerViewModel which inherits Conductor<T>.Collection.AllActive and a PanelViewModel which inherits Screen and whose lifetime is controlled by ContainerViewModel

My ContainerView uses a templated ItemsControl to render a my Collection<T> managed by the conductor. This view currently uses a UniformGrid control and the items are displayed in the order for which they are added to the Conductor<T>.Collection ( Items are removed and added at run-time via an event which provides a Position ).

I would like to switch to use a Grid with a predefined number of Columns and Rows as below:

+------------------------------------------------------+
|      1     |      2      |      3      |      4      |
|     0,0    |     0,1     |     0,2     |     0,3     |
+------------------------------------------------------+
|      5     |      6      |      7      |      8      |
|     1,0    |     1,1     |     1,2     |     1,3     |
+------------------------------------------------------+

The single number represents a Position and the Points \\ Coordinates underneath the Row Index and Column Index .

I know I could do something like the following:

<ItemsControl ItemsSource="{Binding Items}">
    <!-- ItemsPanelTemplate -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- ItemContainerStyle -->
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Grid.Column"
                    Value="{Binding ColumnIndex}" />
            <Setter Property="Grid.Row"
                    Value="{Binding RowIndex}" />
        </Style>
    </ItemsControl.ItemContainerStyle>

    <!-- ItemTemplate -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ContentControl Content="{Binding}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

My issue with the above is that the PanelViewModel to be displayed as the Content needs a concept of the ColumnIndex and RowIndex properties for this to hook into. I'm not entirely happy with this as I see it being the responsibility of ContainerViewModel to manage the positioning.

Is there a way I can achieve this where only the ContainerViewModel is aware of the Position concept?

Answer 1

Pass ContainerViewModel to the PanelViewModel as a parent field and get PanelViewModel to pass the call back to parent when calling the getters of ColumnIndex and RowIndex properties by passing itself as the parameter to that call ie parent.GetColumnIndex(this) and parent.GetRowIndex(this)

While this means PanelViewModel now knows about ContainerViewModel , it achieves what you were looking for where the ColumnIndex and RowIndex , while properties of the PanelViewModel are implemented in ContainerViewModel .

You could go further and abstract the method calls out to an interface so that the parent field is of the interface type rather than of type ContainerViewModel - it depends on how likely it is that PanelViewModel will be contained by other types.