TabControl의 WPF UI 지속성

Question

매우 간단해야하지만 실제로는 매우 어려운 것으로 보이는 항목에 문제가 있습니다.

당신은 ViewModels의 itemsource에 TabControl을 바인딩하고 DataTemplate을 사용하여 아이템을 표시한다고 가정합니다. 이제 DataTemplate이 두 개의 열이있는 Grid와 열의 크기를 조정하는 Grid Splitter로 구성되어 있다고 가정 해 보겠습니다.

하나의 탭에서 열의 크기를 조정하고 다른 탭으로 전환하면 열의 크기도 조정됩니다. TabControl은 모든 탭에서 DataTemplate을 공유하기 때문입니다. 이러한 UI 지속성의 부족은 다양한 UI 구성 요소가 조정될 때 좌절감을 줄 수있는 템플릿의 모든 요소에 적용됩니다. 다른 예는 DataGrid의 스크롤 위치입니다 (탭에 있음). 행이 더 많은 DataGrid를 다른 탭의 맨 아래로 스크롤하면 항목이 거의없는 DataGrid가 표시되지 않게 스크롤됩니다 (한 행만 표시). 또한 TabControl에 여러 DataTemplate에 정의 된 다양한 항목이있는 경우 differenet 유형의 항목간에 전환 할 때보기가 재설정됩니다. 이 방법으로 자원을 절약 할 수는 있지만 이해할 수있는 결과 기능은 예상되는 UI 동작과 모순되는 것처럼 보입니다.

그래서 내가 해결책/해결 방법이 있는지 궁금 하네. 나는 다른 사람들과 마주 친 적이 있다고 확신한다. 나는 다른 포럼에서 몇 가지 비슷한 질문을 발견했지만 실제 해결책은 없었습니다. 하나는 AdornerDecorator 사용에 관한 것이지만 DataTemplate과 함께 사용하면 작동하지 않는 것 같습니다. 나는 모든 UI 속성 (예 : 열 너비, 스크롤 위치)을 ViewModels에 바인딩하는 데별로 신경 쓰지 않고 있으며, 실제로 간단한 GridSplitter 예제를 사용해 보았지만 제대로 작동하지는 못했습니다. ColumnDefinitions의 폭은 반드시 그리드 스플리터의 영향을받지는 않았습니다. 그럼에도 불구하고 일반적인 해결책이 있다면 좋을 것입니다. 이견있는 사람?

TabControl을 도려 내고 ItemsControl을 사용하면 비슷한 문제가 발생합니까? TabControl 스타일을 수정하여 탭 사이에 ContentPresenter를 공유하지 않도록 할 수 있습니까?

Answer 1

저는 지금 꽤 오랜 시간 동안이 작업을하고 있습니다. 마지막으로 TabControl을 수정/수정하는 대신 단순히 기능을 다시 만들었습니다. 실제로 실제로 효과가 있습니다. 나는 목록 상자 (탭 머리글)와 ItemsControl에서 Tab'like'Control을 만들었습니다. 중요한 것은 ItemsControl의 ItemsPanelTemplate을 Grid로 설정하는 것이 었습니다. 스타일링과 아이템의 가시성을 관리하는 DataTrigger가 있습니다. 완벽하게 작동합니다. 각 "탭"은 고유 한 개체이며 스크롤 위치, 선택 항목, 열 너비 등과 같은 모든 UI 상태를 유지합니다. 이러한 유형의 솔루션에서 발생할 수있는 단점이나 문제가 있습니까?

 <DockPanel> 
      <ListBox 
       DockPanel.Dock="Top" 
       ItemsSource="{Binding Tabs}" 
       SelectedItem="{Binding SelectedTab}" 
       ItemContainerStyle="{StaticResource ImitateTabControlStyle}"> 
       <ListBox.ItemsPanel> 
        <ItemsPanelTemplate> 
         <StackPanel 
          Orientation="Horizontal"> 
         </StackPanel> 
        </ItemsPanelTemplate> 
       </ListBox.ItemsPanel> 

       <ListBox.ItemTemplate> 
        <DataTemplate>        
         <StackPanel 
          Margin="2,2,2,0" 
          Orientation="Horizontal" > 
          <TextBlock 
           Margin="4,0" FontWeight="Bold" 
           Padding="2" 
           VerticalAlignment="Center" HorizontalAlignment="Left" 
           Text="{Binding Name}" > 
          </TextBlock> 
          <Button 
           Margin="4,0" 
           Command="{Binding CloseCommand}"> 
           <Image Source="/TERM;component/Images/Symbol-Delete.png" MaxHeight="20"/> 
          </Button> 
         </StackPanel>        
        </DataTemplate> 
       </ListBox.ItemTemplate> 
      </ListBox> 
      <ItemsControl  
       ItemsSource="{Binding Tabs}"> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <Grid /> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
       <ItemsControl.ItemTemplate> 
        <DataTemplate> 
         <ContentControl         
          Content="{Binding}"> 
          <ContentControl.Style> 
           <Style> 
            <Style.Triggers> 
             <DataTrigger 
              Binding="{Binding IsSelected}" Value="False"> 
              <Setter Property="ContentControl.Visibility" Value="Hidden" />             
             </DataTrigger> 
            </Style.Triggers> 
           </Style> 
          </ContentControl.Style> 
         </ContentControl> 
        </DataTemplate> 
       </ItemsControl.ItemTemplate> 
      </ItemsControl>     
     </DockPanel>