xaml/wpf TabControl how to Stretch using 100% of the screen

0
votes

Im starting working on this new world, i have some programming background but not at wpf/xaml. Im having an issue with TabControl.

I dont know why, even using Width="Auto" or HorizontalAlignment="Stretch" i cant figure out how.

Please see this picture to see the result

Im trying that the ending of the tabitem goes to the end of screen use all the space on the right and get fixed, like using width=100%.

can someone help me on this please?

Thanks in advance.

here's the code

<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>
2
c#wpfxaml
Hi, welcome to SO. I didn't try to run your xaml, but I have a few observations: 1) A TabControl inside a TextBlock? that seems a bad idea. 2) The WrapPanel also seems to me a good panel in this case, could be replaced by a StackPanel. Something that can help you is to color the background of your containers, so that you realize what element need to be set the width - Marlonchosky

2 Answers

0
votes

One way would be to use data-binding. If you are new to it, there are several sources out there, e.g.: here or here.

Therefore you could set a name to your WrapPanel and bind the width of the TabControl to the width of the 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>

Anyway I would suggest to refactor your XAML as it contains some unnecessary UI-elements.

0
votes

Replace the wrappanel with a stackpanel. And you had quite some strange and redundant xaml in your code (too many unused grids, textblock surrounding tabcontrol, ...). I cleaned it up a bit. You could remove the dockpanel, too, i guess.

<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>