如何显示交替对齐的行？

Question

我想用这张图片实现类似的效果：

交替对齐的行 - 行索引为偶数时左对齐，行索引不偶时右对齐。

我尝试使用ListBox 的ListBox，与ObservableCollection<ObservableCollection<Circle>> 绑定。我应该绑定第二个ListBox 的Margin 属性以实现交替对齐吗？

<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>

Answer 1

关于您的要求，我从您提供的示例中假设：

• 有多行。
• 每一行都有相同数量的项目（圆圈，这里是 5 个）。
• 所有项目（圆圈）的大小相同。

这样，您可以通过几个步骤通过内置功能实现所需的行为。

• 更改内部ListBox 中的ItemsPanel 以水平（作为一行）显示项目（圆圈）
• 将2 的AlternationCount 设置为外部ListBox，因此有两个交替索引。
• 为 out ListBox 创建一个项目容器样式，它为 0 和 0 设置左侧圆形项目宽度一半的 Padding（或 Margin）否则在右边相同。您可以创建现有AlternationConverter 的实例来定义Paddings。

在这个例子中，填充是固定大小的（对我来说，圆圈的大小是50，所以填充是25）。您还可以创建一个自定义值转换器以使其更加动态，绑定真正的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>

---

补充问题：如何去掉选中行的高亮？

在这个简单的例子中，您可以使用ItemsControl 作为外部控件而不是ListBox。它没有选择。但是，您必须设置ContentPresenter 的样式并使用Margin。

<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>