c# - Vertical aligned TabItems containing a TextBox who doesn't display

Question

I'm facing an issue displaying some data on WPF MVVM arch what i'm trying to do is actually:

the result that I manage to obtain for the moment (only the headers are displayed one below the other without content):

My actual code is:

<TabControl Grid.Column="9" Grid.Row="3" VerticalAlignment="Top" Visibility="{Binding InfoVisibility}">
<StackPanel Orientation="Vertical">
    <TabItem Header="Header1">
        <TextBlock Text="{Binding var1ToDisplay, UpdateSourceTrigger=PropertyChanged}"/>
    </TabItem>
    <TabItem Header="Header1">
        <TabItem.Content>
            <TextBlock Text="{Binding var2ToDisplay, UpdateSourceTrigger=PropertyChanged}"/>
        </TabItem.Content>
    </TabItem>
    <TabItem Header="Header1">
        <TextBlock Text="{Binding var3ToDisplay, UpdateSourceTrigger=PropertyChanged}"/>
    </TabItem>
</StackPanel>
</TabControl>

The element is contained into a Grid with definition like this:

<Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="180"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>

So from now i tried putting the stackPanel as parent of the TabControl, trying with other panel Type but cannot get that element organisation. I searched for other elements that could display the same result like textBox but the result shown is not satisfactory. I checked a bit about Templating of the Control element but my variable beeing independant one from another i cannot use the binding from a list. (Not sure on the last point if it is necessary to have a list to bind to a ControlTemplate, i've saw only examples of this kind on the Web). As shown in the code i tried too with TabItem.Content same result as you can see and the screen capture.

Thanks in advance for your help.

标签： c#wpfmvvm

Answer 1

如果要显示垂直堆叠TabItems，可以为要显示的每个项目定义一个TabControl包含一个：TabItem

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <TabControl Grid.Row="0" Visibility="{Binding InfoVisibility}">
        <TabItem Header="Header1">
            <TextBlock Text="{Binding var1ToDisplay, UpdateSourceTrigger=PropertyChanged}"/>
        </TabItem>
    </TabControl>
    <TabControl Grid.Row="1" Visibility="{Binding InfoVisibility}">
        <TabItem Header="Header2">
            <TextBlock Text="{Binding var2ToDisplay, UpdateSourceTrigger=PropertyChanged}"/>
        </TabItem>
    </TabControl>
    <TabControl Grid.Row="2" Visibility="{Binding InfoVisibility}">
        <TabItem Header="Header3">
            <TextBlock Text="{Binding var3ToDisplay, UpdateSourceTrigger=PropertyChanged}"/>
        </TabItem>
    </TabControl>
</Grid>

单个TabControl设计为一次仅显示一个活动项目。