Resolved How can I bind my objects horizontally using itemTemplate?

destro

Active member
Joined
Mar 28, 2020
Messages
36
Programming Experience
1-3
I have an observablecollection of class type as follows:

VIew model:
public ObservableCollection<selectedLevel> selectedLevels { get; set; }
selectedLevels = new ObservableCollection<selectedLevel>();
public class selectedLevel
{
   public string Level
    {
        get;
        set;
    }

   public string PlanetSelected
    {
        get; set;

    }

}

I am binding the Level and Planet selected with the ItemTemplate as follows:

Xaml:
<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Grid>
           <Grid.ColumnDefinitions>
                   <ColumnDefinition SharedSizeGroup="Col1" />
                   <ColumnDefinition SharedSizeGroup="Col2" />
                   <ColumnDefinition SharedSizeGroup="Col3" />
                   <ColumnDefinition SharedSizeGroup="Col4" />
                   <ColumnDefinition SharedSizeGroup="Col5" />
                   <ColumnDefinition SharedSizeGroup="Col6" />
                   <ColumnDefinition SharedSizeGroup="Col7" />
                   <ColumnDefinition SharedSizeGroup="Col8" />
                   <ColumnDefinition SharedSizeGroup="Col9" />
                   <ColumnDefinition SharedSizeGroup="Col10"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                   <RowDefinition SharedSizeGroup="Row1"/>
                   <RowDefinition SharedSizeGroup="Row2"/>
            </Grid.RowDefinitions>
           <Label Grid.Column="0"   Content="{Binding Level}"/>
           <Label Grid.Column="1"   Content="{Binding PlanetSelected}"/>

       </Grid>
    </DataTemplate>
   </ItemsControl.ItemTemplate>

Each objects comes in a new row but I want them to appear in new columns but keep only two rows.

I tried setting Grid.Row = 0 and Grid.Row = 1 for both labels but they still appear in new rows.

How do I represent the objects property in columns instead of rows?
 

Sheepings

Well-known member
Joined
Sep 5, 2018
Messages
1,982
Programming Experience
10+
I tried setting Grid.Row = 0 and Grid.Row = 1 for both labels but they still appear in new rows.

How do I represent the objects property in columns instead of rows?
You already are...

Your current code should put <Label Grid.Column="0" Content="{Binding Level}"/> on line/column 0 in the first cell.
Your current code should put <Label Grid.Column="1" Content="{Binding PlanetSelected}"/> on line/column 0 in the second cell.

Recall columns are left to right. While rows are top to bottom.
If you did what you said above on both labels, then your labels would both be in the first column on different rows.

If it's not doing that, you have something else causing a ruckus in your code which is upsetting your templates order. Why not create a binding property for your labels to set them to appear based on a binding property?
 

destro

Active member
Joined
Mar 28, 2020
Messages
36
Programming Experience
1-3
Yeah it was binding all objects in first colums.. but I think question didn't clear itself.. i wanted them in different columns.. single column for single object .. i did it by changing panel orientation to horizontal.
 

Sheepings

Well-known member
Joined
Sep 5, 2018
Messages
1,982
Programming Experience
10+
but I think question didn't clear itself
The question did clear itself. ;) I know exactly what you meant. You didn't understand the answer I gave you.

If you are setting the column grid on the control <Label Grid.Column="0" - quite simply that control will only sit in one location. And any new object/controls added after it will sit right on top of them too. Also recall my suggestion to bind your labels to which grid column/row they should belong to.

I also want you to read this, as it has other controls which can make what you're doing easier without the need for all of those ColumnDefinitions, so see Panels Overview - WPF .NET Framework Read up on Stack Panels/Wrap Panels/ but specifically Dock Panels. My idea for your design would be to have one column, with one of those panels and set the orientation direction in a panel and it will make your life easier when nesting new controls into the panel as apposed to the grid definitions. Doing this would also negate the need to bind the controls positions at all as that will be handled by the panels.
 
Top Bottom