使 TabControl 内的 Grid 的宽度和高度动态化答案

【问题标题】：Make Width and Height of Grid inside TabControl Dynamic使 TabControl 内的 Grid 的宽度和高度动态化
【发布时间】：2015-01-08 01:31:27
【问题描述】：

我正在开发一个 WPF 应用程序。我的应用中有很多标签。每个选项卡都包含一个网格。我的应用程序是基于页面的，没有窗口。我的应用程序中有两个页面，一个是 Xaml 的主页 MainPage.xaml

<Page x:Class="App.MainPage"
  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" 
  mc:Ignorable="d" 
  d:DesignHeight="300" d:DesignWidth="300"
Title="MainPage" Height="600" Width="1000" WindowHeight="600" 
  WindowWidth="1000" WindowTitle="CSP - LOGIN" Background="Black"></Page>

还有Page2.xaml

<Page x:Class="App.Page2"
          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">
<Grid Background="Black">
    <TabControl HorizontalAlignment="Left" Height="100" Margin="27,63,0,0" VerticalAlignment="Top" Width="100">
                <TabItem Header="TabItem">
                    <Grid Background="#FFE5E5E5">
<Grid HorizontalAlignment="Left" Height="410.5" Margin="10,19.54,0,0" VerticalAlignment="Top" Width="766">
<Button Content="Add Item" HorizontalAlignment="Left" Margin="10,135.748,0,0" VerticalAlignment="Top" Width="75"/>
                        <Button Content="Remove Item" HorizontalAlignment="Left" Margin="10,177.208,0,0" VerticalAlignment="Top" Width="75"/>
                        <Button Content="Update Item" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="10,217.168,0,0"/>
</Grid>
</Grid>
                </TabItem>
                <TabItem Header="TabItem">
                    <Grid Background="#FFE5E5E5">
<Grid HorizontalAlignment="Left" Height="410.5" Margin="10,19.54,0,0" VerticalAlignment="Top" Width="766">
<Button Content="Add Item" HorizontalAlignment="Left" Margin="10,135.748,0,0" VerticalAlignment="Top" Width="75"/>
                        <Button Content="Remove Item" HorizontalAlignment="Left" Margin="10,177.208,0,0" VerticalAlignment="Top" Width="75"/>
                        <Button Content="Update Item" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="10,217.168,0,0"/>
</Grid>
</Grid>
                </TabItem>
                <TabItem Header="TabItem" HorizontalAlignment="Left" Height="19.96" VerticalAlignment="Top" Width="96">
                    <Grid Background="#FFE5E5E5">
<Grid HorizontalAlignment="Left" Height="410.5" Margin="10,19.54,0,0" VerticalAlignment="Top" Width="766">
<Button Content="Add Item" HorizontalAlignment="Left" Margin="10,135.748,0,0" VerticalAlignment="Top" Width="75"/>
                        <Button Content="Remove Item" HorizontalAlignment="Left" Margin="10,177.208,0,0" VerticalAlignment="Top" Width="75"/>
                        <Button Content="Update Item" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="10,217.168,0,0"/>
</Grid>
</Grid>
                </TabItem>
            </TabControl>
</Grid>

    </Page>

如您所见，每个选项卡都有两个网格。一个 Grid 默认生成，另一个由我添加以将项目组合在一起。

我尝试了 SizeToContent 和其他函数来在更改时动态获取宽度和高度，但是当我添加 SizeToContent 时它会给出错误并且 SizeToContent 不会显示在代码提示中。它给出了无法访问的错误。

我希望网格中的内容是动态的，所以如果窗口大小发生变化，那么大小也会发生变化。

【问题讨论】：

不明白你想要什么。使用当前代码，Grid 的大小应始终填满整个 tabitem 以及几乎填满整个页面。调整窗口大小不会改变这种行为。如果内容有一些固定大小，将窗口大小调整为一些小尺寸将切断内容。解决方案是支持一些滚动条或使用一些视图框缩小内容。

标签： c# wpf xaml grid tabcontrol

【解决方案1】：

我将解释控件属性的一些行为方面：

在控件上定义Width 属性会使其水平固定。
在控件上定义Height 属性会使其垂直固定。
在控件上定义HorizontalAlignment 属性具有多种行为，具体取决于值：
1. Stretch：默认值。 使控件相对于其父容器水平拉伸。 当Width 属性已设置时，此选项无效。
2. Left：将控件在其父容器内向左对齐。
3. Center：在其父容器中水平居中控件。
4. Right：控件在其父容器内向右对齐。
在控件上定义VerticalAlignment 属性具有多种行为，具体取决于值：
1. Stretch：默认值。 使控件相对于其父容器垂直拉伸。 当Height 属性已设置时，此选项无效。
2. Top：在其父容器中将控件对齐到顶部。
3. Center：使控件在其父容器中垂直居中。
4. Bottom：在其父容器内将控件对齐到底部。
在控件上定义Margin 属性将根据父容器的类型相对定位其自身，此处无法解释。

我不清楚您希望如何放置控件，但要回答您的问题：您可以删除控件的 Width、Height、HorizontalAlignment 和 VerticalAlignment 以使其水平拉伸并在您的窗口中垂直。例如：

<Page x:Class="App.Page2"
    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">
    <Grid
        Background="Black">
        <TabControl>
            <TabItem
                Header="TabItem">
                <Grid
                    Background="#FFE5E5E5">
                    <Button
                        Content="Add Item"
                        HorizontalAlignment="Left"
                        Margin="10,135.748,0,0"
                        VerticalAlignment="Top"
                        Width="75" />
                    <Button
                        Content="Remove Item"
                        HorizontalAlignment="Left"
                        Margin="10,177.208,0,0"
                        VerticalAlignment="Top"
                        Width="75" />
                    <Button
                        Content="Update Item"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        Width="75"
                        Margin="10,217.168,0,0" />
                </Grid>
            </TabItem>
            <TabItem
                Header="TabItem">
                <Grid
                    Background="#FFE5E5E5">
                    <Button
                        Content="Add Item"
                        HorizontalAlignment="Left"
                        Margin="10,135.748,0,0"
                        VerticalAlignment="Top"
                        Width="75" />
                    <Button
                        Content="Remove Item"
                        HorizontalAlignment="Left"
                        Margin="10,177.208,0,0"
                        VerticalAlignment="Top"
                        Width="75" />
                    <Button
                        Content="Update Item"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        Width="75"
                        Margin="10,217.168,0,0" />
                </Grid>
            </TabItem>
            <TabItem
                Header="TabItem">
                <Grid
                    Background="#FFE5E5E5">
                    <Button
                        Content="Add Item"
                        HorizontalAlignment="Left"
                        Margin="10,135.748,0,0"
                        VerticalAlignment="Top"
                        Width="75" />
                    <Button
                        Content="Remove Item"
                        HorizontalAlignment="Left"
                        Margin="10,177.208,0,0"
                        VerticalAlignment="Top"
                        Width="75" />
                    <Button
                        Content="Update Item"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        Width="75"
                        Margin="10,217.168,0,0" />
                </Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Page>

只需使用这些属性，您很快就会掌握它的窍门。

【讨论】：

好的，如果我在 xaml 中添加 SizeToContent 并且 VS 说它无法访问，还要说明为什么会出现错误。 SizeToContent 我也没有在代码提示中显示。我正在使用 VS 2013 Ultimate
你在哪里设置的？ SizeToContent 仅适用于 Window 对象。您是否打算根据内容调整窗口大小，但在调整窗口大小时允许调整内容大小？
我用谷歌搜索它，我做错了，我将它添加到页面中，但它只在窗口中有效