xaml/wpf TabControl 如何使用 100% 的屏幕进行拉伸

Question

我开始在这个新世界工作，我有一些编程背景，但不是 wpf/xaml。 我遇到了 TabControl 的问题。

我不知道为什么，即使使用 Width="Auto" 或 Horizo​​ntalAlignment="Stretch" 我也无法弄清楚如何。

Please see this picture to see the result

我正在尝试将 tabitem 的结尾移到屏幕的末尾，使用右侧的所有空间并固定，例如使用 width=100%。

有人可以帮我解决这个问题吗？

提前致谢。

这是代码

<DockPanel Height="auto" Width="Auto" Background="#FFF0EEEE" 
               VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
              LastChildFill="True">
        <ScrollViewer IsTabStop="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Width="auto" HorizontalAlignment="Stretch">
            <!--<TextBlock DockPanel.Dock="Top" Style="{DynamicResource H4}"  
                 >Start</TextBlock>-->
            <Grid Name="body" Width="auto" HorizontalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid Grid.Row="0" Grid.Column="0" Width="auto" HorizontalAlignment="Stretch" >

                    <materialDesign:Card Padding="32" Margin="16">
                        <WrapPanel DockPanel.Dock="Top" Orientation="Vertical"  >

                            <TextBlock Style="{DynamicResource H5}">project</TextBlock>
                            <TextBlock FontWeight="Medium" FontSize="14.4" Style="{DynamicResource Roboto}" Width="Auto" HorizontalAlignment="Stretch">
                                <TabControl Margin="10" HorizontalAlignment="Stretch" BorderBrush="#0E5080" BorderThickness="1" Width="auto"  >
                                    <TabItem Header="Home 1" Width="auto" HorizontalAlignment="Stretch">
                                            <TextBlock>asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd </TextBlock>
                                    </TabItem>
                                    <TabItem Header="Home 2" Name="test2" HorizontalAlignment="Stretch">
                                            <TextBlock>asd local</TextBlock>
                                    </TabItem>
                                    <TabItem Header="Home 3" Name="test3" Width="Auto">
                                        <TextBlock>asd ftp</TextBlock>
                                    </TabItem>
                                    <TabItem Header="Home 3">
                                        <TextBlock>asd sftp</TextBlock>
                                    </TabItem>
                                </TabControl>
                            </TextBlock>

                        </WrapPanel>
                    </materialDesign:Card>
                </Grid>

                <Grid Grid.Row="1" Grid.Column="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="43*"/>
                        <RowDefinition Height="77*"/>
                    </Grid.RowDefinitions>
                    <materialDesign:Card Padding="32" Margin="16,16,16,16" Grid.RowSpan="2">
                        <Label>asd</Label>
                    </materialDesign:Card>
                </Grid>
            </Grid>
        </ScrollViewer>
    </DockPanel>

Answer 1

一种方法是使用data-binding。如果您是新手，有几个来源，例如：here 或 here。

因此，您可以为您的WrapPanel 设置一个名称，并将TabControl 的宽度绑定到WrapPanel 的宽度。

<!-- Set a name to your WrapPanel here -->
<WrapPanel x:Name="MyWrapPanel" DockPanel.Dock="Top" Orientation="Vertical" >
    <TextBlock FontWeight="Medium" FontSize="14.4" >
        <!-- Set up data-binding here -->
        <TabControl Width="{Binding ActualWidth, ElementName=MyWrapPanel}" Margin="10" HorizontalAlignment="Stretch" BorderBrush="#0E5080" BorderThickness="1">
            <TabItem IsSelected="True" Header="Home 1" HorizontalAlignment="Stretch">
                <TextBlock>asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd </TextBlock>
            </TabItem>
        </TabControl>
    </TextBlock>
</WrapPanel>

无论如何，我建议重构您的 XAML，因为它包含一些不必要的 UI 元素。

Answer 2

将包裹面板替换为堆栈面板。而且您的代码中有一些奇怪且冗余的 xaml（太多未使用的网格，围绕 tabcontrol 的文本块，...）。我清理了一下。我猜你也可以移除停靠面板。

<DockPanel Height="auto" Width="Auto" Background="#FFF0EEEE"
           VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
           LastChildFill="True">
    <ScrollViewer IsTabStop="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Width="auto" HorizontalAlignment="Stretch">
        <Grid Name="body">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <materialDesign:Card Grid.Row="0" Padding="32" Margin="16">
                <StackPanel Orientation="Vertical">
                    <TextBlock Style="{DynamicResource H5}">project</TextBlock>
                    <TabControl Margin="10" BorderBrush="#0E5080" BorderThickness="1">
                        <TabItem Header="Home 1">
                            <TextBlock>asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd </TextBlock>
                        </TabItem>
                        <TabItem Header="Home 2" Name="test2">
                            <TextBlock>asd local</TextBlock>
                        </TabItem>
                        <TabItem Header="Home 3" Name="test3">
                            <TextBlock>asd ftp</TextBlock>
                        </TabItem>
                        <TabItem Header="Home 3">
                            <TextBlock>asd sftp</TextBlock>
                        </TabItem>
                    </TabControl>
                </StackPanel>
            </materialDesign:Card>
            <materialDesign:Card Grid.Row="1" Padding="32" Margin="16">
                <Label>asd</Label>
            </materialDesign:Card>
        </Grid>
    </ScrollViewer>
</DockPanel>