根据 WPF 大小动态显示对象答案

【问题标题】：Dynamically display objects according to the size WPF根据 WPF 大小动态显示对象
【发布时间】：2013-12-16 09:53:51
【问题描述】：

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

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

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

使用哪种结构来确保第二列的灵活性？ Grid、StackPanel 还是其他？

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

【问题讨论】：

使用 StackPanel 它会帮助你！
尝试使用 Brush.TileMode=Tile 和 ViewportUnits=Absolute 作为背景。
我想过这个，但是我的箭头是对象，它们有一些可以改变的属性！
使用ItemsControl 并将其ItemsSource 绑定到每个元素的ActualHeight 属性，使用Converter 返回N 个箭头，从ActualHeight 值计算N。甚至可能将整个元素传递给转换器，以便您可以在转换器中从中获取其他数据，例如 DataContext。

标签： c# wpf xaml grid stackpanel

【解决方案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，以便在列表中使用时将您的每一项数据转换为其显示形式

<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}"/>

【讨论】：