Adding Labels other then ItemsControl Binding

Question

I have a Model named Channel, consisting of some properties such as ChannelString, IsSet etc, and then there is an ObservableCollection of Channel.

ViewModel:

Channels = new ObservableCollection<Channel>();
PopulateChannels(Channels)

View:

<ItemsControl ItemsSource="{Binding Path=Channels}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <Label Content="{Binding Path=ChannelString}" />
                <Label Content="{Binding Path=IsSet}" />
                <Label Content="{Binding Path=AlternationMinute}" />
                <ComboBox ItemsSource="{Binding Path=DataContext.ProfileQuantities, RelativeSource={RelativeSource AncestorType=UserControl}}"
                          SelectedItem="{Binding Path=Profile1Id}">
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Converter={StaticResource Converter}}" />
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

So far, it is working perfectly, and this is how it looks like : Profile View

Now I need to add some Labels, indicating the description of these Quantities, such as that 30 represents Minutes, and False represents that it is Set or Not etc. These labels will be in another Column, adjacent to these Horizontal StackPanels, that needs to aligned to existing components.

If I do it as shown below then, these will not be aligned with the items in the ItemsControl. So what is the best way to accomplish this ?

<StackPanel Orientation="Vertical">
    <Label>Item Description 1</Label>
    <Label>Item Description 2</Label>
    <Label>Item Description 3</Label>
</StackPanel>
<ItemsControl ItemsSource="{Binding Path=Channels}">
</ItemsControl>

Answer 1

You can achieve this using Grid and SharedSize:

<StackPanel Grid.IsSharedSizeScope="True" Orientation="Horizontal">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition SharedSizeGroup="FirstRow" />
            <RowDefinition SharedSizeGroup="SecondRow" />
            <RowDefinition SharedSizeGroup="ThirdRow" />
        </Grid.RowDefinitions>

        <Label Grid.Row="0">Item Description 1</Label>
        <Label Grid.Row="1">Item Description 2</Label>
        <Label Grid.Row="2">Item Description 3</Label>
    </Grid>

    <ItemsControl ItemsSource="{Binding Path=Channels}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition SharedSizeGroup="FirstRow" />
                        <RowDefinition SharedSizeGroup="SecondRow" />
                        <RowDefinition SharedSizeGroup="ThirdRow" />
                        <RowDefinition />
                    </Grid.RowDefinitions>

                    <Label Content="{Binding Path=ChannelString}" />
                    <Label Grid.Row="1" Content="{Binding Path=IsSet}" />
                    <Label Grid.Row="2" Content="{Binding Path=AlternationMinute}" />
                    <ComboBox Grid.Row="3" ItemsSource="{Binding Path=DataContext.ProfileQuantities, RelativeSource={RelativeSource AncestorType=UserControl}}"
                SelectedItem="{Binding Path=Profile1Id}">
                        ...
                    </ComboBox>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</StackPanel>

Don't forget to se the IsSharedSizeScope property to true and SharedSizeGroup on the rows you want to share the height with.

Share Sizing Properties Between Grids