根据WPF大小动态显示对象

Question

我必须显示对象的ListView。这些对象被构造为具有两列的网格。第一列包含Element的视图，第二列包含一组箭头（以垂直方式）。

我创建了一个控件“箭头”以在第二列中显示它，如下图所示：

我的问题是：如何根据放在第一列中的对象的高度，动态地在第二列中放置正确数量的箭头。

使用哪种结构来确保第二列灵活？ Grid，StackPanel还是别的什么？

请注意箭头的大小是固定的。

Answer 1

您真正需要做的就是根据您需要填充的空间生成一个列表，每个箭头一个项目。让我们从转换器开始

public void MakeArrowListConverter : IValueConverter
{
  public double ArrowHeight {get;set;}

  public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  {
     var verticalSpace = (double) value;
     int numberOfArrows = (int)(verticalSpace/ArrowHeight);
     return Enumerable.Range(0, numberOfArrows);
  }
}

这需要转换我们拥有高度的东西，在这种情况下，我只是使用ContentPresenter并将其绑定到您的视图。

<ContentPresenter x:Name="content" Content="{Binding}"/>

那么我们只需要取高度并将其转换为列表

<xxx.Resources>
  <convertors:MakeArrowListConverter x:Key="makeArrowListConverter" /> 
</xxx.Resources>

<ListBox ItemsSource="{Binding ElementName=content, Path=ActualHeight, Converter={StaticResource makeArrowListConverter}}">
  <ItemTemplate>
    <DataTemplate>
      <!-- Image or Shape, this is your red arrow-->
      <YourArrow/>
    </DataTemplate>
  </ItemTemplate>
</ListBox>

实际上，我们可以将这两个元素放到另一个元素中，以便将数据中的每个项目转换为其在列表中使用时显示的形式

<DataTemplate DataType="{x:Type MyView}">
  <!--This is your blue box-->
  <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
    <ContentPresenter x:Name="content" Content="{Binding}"/>
    <ListBox ItemsSource="{Binding ElementName=content, Path=ActualHeight, Converter={StaticResource makeArrowListConverter}}">
      <ItemTemplate>
        <DataTemplate>
          <!-- Image or Shape, this is your red arrow-->
          <YourArrow/>
        </DataTemplate>
      </ItemTemplate>
    </ListBox>
  </StackPanel>
</DataTemplate>

<!-- And this is your orange box-->
<ListBox ItemsSource="{Binding YourListOfViews}"/>