如何使用WPF网格填充选项卡项目区域

时间:2013-10-22 16:10:50

标签: c# .net wpf grid panel

如何获得一个网格来填充标签项的下半部分,并使尺寸正确? (我个人称这个区域为页面)。现在,我的布局根目标有一个网格,然后是一个带有几个标签的标签控件。我试图将网格拖放到选项卡控件上;但是,它始终设置为我最初为其创建的固定大小。

  <Grid x:Name="LayoutRoot" Margin="0,0,-1,0" Grid.IsSharedSizeScope="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="4*"/>
        <ColumnDefinition Width="1497*"/>
        <ColumnDefinition Width="116*"/>
        <ColumnDefinition Width="36*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="101*"/>
        <RowDefinition Height="24*"/>
        <RowDefinition Height="5*"/>
        <RowDefinition Height="27*"/>
        <RowDefinition Height="597*"/>
        <RowDefinition Height="0*"/>
    </Grid.RowDefinitions>
    <Rectangle Grid.ColumnSpan="4" Fill="#FF080808" Margin="-1,0,0,0" Stroke="#FF0061FF" Grid.RowSpan="3"/>
    <Image Source="LP_Script Logo_black.jpg" Margin="32,18,1206,27" Grid.Column="1" Stretch="Fill" MinWidth="250" MinHeight="56" ScrollViewer.CanContentScroll="True"/>
    <TextBox x:Name="ProgramSearchTextBox" TextWrapping="Wrap" Text="" KeyDown="ProgramSearchTextBox_KeyDown" PreviewKeyDown="ProgramSearchTextBox_PreviewKeyDown" Margin="2,1,2,0" HorizontalContentAlignment="Right" Grid.Column="2" Grid.Row="1" />
    <TabControl x:Name="mainMenuTabControl" VerticalAlignment="Stretch" Height="Auto" Width="Auto" PreviewKeyDown="mainMenuTabControl_PreviewKeyDown" Grid.ColumnSpan="4" Margin="-1,0,1,0" Grid.Row="3" BorderThickness="1,1,1,0" Grid.RowSpan="3">
        <TabItem x:Name="homeTab" Header="Home">
            <TabItem.Background>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                    <GradientStop Color="#FFF3F3F3" Offset="0"/>
                    <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                    <GradientStop Color="#FFC1C0C0" Offset="1"/>
                </LinearGradientBrush>
            </TabItem.Background>
            <DockPanel Height="Auto" Width="Auto" d:IsHidden="True">
                <Grid x:Name="dashboard" Background="#FFE5E5E5" RenderTransformOrigin="0.5,0.5" Width="1636">
                    <Grid.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleY="-1" ScaleX="-1"/>
                            <SkewTransform/>
                            <RotateTransform Angle="180"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Grid.RenderTransform>
                </Grid>
            </DockPanel>
        </TabItem>
        <TabItem x:Name="fileMaintTab" Header="File Maintenance" KeyDown="fileMaintTab_KeyDown">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0*"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0*"/>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="336*"/>
                    <ColumnDefinition Width="1316*"/>
                </Grid.ColumnDefinitions>
                <TreeView x:Name="FileMaintTreeView" Background="#FF747474" BorderThickness="1,1,5,1" BorderBrush="#FF0090FD" SelectedItemChanged="FileMaintTreeView_SelectedItemChanged" RenderTransformOrigin="0.5,0.5" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" Margin="0,0,1,0">
                    <TreeView.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </TreeView.RenderTransform>

3 个答案:

答案 0 :(得分:0)

以下是一个向您展示的小例子:

<Grid>
    <TabControl>
        <TabItem Header="Whole Row Tab">
            <Grid Background="Blue">
                <TextBlock Text="I'm in the whole of this tab" />
            </Grid>
        </TabItem>
        <TabItem Header="Half Row Tab">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid Grid.Row="1" Background="Red">
                    <TextBlock Text="I'm in the bottom half of this tab" />
                </Grid>
            </Grid>
        </TabItem>
        <TabItem Header="Another Half Row Tab">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid Grid.Row="1" Background="Red">
                    <TextBlock Text="I'm in the bottom half of this tab" />
                </Grid>
            </Grid>
        </TabItem>
        <TabItem Header="Varied Row Tab">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="2*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid Grid.Row="0" Background="Green">
                    <TextBlock Text="I'm in the top quarter of this tab" />
                </Grid>
                <Grid Grid.Row="3" Background="Green">
                    <TextBlock Text="I'm in the bottom quarter of this tab" />
                </Grid>
            </Grid>
        </TabItem>
    </TabControl>
</Grid>

答案 1 :(得分:0)

对于Grid下面的TabItem,请尝试设置您的定义,如下所示:

<Grid.RowDefinitions>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

对于TreeView定义,我将其更改为以下内容:

<TreeView x:Name="FileMaintTreeView" Background="#FF747474" BorderBrush="#FF0090FD" SelectedItemChanged="FileMaintTreeView_SelectedItemChanged" Grid.Column="0" Grid.Row="0">

(我删除了诸如边距和诸如此类的东西,如果你愿意,可以把它们放回去......

这至少会让你的TreeView填满整个TabItem

如果您希望TabItem在页面上显示其他内容...让我们在TreeView旁边说一些控件,那么您可以添加另一个ColumnDefinition。宽度=“*”表示它将填满整个剩余空间。 Width =“Auto”表示它只会填充嵌套在该列/行中的控件的大小。

答案 2 :(得分:0)

对我来说,最后,我通过添加以下设置从TabControlStyle.xaml(样式文件)中找到了原因:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="TabControlStyle" TargetType="{x:Type TabControl}">
        <Style.Resources>
            <Style TargetType="{x:Type TabItem}">

                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>

                </Setter>
            </Style>
        </Style.Resources>

    </Style>
</ResourceDictionary>