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>

@Clemens But that will make two Columns in each of the Record. Isn't it ? I want to have just one extra column in addition to all existing Columns. — Areeb Qaisar, Apr 18 '18 at 08:58
Ah, ok. Didn't realize that. In which way does the aligment fail? As there are all Label elements, it should work. — Clemens, Apr 18 '18 at 09:03
@Clemens I am not sure about that. But I feel like that it might not be the proper way to a fixed StackPanel adjacent to ItemSource, that is actually representing those records — Areeb Qaisar, Apr 18 '18 at 09:30
If it feels better, you may put the StackPanel with the additional Labels into a ControlTemplate for the ItemsControl, right before its ItemsPresenter. — Clemens, Apr 18 '18 at 10:16
@Clemens Amm okay. Can you please guide, how this can be done ? — Areeb Qaisar, Apr 18 '18 at 11:16
You could try using a HeaderedItemsControl - something like this https://stackoverflow.com/questions/3529132/itemscontrol-with-static-header?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa — Shivani Katukota, Apr 18 '18 at 11:16

score 1 · Accepted Answer · answered Apr 18 '18 at 11:42

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

Thanks :-) Exactly the thing I was looking for. – Areeb Qaisar May 03 '18 at 11:32 — Areeb Qaisar, May 03 '18 at 11:32

Adding Labels other then ItemsControl Binding

1 Answers1