WPF C#使控件占据其父级的整个区域

Question

我有一个包含 TreeListControl 的 TabControl。 我正在寻找 TreeListControl 将始终占据选项卡的整个区域的方式，即使选项卡大小由于应用程序大小的变化等而发生变化。我该怎么做？ （不幸的是，我没有看到任何等同于 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>

我想尝试这些建议，但在第 74 行，第 7 位偶然发现了运行时错误。特别是在这一行 - 最后一行之前。不知道为什么......这是完整的代码（关闭 UserControl 标记的最后一行由于某种原因没有显示在这里：

<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

如果您检查此 Xaml：

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

可以看到 TabItem 的内容会占据整个区域。

在你的情况下，设置

HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"

并且不要设置 TreeListControl 的 Height="254" 和 Width="151"。

Answer 2

将对齐属性（Horizo​​ntalAlignment 和 VerticalAlignment）更改为 Stretch。

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