xaml / wpf TabControl如何使用屏幕的100％拉伸

Posted 2021-04-27

我开始在这个新世界工作，我有一定的编程背景，但是没有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>

答案

用包装板替换包装板。而且您的代码中有很多奇怪且多余的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" 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">
                            <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,16,16,16">
                <Label>asd</Label>
            </materialDesign:Card>
        </Grid>
    </ScrollViewer>
</DockPanel>

另一答案

一种方法是使用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元素。