programing

TabControl이 하위 항목을 다시 만들지 못하도록 합니다.

goodsources 2023. 4. 16. 15:01
반응형

TabControl이 하위 항목을 다시 만들지 못하도록 합니다.

는 i i나 an an an i i i i i i i 。IList에인els ofels a에 TabControl 이거.IList의 라이프 사이클에 걸쳐서 변경은 변하지 않습니다.TabControl.

<TabControl ItemsSource="{Binding Tabs}" SelectedIndex="0" >
    <TabControl.ItemContainerStyle>
        <Style TargetType="TabItem">
            <Setter Property="Content" Value="{Binding}" />
        </Style>
    </TabControl.ItemContainerStyle>
</TabControl>

뷰 에는 「」가 .DataTemplate.ResourceDictionary.

<DataTemplate TargetType={x:Type vm:MyViewModel}>
    <v:MyView/>
</DataTemplate>

DataTemplate에 지정된 각 뷰는 리소스를 많이 사용하여 생성할 수 있으므로 각 뷰를 한 번만 생성하는 것이 좋습니다. 그러나 탭을 전환하면 관련 뷰의 생성자가 호출됩니다. 바로는, 이 은, 이 동작, 이 동작, 이 동작의 동작, 이 동작, 이 동작입니다.TabControl하지만 컨스트럭터를 호출하는 메커니즘이 무엇인지 명확하지 않습니다.

s를 사용하는 유사한 질문을 검토했습니다만, 거기서 제시된 솔루션은 바람직하지 않은 견해에 구속할 필요가 있습니다.

" " 입니다.TabControl콘텐츠를 렌더링하기 위한 패널을 공유합니다.및 다른 WPF 하려면 WPF를 확장해야 .TabControl다음과 같이 합니다.

TabControlEx.cs

[TemplatePart(Name = "PART_ItemsHolder", Type = typeof(Panel))]
public class TabControlEx : TabControl
{
    private Panel ItemsHolderPanel = null;

    public TabControlEx()
        : base()
    {
        // This is necessary so that we get the initial databound selected item
        ItemContainerGenerator.StatusChanged += ItemContainerGenerator_StatusChanged;
    }

    /// <summary>
    /// If containers are done, generate the selected item
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void ItemContainerGenerator_StatusChanged(object sender, EventArgs e)
    {
        if (this.ItemContainerGenerator.Status == GeneratorStatus.ContainersGenerated)
        {
            this.ItemContainerGenerator.StatusChanged -= ItemContainerGenerator_StatusChanged;
            UpdateSelectedItem();
        }
    }

    /// <summary>
    /// Get the ItemsHolder and generate any children
    /// </summary>
    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        ItemsHolderPanel = GetTemplateChild("PART_ItemsHolder") as Panel;
        UpdateSelectedItem();
    }

    /// <summary>
    /// When the items change we remove any generated panel children and add any new ones as necessary
    /// </summary>
    /// <param name="e"></param>
    protected override void OnItemsChanged(NotifyCollectionChangedEventArgs e)
    {
        base.OnItemsChanged(e);

        if (ItemsHolderPanel == null)
            return;

        switch (e.Action)
        {
            case NotifyCollectionChangedAction.Reset:
                ItemsHolderPanel.Children.Clear();
                break;

            case NotifyCollectionChangedAction.Add:
            case NotifyCollectionChangedAction.Remove:
                if (e.OldItems != null)
                {
                    foreach (var item in e.OldItems)
                    {
                        ContentPresenter cp = FindChildContentPresenter(item);
                        if (cp != null)
                            ItemsHolderPanel.Children.Remove(cp);
                    }
                }

                // Don't do anything with new items because we don't want to
                // create visuals that aren't being shown

                UpdateSelectedItem();
                break;

            case NotifyCollectionChangedAction.Replace:
                throw new NotImplementedException("Replace not implemented yet");
        }
    }

    protected override void OnSelectionChanged(SelectionChangedEventArgs e)
    {
        base.OnSelectionChanged(e);
        UpdateSelectedItem();
    }

    private void UpdateSelectedItem()
    {
        if (ItemsHolderPanel == null)
            return;

        // Generate a ContentPresenter if necessary
        TabItem item = GetSelectedTabItem();
        if (item != null)
            CreateChildContentPresenter(item);

        // show the right child
        foreach (ContentPresenter child in ItemsHolderPanel.Children)
            child.Visibility = ((child.Tag as TabItem).IsSelected) ? Visibility.Visible : Visibility.Collapsed;
    }

    private ContentPresenter CreateChildContentPresenter(object item)
    {
        if (item == null)
            return null;

        ContentPresenter cp = FindChildContentPresenter(item);

        if (cp != null)
            return cp;

        // the actual child to be added.  cp.Tag is a reference to the TabItem
        cp = new ContentPresenter();
        cp.Content = (item is TabItem) ? (item as TabItem).Content : item;
        cp.ContentTemplate = this.SelectedContentTemplate;
        cp.ContentTemplateSelector = this.SelectedContentTemplateSelector;
        cp.ContentStringFormat = this.SelectedContentStringFormat;
        cp.Visibility = Visibility.Collapsed;
        cp.Tag = (item is TabItem) ? item : (this.ItemContainerGenerator.ContainerFromItem(item));
        ItemsHolderPanel.Children.Add(cp);
        return cp;
    }

    private ContentPresenter FindChildContentPresenter(object data)
    {
        if (data is TabItem)
            data = (data as TabItem).Content;

        if (data == null)
            return null;

        if (ItemsHolderPanel == null)
            return null;

        foreach (ContentPresenter cp in ItemsHolderPanel.Children)
        {
            if (cp.Content == data)
                return cp;
        }

        return null;
    }

    protected TabItem GetSelectedTabItem()
    {
        object selectedItem = base.SelectedItem;
        if (selectedItem == null)
            return null;

        TabItem item = selectedItem as TabItem;
        if (item == null)
            item = base.ItemContainerGenerator.ContainerFromIndex(base.SelectedIndex) as TabItem;

        return item;
    }
}

XAML

<Style TargetType="{x:Type controls:TabControlEx}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid Background="{TemplateBinding Background}" ClipToBounds="True" KeyboardNavigation.TabNavigation="Local" SnapsToDevicePixels="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition x:Name="ColumnDefinition0" />
                        <ColumnDefinition x:Name="ColumnDefinition1" Width="0" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition x:Name="RowDefinition0" Height="Auto" />
                        <RowDefinition x:Name="RowDefinition1" Height="*" />
                    </Grid.RowDefinitions>
                    <DockPanel Margin="2,2,0,0" LastChildFill="False">
                        <TabPanel x:Name="HeaderPanel" Margin="0,0,0,-1" VerticalAlignment="Bottom" Panel.ZIndex="1" DockPanel.Dock="Right"
                                  IsItemsHost="True" KeyboardNavigation.TabIndex="1" />
                    </DockPanel>
                    <Border x:Name="ContentPanel" Grid.Row="1" Grid.Column="0"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                        <Grid x:Name="PART_ItemsHolder" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

주의: 이 해결 방법은 생각해내지 못했습니다.그것은 몇 년 동안 프로그래밍 포럼에서 공유되어 왔고, 지금은 WPF 레시피 책 중 하나라고 믿고 있다.가장 오래된 소스 또는 원본 소스는 MultipleSight였습니다.NET 블로그의 투고와 StackOverflow에 관한답변.

HTH,

★★★★★★★★★★★★★★★의 답변Dennis아주 훌륭하고, 제게는 아주 잘 작동했어요.그러나 그의 게시물에 언급된 원본 기사는 현재 누락되어 있기 때문에, 그의 답변은 즉시 사용할 수 있도록 하기 위해 조금 더 많은 정보가 필요합니다.

이 답변은 MVVM의 관점에서 제공되며 VS 2013에서 테스트되었습니다.

일단 배경화면.은 첫번 from from from from from from from의 첫 번째 답변입니다.Dennis이 기능은 사용자가 탭을 전환할 때마다 해당 탭 내용을 삭제 및 재생성하는 대신 탭 내용을 숨기고 표시하는 것입니다.

여기에는 다음과 같은 이점이 있습니다.

  • 탭을 전환해도 편집 상자의 내용은 사라지지 않습니다.
  • 탭에서 트리 보기를 사용하는 경우 탭 변경 간에 트리 보기가 축소되지 않습니다.
  • 모든 그리드에 대한 현재 선택 항목은 탭 스위치 간에 유지됩니다.
  • 이 코드는 MVVM 스타일의 프로그래밍에 더 적합합니다.
  • 탭 변경 사이에 탭에 설정을 저장하고 로드하기 위해 코드를 쓸 필요가 없습니다.
  • Telerik 또는 DevExpress와 같은 타사 컨트롤을 사용하는 경우 탭 스위치 간에 그리드 레이아웃과 같은 설정이 유지됩니다.
  • 퍼포먼스의 대폭 향상 - 탭 전환은 거의 순식간에 이루어집니다.탭이 바뀔 때마다 모든 것을 다시 그릴 필요는 없기 때문입니다.

TabControlEx.cs

// Copy C# code from @Dennis's answer, and add the following property after the 
// opening "<Style" tag (this sets the key for the style):
// x:Key="TabControlExStyle"
// Ensure that the namespace for this class is the same as your DataContext.

이것은 Data Context에서 지적한 것과 같은 클래스에 들어갑니다.

XAML

// Copy XAML from @Dennis's answer.

이게 스타일이에요.XAML 파일의 헤더에 들어갑니다.이 유형은 변경되지 않으며 모든 탭 컨트롤에서 참조됩니다.

원본 탭

원래 탭은 다음과 같습니다.탭을 전환하면 탭 내용이 삭제되고 다시 작성되기 때문에 편집 상자의 내용이 사라집니다.

<TabControl
  behaviours:TabControlBehaviour.DoSetSelectedTab="True"
  IsSynchronizedWithCurrentItem="True">
<TabItem Header="Tab 1">
  <TextBox>Hello</TextBox>
</TabItem>
<TabItem Header="Tab 2" >
  <TextBox>Hello 2</TextBox>
</TabItem>

커스텀 탭

하여 새로운 C#하고, .Style 삭제:

<sdm:TabControlEx
  behaviours:TabControlBehaviour.DoSetSelectedTab="True"
  IsSynchronizedWithCurrentItem="True"
  Style="{StaticResource TabControlExStyle}">
<TabItem Header="Tab 1">
  <TextBox>Hello</TextBox>
</TabItem>
<TabItem Header="Tab 2" >
  <TextBox>Hello 2</TextBox>
</TabItem>

탭을 바꾸면 편집 상자의 내용이 유지되므로 모든 것이 정상적으로 작동하고 있음을 알 수 있습니다.

갱신하다

이 솔루션은 매우 효과적입니다.그러나 이를 위해 모듈러형 MVVM에 친숙한 방법이 있습니다.이 방법에서는 접속된 동작을 사용하여 동일한 결과를 얻습니다.코드 프로젝트: WPF제어: 탭 가상화를 해제하고 있습니다.저는 이것을 추가 답변으로 추가했습니다.

갱신하다

DevExpress 을할 수 .CacheAllTabs동일한 효과를 얻기 위한 옵션(이것에 의해, 탭외의 가상화가 전환됩니다):

<dx:DXTabControl TabContentCacheMode="CacheAllTabs">
    <dx:DXTabItem Header="Tab 1" >
        <TextBox>Hello</TextBox>
    </dx:DXTabItem>
    <dx:DXTabItem Header="Tab 2">
        <TextBox>Hello 2</TextBox>
    </dx:DXTabItem>
</dx:DXTabControl>

참고로 저는 DevExpress와 제휴하고 있지 않기 때문에 Telerik도 이와 동등한 것을 가지고 있다고 확신합니다.

갱신하다

텔레릭하다IsContentPreserved@Luishg @Luishg lu다다다다다다다다다다다다다lulululu.

@Dennis의 기존 솔루션(@Gravitas의 추가 메모 포함)은 매우 잘 작동합니다.

그러나 동일한 결과를 얻기 위해 연결된 동작을 사용하기 때문에 더 모듈화되고 MVVM에 친화적인 다른 솔루션이 있습니다.

코드 프로젝트: WPF제어: 탭 가상화를 해제하고 있습니다.저자는 로이터의 테크니컬 리드이기 때문에 코드는 견고할 것이다.

데모 코드가 잘 조합되어 있어 일반적인 TabControl과 연결된 동작을 보여줍니다.

여기에 이미지 설명 입력

아주 명백하지는 않지만 우아한 해결책이 있다.주요 아이디어는 커스텀 컨버터를 통해 TabItem의 VisualTree for Content 속성을 수동으로 생성하는 것입니다.

몇 가지 자원을 정의하다

<Window.Resources>
    <converters:ContentGeneratorConverter x:Key="ContentGeneratorConverter"/>

    <DataTemplate x:Key="ItemDataTemplate">
        <StackPanel>
            <TextBox Text="Try to change this text and choose another tab"/>
            <TextBlock Text="{Binding}"/>
        </StackPanel>
    </DataTemplate>

    <markup:Set x:Key="Items">
        <system:String>Red</system:String>
        <system:String>Green</system:String>
        <system:String>Blue</system:String>
    </markup:Set>
</Window.Resources>

어디에

public class ContentGeneratorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var control = new ContentControl {ContentTemplate = (DataTemplate) parameter};
        control.SetBinding(ContentControl.ContentProperty, new Binding());
        return control;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) =>
        throw new NotImplementedException();
}

세트는 이런 느낌이에요.

public class Set : List<object> { }

그 대신 ContentTemplate 속성을 사용합니다.

    <TabControl
        ItemsSource="{StaticResource Items}"
        ContentTemplate="{StaticResource ItemDataTemplate}">
    </TabControl>

다음 방법으로 Item Container Style을 지정해야 합니다.

    <TabControl
        ItemsSource="{StaticResource Items}">
        <TabControl.ItemContainerStyle>
            <Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}">
                <Setter Property="Content" Value="{Binding Converter={StaticResource ContentGeneratorConverter}, ConverterParameter={StaticResource ItemDataTemplate}}"/>
            </Style>
        </TabControl.ItemContainerStyle>
    </TabControl>

이제 탭 전환 중 ItemDataTemplate에서 TextBox 동작의 차이를 알아보기 위해 두 변형을 비교해 보십시오.

@Dennis잘 듣는 것 같아요.

유일한 작은 문제는 자동화된 UI 테스트를 구현하는 동안 TabControlEx에서 Windows Automation이 작동하지 않는다는 입니다.증상은 Automation Element입니다.FindFirst(TreeScope, 조건) 메서드는 항상 null을 반환합니다.

내가 추가하고 싶은 것을 수정해야 합니다.

public class TabControlEx : TabControl
{
// Dennis' version here
...
    public Panel ItemsHolderPanel => _itemsHolderPanel;
    protected override AutomationPeer OnCreateAutomationPeer()
    {
        return new TabControlExAutomationPeer(this);
    }
}

이 새로운 유형이 추가된 경우:

public class TabControlExAutomationPeer : TabControlAutomationPeer
{
    public TabControlExAutomationPeer(TabControlEx owner) : base(owner)
    {
    }
    protected override ItemAutomationPeer CreateItemAutomationPeer(object item)
    {
        return new TabItemExAutomationPeer(item, this);
    }
}

public class TabItemExAutomationPeer : TabItemAutomationPeer
{
    public TabItemExAutomationPeer(object owner, TabControlExAutomationPeer tabControlExAutomationPeer) 
        : base(owner, tabControlExAutomationPeer)
    {
    }
    
    protected override List<AutomationPeer> GetChildrenCore()
    {
        var headerChildren = base.GetChildrenCore();

        if (ItemsControlAutomationPeer.Owner is TabControlEx parentTabControl)
        {
            var contentHost = parentTabControl.ItemsHolderPanel;
            if (contentHost != null)
            {
                AutomationPeer contentHostPeer = new FrameworkElementAutomationPeer(contentHost);
                var contentChildren = contentHostPeer.GetChildren();
                if (contentChildren != null)
                {
                    if (headerChildren == null)
                        headerChildren = contentChildren;
                    else
                        headerChildren.AddRange(contentChildren);
                }
            }
        }


        return headerChildren;
    }
}

언급URL : https://stackoverflow.com/questions/9794151/stop-tabcontrol-from-recreating-its-children

반응형