WPF C# making control occupy the entire area of its parent

Question

I have a TabControl that contains TreeListControl. I am looking for way that TreeListControl will alway occupy the entire area of the Tab, even when the Tab size changes as the result of application size change, etc. How do I do that? (Unfortunately I don't see any equivalent to WinForms' Dock.Fill)

            <dxdo:DockLayoutManager FloatingMode="Desktop" ClosedPanelsBarVisibility="Never">
            <dxdo:LayoutGroup Orientation="Horizontal">
                <dxdo:LayoutPanel x:Name="Navigation" Caption="Navigation" AllowClose="False" ItemWidth="200">
                    <dx:DXTabControl>
                        <dx:DXTabItem Header="Tasks">
                            <Grid Background="Transparent">
                                <dxg:TreeListControl AutoGenerateColumns="AddNew" EnableSmartColumnsGeneration="True" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="254" Width="151">
                                    <dxg:TreeListControl.View>
                                        <dxg:TreeListView AllowPerPixelScrolling="True" ShowTotalSummary="True" Height="291" Margin="-17,-19,-24.4,-19.2" VerticalAlignment="Bottom" />
                                    </dxg:TreeListControl.View>
                                </dxg:TreeListControl>
                            </Grid>
                        </dx:DXTabItem>
                        <dx:DXTabItem Header="Blocks">
                            <Grid Background="Transparent"/>
                        </dx:DXTabItem>
                        <dx:DXTabItem Header="Functions"/>
                    </dx:DXTabControl>
                </dxdo:LayoutPanel>
                <dxdo:DocumentGroup x:Name="Documents" DestroyOnClosingChildren="False" ClosingBehavior="HideToClosedPanelsCollection" 
                                    dxmvvm:UIRegion.Region="{x:Static common:Regions.Documents}">
                    <dxdo:DocumentGroup.ItemStyle>
                        <Style TargetType="{x:Type dxdo:LayoutPanel}">
                            <Setter Property="Caption" Value="{Binding Caption}"/>
                            <Setter Property="IsActive" Value="{Binding IsActive, Mode=TwoWay}"/>
                        </Style>
                    </dxdo:DocumentGroup.ItemStyle>
                </dxdo:DocumentGroup>
            </dxdo:LayoutGroup>
        </dxdo:DockLayoutManager>

I wanted to try the suggestions but stumbled on the runtime error on Line 74, pos 7. Specifically in this - - one line before the last. No idea why... here is the complete code (the last line of closing UserControl tag is not showing here for some reason:

<UserControl
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:common="clr-namespace:PLCProg.Common;assembly=PLCProg.Common"
         xmlns:views="clr-namespace:PLCProg.Main.Views"
         xmlns:viewModels="clr-namespace:PLCProg.Main.ViewModels"
         xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
         xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
         xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
         xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon"
         xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar"
         xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking"
         xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" xmlns:dxdiag="http://schemas.devexpress.com/winfx/2008/xaml/diagram" x:Class="PLCProg.Main.Views.MainView"
         mc:Ignorable="d" d:DesignHeight="500" d:DesignWidth="600"
         d:DataContext="{dxmvvm:ViewModelSource {x:Type viewModels:MainViewModel}}">
<dxmvvm:Interaction.Behaviors>
    <dxmvvm:VisualStateService/>
</dxmvvm:Interaction.Behaviors>
<dxb:BarManager>
    <DockPanel>
        <dxr:RibbonControl DockPanel.Dock="Top" RibbonStyle="Office2010" ToolbarShowMode="Hide">
            <dxr:RibbonDefaultPageCategory>
                <dxr:RibbonPage x:Name="ribbonPage_Main" Caption="View">
                    <dxr:RibbonPageGroup x:Name="ribbonPageGroup_Main">
                        <dxr:RibbonGalleryBarItem x:Name="ribbonGalleryBarItem_Theme">
                            <dxmvvm:Interaction.Behaviors>
                                <dxr:RibbonGalleryItemThemeSelectorBehavior/>
                            </dxmvvm:Interaction.Behaviors>
                        </dxr:RibbonGalleryBarItem>
                    </dxr:RibbonPageGroup>
                    <dxr:RibbonPageGroup x:Name="My_Group" Caption="My Group">
                        <dxb:BarButtonItem x:Name="NewProgramBtn" Content="New Program" Glyph="{dx:DXImage Image=Add_16x16.png}" LargeGlyph="{dx:DXImage Image=Add_32x32.png}" />
                        <dxb:BarButtonItem x:Name="NewTaskBtn" Content="New Task" Glyph="{dx:DXImage Image=AddFile_16x16.png}" LargeGlyph="{dx:DXImage Image=AddItem_32x32.png}" />
                    </dxr:RibbonPageGroup>
                </dxr:RibbonPage>
            </dxr:RibbonDefaultPageCategory>
        </dxr:RibbonControl>
        <dxdo:DockLayoutManager FloatingMode="Desktop" ClosedPanelsBarVisibility="Never">
            <dxdo:LayoutGroup Orientation="Horizontal">
                <dxdo:LayoutPanel x:Name="Navigation" Caption="Navigation" AllowClose="False" ItemWidth="200">
                    <dx:DXTabControl>
                        <dx:DXTabItem Header="Tasks">
                            <Grid Background="Transparent">
                                <dxg:TreeListControl AutoGenerateColumns="AddNew" EnableSmartColumnsGeneration="True" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="254" Width="151">
                                    <dxg:TreeListControl.View>
                                        <dxg:TreeListView AllowPerPixelScrolling="True" ShowTotalSummary="True" Height="291" Margin="10, 10, 0, 0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                                    </dxg:TreeListControl.View>
                                </dxg:TreeListControl>
                            </Grid>
                        </dx:DXTabItem>
                        <dx:DXTabItem Header="Blocks">
                            <Grid Background="Transparent"/>
                        </dx:DXTabItem>
                        <dx:DXTabItem Header="Functions"/>
                    </dx:DXTabControl>
                </dxdo:LayoutPanel>
                <dxdo:DocumentGroup x:Name="Documents" DestroyOnClosingChildren="False" ClosingBehavior="HideToClosedPanelsCollection" 
                                    dxmvvm:UIRegion.Region="{x:Static common:Regions.Documents}">
                    <dxdo:DocumentGroup.ItemStyle>
                        <Style TargetType="{x:Type dxdo:LayoutPanel}">
                            <Setter Property="Caption" Value="{Binding Caption}"/>
                            <Setter Property="IsActive" Value="{Binding IsActive, Mode=TwoWay}"/>
                        </Style>
                    </dxdo:DocumentGroup.ItemStyle>
                    <dxdo:DocumentPanel Caption="Document">
                        <dxdiag:DiagramControl SelectedStencils="BasicShapes, BasicFlowchartShapes"/>
                    </dxdo:DocumentPanel>
                </dxdo:DocumentGroup>
            </dxdo:LayoutGroup>
        </dxdo:DockLayoutManager>
    </DockPanel>
</dxb:BarManager>

Answer 1

If you check this Xaml:

    <TabControl>
        <TabItem Header="Tasks">
            <Border Background="Blue" /> 
        </TabItem>
    </TabControl>

You can see that the TabItem content will occupy the whole area.

In your case, set

HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"

and don't set the Height="254" and Width="151" of you TreeListControl.

Answer 2

Change the alignment properties (HorizontalAlignment and VerticalAlignment) to Stretch.

<dxg:TreeListControl AutoGenerateColumns="AddNew" EnableSmartColumnsGeneration="True" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" Margin="10,10,0,0" VerticalAlignment="Top" Height="254" Width="151">