xaml / wpf TabControl как растянуть, используя 100% экрана

Question

Я начинаю работать над этим новым миром, у меня есть некоторый опыт программирования, но не на wpf / xaml. У меня проблема с TabControl.

Я не знаю почему, даже используя Width = "Auto" или HorizontalAlignment = "Stretch" я не могу понять, как.

Пожалуйста, посмотрите это изображение, чтобы увидеть результат

Я пытаюсь, чтобы конец элемента табуляции доходил до конца экрана, используйте все пространство справа и исправьте, например, используя 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. Если вы новичок в этом, существует несколько источников, например: здесь или здесь .

Поэтому вы можете установить имя для своего 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, поскольку он содержит некоторые ненужные элементы пользовательского интерфейса.

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>