滚动以查看WPF TabItems（不是整个TabControl）

Question

I have the following xaml:

<UserControl x:Class="MyProject.Word.Addin.Presentation.MainTaskPane" 
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:MyProject.Word.Addin.Presentation" 
         mc:Ignorable="d">
<d:UserControl.DataContext>
    <local:MyProjectPaneViewModelHandler />
</d:UserControl.DataContext>
<!--<Grid>-->

    <DockPanel Name="MainDockPanel" Background="red">
        <local:ExToolBar DockPanel.Dock="Top" />
        <Button DockPanel.Dock="Top" Click="ButtonGetHeightDimensions" Content="Show Dimensions" Height="40"></Button>
        <TabControl DockPanel.Dock="Top" x:Name="TabControl1" Background="LightSkyBlue">
            <TabItem x:Name="Tab1" Background="LightGreen"> 
                <TabItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <Ellipse Width="10" Height="10" Fill="DarkGray"/>
                        <TextBlock>Filters</TextBlock>
                    </StackPanel>
                </TabItem.Header>
                <ScrollViewer Name="ScrollViewer1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                <StackPanel Name="Tab1StackPanel" Orientation="Vertical" MaxHeight="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}, Path=ActualHeight}" >
                        <TextBlock FontSize="24" FontWeight="Bold" Foreground="DarkSlateGray" FontStyle="Normal">
                        Filters
                    </TextBlock>
                    <Button x:Name="ClearFiltersButton" Click="ClearFilters_OnClick" Background="DarkRed" Foreground="White"
                            FontSize="20" FontWeight="Bold" MaxWidth="124" HorizontalAlignment="Left">
                        Clear Filters
                    </Button>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock>
                            <Run>Total Paragraphs </Run><Run Text="{Binding ResearchLanguageViewModel.TotalCount}"></Run>
                        </TextBlock>
                    </StackPanel>
                    <ItemsControl ItemsSource="{Binding ResearchLanguageViewModel.Filters, Mode=OneWay}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>

                                <StackPanel>
                                    <TextBlock Text="{Binding Path=Type}"></TextBlock>
                                    <TextBox Text="Search...."></TextBox>
                                    <ItemsControl ItemsSource="{Binding Path=Values, Mode=OneWay}">
                                        <ItemsControl.ItemTemplate>
                                            <DataTemplate>
                                                <CheckBox Content="{Binding Mode=OneWay}"></CheckBox>
                                            </DataTemplate>
                                        </ItemsControl.ItemTemplate>
                                    </ItemsControl>
                                </StackPanel>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </StackPanel>
                    </ScrollViewer>
            </TabItem>
            <TabItem x:Name="Tab2">
                <TabItem.Header>
                        <TextBlock>A 2nd Tab</TextBlock>
                </TabItem.Header>
                <StackPanel Orientation="Horizontal">
                        <TextBlock>
                            <Run>Mama always said lifes like a box of chocolates...</Run>
                        </TextBlock>
                </StackPanel>
            </TabItem>
        </TabControl>
    </DockPanel>
<!--</Grid>-->

And the following objects....

public class FilterViewModel
{
    public string Type { get; set; }
    public ObservableCollection<string> Values { get; set; }
}

public class ResearchLanguageViewModel
{
    public int FirmCount { get; set; }
    public ObservableCollection<FilterViewModel> Filters { get; set; } 
}

I have binding setup using the INotifyPropertyChanged, etc... and all is working. The final issue I have is with the Scrolling of the TabItem content in my first tab. The requirements call for only the tabs with overflowing content to scroll and not the entire tab control. Ie - the tab headers should still be viewable including controls above the tab control itself and the scroll bars should appear inside of Tab1's TabItem area. I've played with this for hours to no avail. I'm obviously doing something wrong here and could use some assistance.

A bit more detail: The binding on the CheckBox(es) / ItemControls on the Values collection can have upward of 200 - 500 controls and thus causes everything to get knocked out of wack.

Answer 1

you can make use of a Grid container instead of StackPanel , I attempted to make a sample for you

sample

        <ScrollViewer Name="ScrollViewer1"
                      HorizontalScrollBarVisibility="Auto"
                      VerticalScrollBarVisibility="Auto">
            <Grid Name="Tab1StackPanel">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <TextBlock FontSize="24"
                           FontWeight="Bold"
                           Foreground="DarkSlateGray"
                           FontStyle="Normal">
                    Filters
                </TextBlock>
                <Button x:Name="ClearFiltersButton"
                        Grid.Row="1"
                        Background="DarkRed"
                        Foreground="White"
                        FontSize="20"
                        FontWeight="Bold"
                        MaxWidth="124"
                        HorizontalAlignment="Left">
                    Clear Filters
                </Button>
                <StackPanel Orientation="Horizontal"
                            Grid.Row="2">
                    <TextBlock>
                        <Run>Total Paragraphs </Run><Run Text="{Binding ResearchLanguageViewModel.TotalCount}"></Run>
                    </TextBlock>
                </StackPanel>
                <ItemsControl ItemsSource="{Binding ResearchLanguageViewModel.Filters, Mode=OneWay}" 
                              Grid.Row="3">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding Path=Type}"></TextBlock>
                                <TextBox Text="Search...."></TextBox>
                                <ItemsControl ItemsSource="{Binding Path=Values, Mode=OneWay}">
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <CheckBox Content="{Binding Mode=OneWay}"></CheckBox>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </StackPanel>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Grid>
        </ScrollViewer>

grid with row definitions of auto height behaves same like a stack panel except the last one which uses up the remaining space.

we can adjust it further to match the exact needs