How can I display rows with alternating aligning?

Question

I want to achieve something similar with this image:

Alternating rows.

Rows with alternating alignment - aligned to the left when the row's index is even, aligned to the right when the row's index is uneven.

I tried to use ListBox of ListBox, binding with ObservableCollection<ObservableCollection<Circle>>. Should I bind the Margin property of the second ListBox in order to achieve the alternating alignment?

<ListBox
  Name="OuterListBox"
  HorizontalAlignment="Center"
  VerticalAlignment="Center"
  Background="White"
  BorderThickness="0"
  ItemsSource="{Binding Board}">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <Grid>
        <ListBox
          Name="InnerListBox"
          HorizontalAlignment="{Binding HorizontalAlignment}"
          Background="Transparent"
          BorderThickness="0"
          ItemContainerStyle="{StaticResource ChangeListViewItemHighlight}"
          ItemsSource="{Binding}"
          PreviewKeyDown="InnerListBox_PreviewKeyDown">
          <ListBox.ItemTemplate>
            <DataTemplate>
                <Ellipse
                  Width="{Binding Size}"
                  Height="{Binding Size}"
                  Cursor="Hand"
                  Fill="{Binding Background}" />
            </DataTemplate>
          </ListBox.ItemTemplate>
        </ListBox>
      </Grid>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

It might be easier to accomplish this by the way you format the objects in the ListBox.Items. Perhaps inserting something that is 1/2 width at the beginning of alternating rows? — Terry Tyson, Apr 21 '21 at 20:49
Does this answer your question? [How to use AlternationIndex in ItemsControls?](https://stackoverflow.com/questions/3567778/how-to-use-alternationindex-in-itemscontrols) — aepot, Apr 21 '21 at 21:33
@james.lee yes, also the number of columns is a fixed number — Rodica-Mihaela, Apr 22 '21 at 12:56

thatguy · Accepted Answer · 2021-04-22T13:52:18.297

Regarding your requirements, I assume from the example you provided that:

There are multiple rows.
Each row has the same number of items (circles, here 5).
All items (circles) have the same size.

This way, you can achieve the desired behavior with built-in functionality in a few steps.

Change the ItemsPanel in the inner ListBox to display the items (circles) horizontally (as a row)
Set an AlternationCount of 2 to the outer ListBox, so there are two alternation indices.
Create an item container style for the out ListBox, which sets a Padding (or Margin if you want) of half the width of your circle items on the left for AlternationIndex 0 and the same on the right otherwise. You can create an instance of the already existing AlternationConverter to define the Paddings.

In this example, the paddings are fixed size (for me circle have a size of 50, so the padding is 25). You could also create a custom value converter to make this more dynamic, binding the real Size.

<ListBox
   Name="OuterListBox"
   AlternationCount="2"
   HorizontalAlignment="Center"
   VerticalAlignment="Center"
   Background="White"
   BorderThickness="0"
   ItemsSource="{Binding Board}">
   <ListBox.ItemContainerStyle>
      <Style TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource {x:Type ListBoxItem}}">
         <Style.Resources>
            <AlternationConverter x:Key="AlternationPaddingConverter">
               <Thickness Right="25"/>
               <Thickness Left="25"/>
            </AlternationConverter>
         </Style.Resources>
         <Setter Property="Padding" Value="{Binding (ItemsControl.AlternationIndex), RelativeSource={RelativeSource Self}, Converter={StaticResource AlternationPaddingConverter}}"/>
      </Style>
   </ListBox.ItemContainerStyle>
   <ListBox.ItemTemplate>
      <DataTemplate>
         <Grid>
            <ListBox
               Name="InnerListBox"
               Background="Transparent"
               BorderThickness="0"
               ItemContainerStyle="{StaticResource ChangeListViewItemHighlight}"
               ItemsSource="{Binding}"
               PreviewKeyDown="InnerListBox_PreviewKeyDown">
               <ListBox.ItemsPanel>
                  <ItemsPanelTemplate>
                     <VirtualizingStackPanel Orientation="Horizontal"/>
                  </ItemsPanelTemplate>
               </ListBox.ItemsPanel>
               <ListBox.ItemTemplate>
                  <DataTemplate>
                     <Ellipse
                        Width="{Binding Size}"
                        Height="{Binding Size}"
                        Cursor="Hand"
                        Fill="{Binding Background}" />
                  </DataTemplate>
               </ListBox.ItemTemplate>
            </ListBox>
         </Grid>
      </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

Additional question: how can I remove the highlight of the selected line?

In this simple case, you could use an ItemsControl as outer control instead of a ListBox. It has no selection. However, you have to style the ContentPresenter and use Margin then.

<ItemsControl
   Name="OuterListBox"
   AlternationCount="2"
   HorizontalAlignment="Center"
   VerticalAlignment="Center"
   Background="White"
   BorderThickness="0"
   ItemsSource="{Binding Board}">
   <ItemsControl.ItemContainerStyle>
      <Style TargetType="{x:Type ContentPresenter}">
         <Style.Resources>
            <AlternationConverter x:Key="AlternationPaddingConverter">
               <Thickness Right="25"/>
               <Thickness Left="25"/>
            </AlternationConverter>
         </Style.Resources>
         <Setter Property="Margin" Value="{Binding (ItemsControl.AlternationIndex), RelativeSource={RelativeSource Self}, Converter={StaticResource AlternationPaddingConverter}}"/>
      </Style>
   </ItemsControl.ItemContainerStyle>
   <ItemsControl.ItemTemplate>
      <DataTemplate>
         <Grid>
            <ListBox
               Name="InnerListBox"
               Background="Transparent"
               BorderThickness="0"
               ItemContainerStyle="{StaticResource ChangeListViewItemHighlight}"
               ItemsSource="{Binding}"
               PreviewKeyDown="InnerListBox_PreviewKeyDown">
               <ListBox.ItemsPanel>
                  <ItemsPanelTemplate>
                     <VirtualizingStackPanel Orientation="Horizontal"/>
                  </ItemsPanelTemplate>
               </ListBox.ItemsPanel>
               <ListBox.ItemTemplate>
                  <DataTemplate>
                     <Ellipse
                        Width="{Binding Size}"
                        Height="{Binding Size}"
                        Cursor="Hand"
                        Fill="{Binding Background}" />
                  </DataTemplate>
               </ListBox.ItemTemplate>
            </ListBox>
         </Grid>
      </DataTemplate>
   </ItemsControl.ItemTemplate>
</ItemsControl>

Additional question: how can I remove the highlight of the selected line? — Rodica-Mihaela, Apr 22 '21 at 13:31

How can I display rows with alternating aligning?

1 Answers1

Linked