레이아웃 동안 ItemsControl 의사 그리드 열의 춤/점프를 중지하는 방법

Question

SeveralotherquestionsonSO 같은 결론을 내 렸습니다 - ItemsControl와 ItemsControl를 사용하여 각 항목이 그리드와 비슷하게 배치되도록했습니다 (특히 서식을 지정할 때). a ListView.

코드는 다음과 유사합니다.

<StackPanel Grid.IsSharedSizeScope="True"> 
    <!-- Header --> 
    <Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto" SharedSizeGroup="Column1" /> 
     <ColumnDefinition Width="Auto" SharedSizeGroup="Column2" /> 
    </Grid.ColumnDefinitions> 
    <TextBlock Grid.Column="0" Text="Column Header 1" /> 
    <TextBlock Grid.Column="1" Text="Column Header 2" /> 
    </Grid> 
    <!-- Items --> 
    <ItemsControl ItemsSource="{Binding Path=Values, Mode=OneWay}"> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
     <Grid> 
      <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto" SharedSizeGroup="Column1" /> 
      <ColumnDefinition Width="Auto" SharedSizeGroup="Column2" /> 
      </Grid.ColumnDefinitions> 
      <TextBlock Grid.Column="0" Text="{Binding ColumnProperty1}" /> 
      <TextBlock Grid.Column="1" Text="{Binding ColumnProperty2}" /> 
     </Grid> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</StackPanel> 

ItemsSource이 바인딩 된 개체를 스왑 할 때마다 문제가 발생합니다. -add), 전체 '그리드'가 몇 초 동안 춤을 춥니 다.

아마도 Auto -width 열을 모두 일치 시키려면 몇 가지 레이아웃 단계를 거쳐야 할 것입니다.

이것은 사용자들에게 매우 혼란스럽고 그것을 정리하고 싶습니다. 다른 사람이 본 적이 있습니까?

Answer 1

불행히도 제공된 코드로 문제를 재현하지 못했습니다. 나는 20 개까지의 샘플을 1000 개까지의 아이템과 100 개 다른 너비의 컬렉션으로 교환하려고 시도했다. 아무것도 춤을 추고있었습니다. 거대한 콜렉션 (200 이상)에서 UI는 한동안 매달린 후 놓아 주면서 제공된 아이템으로 새로운 그리드를 보여줍니다.

Answer 2

이 문제가 표시되기 전에 그리드의 내용이 어느 정도 복잡해야합니다.

OP에서 보이는 것처럼 간단한 TextBlock은 고정 크기이기 때문에 쉽게 문제를 쉽게 나타낼 수 없습니다. TextBox (TextBlock 아님)을 셀에 던지면 런타임에 TextBox에서 자동으로 셀을 확장하게하는 충분한 텍스트를 입력하면 즉시 춤을 추는 것을보아야합니다. 너무 많이 받아 들일만한 라인. ItemsControl에 7 개의 행이 있습니다.

이 기능은 많은 승격 된 IsSharedSizeScope + ItemsControl 방식을 특히 편집 가능한 TextBox 지향 그리드 콘텐츠 용으로 완벽하게 렌더링합니다.

내 필요에 따라 제시된대로 ListView 또는 "ItemsControl + GridViewRowPresenter"접근 방식은 here 및 here과 매우 직접적인 대안이며 이러한 레이아웃 문제가 없습니다.

"왜 DataGrid가 아닌가?"를 묻는 사람들에게 : DataGrid는 특정 편집 방법을 강요합니다. DataGrid가 Validation.Error 지원을 망가 뜨리는 방법에 대해 막 다른 길을 끝내기 위해 기꺼이 끝내 었습니다. 작은 빨간색 유효성 검사 오류 상자는 간단한 DataGridTextColumn에 대해서는 잘 작동하지만 DataGridTemplateColumns (한 열에 하나 이상의 TextBox를 제공하는 데 필요)에 대해서는 처음에는 빨간색 상자를 표시하고 그 주위를 클릭 한 위치를 기준으로 불일치하게 숨 깁니다. DataGrid. 후속 유효성 검사 새로 고침에서 완전히 보이지 않게됩니다. (오래된 예 : http://code.google.com/p/itraacv2-1/source/browse/trunk/scraps/tabSponsor%20-%20before%20deactive%20rewrite.xaml, "너겟의 삶에 대해 ..."검색)

내 프로젝트 소스는 모두 온라인 상태입니다. 이 GridViewRowPresenter 접근 방식은 여기에 표시됩니다 : http://code.google.com/p/itraacv2-1/source/browse/trunk/App/View/tabSponsor.xaml

Answer 3

모든 그리드 열을 minWidth를 설정하십시오.

나는 또한 불안정한 불안정성을 경험했습니다. 그러나, 나는 모든 내 눈금 열에 MinWidth 세트를 지정하여 제어 할 수 있습니다. 이것은 화면이 처음 표시 될 때 물건을 안정시키는 것처럼 보입니다. 물론, 열이 여전히 링크되어 있기 때문에, 어떤 컨트롤이든간에 최대 너비까지 커집니다.

또한 IsSharedSizeScope를 해제하고 눈금 선을 먼저 정렬 한 다음 다시 켜십시오.

Answer 4

동일한 문제가 있었지만 답변 중 하나에서 제안한 것과 같이 MinWidth를 설정하려고 시도했지만 나에게 도움이되지 못했습니다. 도움이 된 것은 너비를 한 그리드에서 다른 그리드로 바인딩하는 것이 었습니다. 나는 SharedSizeGroup으로 일부 열을 왼쪽, 아무것도 이동하지 :

난 당신이 SharedGroupSize와 함께 떠나 당신이 주위를 재생할 수 있도록 그들 중 얼마나 많은 것은, 구속 될 필요가 있습니다 얼마나 많은 열이 모르는

<Grid Grid.IsSharedSizeScope="True"> 
... 
    <Grid Grid.Row="1"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto" SharedSizeGroup="Group0"/> 
      <ColumnDefinition Width="Auto" SharedSizeGroup="Group1"/> 
      <ColumnDefinition Width="Auto" SharedSizeGroup="Group2"/> 
      <ColumnDefinition Width="Auto" x:Name="Column3"/> 
      <ColumnDefinition Width="Auto" x:Name="Column4"/> 
      <ColumnDefinition Width="Auto" x:Name="Column5"/> 
     </Grid.ColumnDefinitions> 
    ... 
    </Grid> 

    <ItemsControl> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="Auto" SharedSizeGroup="Group0"/> 
         <ColumnDefinition Width="Auto" SharedSizeGroup="Group1"/> 
         <ColumnDefinition Width="Auto" SharedSizeGroup="Group2"/> 
         <ColumnDefinition Width="{Binding Path=ActualWidth, ElementName=Column3}"/> 
         <ColumnDefinition Width="{Binding Path=ActualWidth, ElementName=Column4}"/> 
         <ColumnDefinition Width="{Binding Path=ActualWidth, ElementName=Column5}"/> 
        </Grid.ColumnDefinitions> 
       </Grid> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
... 
</Grid> 

열이 당신을 위해 무엇을 볼 수 있습니다.