控件不适合调整 WPF 的大小

Posted 2023-02-24

【中文标题】控件不适合调整 WPF 的大小

【英文标题】：Controls do not fit to form resizing WPF

【发布时间】：2015-06-02 07:30:24

【问题描述】：

我正在尝试创建一个响应式应用程序，我所做的所有努力都没有在新标准 WPF 上给我带来结果。 当表单缩小或展开时，我会确保调整应用程序控件的大小。 正如您从图片中看到的那样，当表单缩小时，项目 3 并不完全可见，因此不适合用户给出的新尺寸。 如何创建可以自动调整控件的应用程序？在正常形式上，我这样做没有问题，但在 WPF 中并不真正了解如何自动适应，尽管阅读了许多教程。谢谢。

代码：

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="SpanCore.MainWindow"
    Title="SpanCore" Height="522" Width="783" MinWidth="400" MinHeight="522">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition />
        <RowDefinition />SpanCoreSpanCore
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
        <Menu Height="21" VerticalAlignment="Top" HorizontalContentAlignment="Stretch" Background="#FFF0EDED" Grid.ColumnSpan="3">
            <MenuItem ToolTip="File" Header="File">
            </MenuItem>
        </Menu>
        <DataGrid HorizontalContentAlignment="Stretch" VerticalAlignment="Top" Grid.ColumnSpan="3" Margin="10,26,10,0" Grid.RowSpan="2">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="h" CanUserResize="False" MinWidth="100" Width="150"/>
                <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="a" CanUserResize="False" MinWidth="100" Width="150"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
    <TabControl Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Width="auto" Height="auto">
        <TabItem Header="tab1">
            <Canvas>
                <DockPanel>
                    <GroupBox Header="item1" Grid.Row="2" Grid.Column="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Height="168" Width="300">
                        <DataGrid>
                            <DataGrid.Columns>
                                <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="S"/>
                                <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="P"/>
                                <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="V"/>
                                <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="P"/>
                                <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="Pa"/>
                                <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="G"/>
                            </DataGrid.Columns>
                        </DataGrid>
                    </GroupBox>
                    <GroupBox Header="item2" Canvas.Left="303" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Height="168" >
                        <DataGrid>
                            <DataGrid.Columns>
                                <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="Book" MinWidth="80"/>

                            </DataGrid.Columns>
                        </DataGrid>
                    </GroupBox>
                    <DockPanel DockPanel.Dock="Right" HorizontalAlignment="Right">
                        <GroupBox Header="item3" Canvas.Left="903" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Width="202" Height="168" DockPanel.Dock="Right" >
                            <Grid>
                                <RadioButton Content="1t" HorizontalAlignment="left" DockPanel.Dock="left"/>
                                <RadioButton Content="2t" HorizontalAlignment="Right" DockPanel.Dock="Right"/>
                            </Grid>
                        </GroupBox>
                    </DockPanel>
                </DockPanel>
            </Canvas>
        </TabItem>
        <TabItem Header="tab2">
        </TabItem>
        </TabControl>
</Grid>

图片示例：

【问题讨论】：

不要使用Canvas，因为它是WPF，而不是Windows Forms。

好的，我已经删除了 Canvas 组件。现在的问题是当窗体调整大小时 item1 和 item2 仍然锚定在左侧，这很好，但我希望这个控件在我展开窗口时必须放大它们的尺寸。

【参考方案1】：

试试下面的代码：

<Window x:Class="WPFDevelopement.SampleWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SampleWindow" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
            <Menu Height="21" VerticalAlignment="Top" HorizontalContentAlignment="Stretch" Background="#FFF0EDED" Grid.ColumnSpan="3">
                <MenuItem ToolTip="File" Header="File">
                </MenuItem>
            </Menu>
            <DataGrid HorizontalContentAlignment="Stretch" VerticalAlignment="Top" Grid.ColumnSpan="3" Margin="10,26,10,0" Grid.RowSpan="2">
                <DataGrid.Columns>
                    <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="h" CanUserResize="False" MinWidth="100" Width="150"/>
                    <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="a" CanUserResize="False" MinWidth="100" Width="150"/>
                </DataGrid.Columns>
            </DataGrid>
        </Grid>
        <TabControl Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Width="auto" Height="auto">
            <TabItem Header="tab1">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="2*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <GroupBox Grid.Column="0" Header="item1" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" MinWidth="300">
                        <DataGrid>
                            <DataGrid.Columns>
                                <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="S"/>
                                <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="P"/>
                                <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="V"/>
                                <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="P"/>
                                <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="Pa"/>
                                <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="G"/>
                            </DataGrid.Columns>
                        </DataGrid>
                    </GroupBox>
                    <GroupBox Grid.Column="1" Header="item2" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
                        <DataGrid>
                            <DataGrid.Columns>
                                <DataGridTextColumn Binding="x:Null" ClipboardContentBinding="x:Null" Header="Book" MinWidth="80" />
                            </DataGrid.Columns>
                        </DataGrid>
                    </GroupBox>
                    <GroupBox Grid.Column="2" Header="item3" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >
                        <StackPanel Orientation="Horizontal">
                            <RadioButton Content="1t" />
                            <RadioButton Content="2t" Margin="8,0" />
                        </StackPanel>
                    </GroupBox>
                </Grid>
            </TabItem>
            <TabItem Header="tab2">
            </TabItem>
        </TabControl>
    </Grid>
</Window>

结果：

对所有 WPF 程序员的最后评论：不要使用 Canvas 并避免硬编码 Width、Height 和其他此类属性。将 Grid 与比例或自动列一起使用。

【讨论】：

好的是一个很好的解决方案。可以对那些彼此相距太远的单选按钮（1t 和 2t）做什么？

删除 HorizontalAlignment 属性或复制更新的示例。

好的，谢谢。我有最后一个问题要问你：当窗口最大化时，item3 超出了正确连接到右侧的边缘，而其他控件 item1 和 item2 在横向模式下没有调整大小。我得到如此不成比例的控制，为什么会发生这种情况？

你可以和<Grid.ColumnDefinitions> 一起玩，就像我在上次更新中所做的那样：<Grid.ColumnDefinitions><ColumnDefinition Width="2*" /><ColumnDefinition Width="*" /><ColumnDefinition Width="Auto" /></Grid.ColumnDefinitions>