크기에 따라 개체를 동적으로 표시 WPF

Question

개체의 ListView를 표시해야합니다. 이러한 개체는 두 개의 열이있는 Grid로 구성됩니다. 첫 번째 열은 요소보기를 포함하고 두 번째 열은 화살표 모음을 포함합니다 (세로 방향). I는 다음과 같은 이미지 번째 컬럼에 표시하는 제어 "화살표"를 생성

는 :

내 문제는 어떻게 I 번째 열의 동적 화살표 오른쪽 숫자를 넣을 수 , 첫 번째 열에 넣어 개체의 높이에 따라.

두 번째 열이 유연하도록하기 위해 사용할 구조는 무엇입니까? Grid, StackPanel 또는 다른 것?

화살표는 고정 크기라고 생각하십시오.

Answer 1

작성해야 할 공간을 기준으로 각 화살표에 하나씩 항목을 생성하면됩니다. 변환기이 내가 단지 ContentPresenter에 사용하고보기에 그 바인딩 것이 경우에 우리의 높이가 sopmething을 변환 할 필요가

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