Question

使用WPF，我有一个窗口，其中装有一个网格。当前，该网格具有一行和三列，每个单元格都填充有相同的UserControl。未来的版本可能会向网格中添加更多行。

我要使窗口具有网格的大小。

<Window
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns: ...
    ...
    mc:Ignorable="d"
    d:DesignHeight="600" d:DesignWidth="600"
    Title="MainWindow" Height="600" Width="600">

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

    <View:ImageView Grid.Row="0" Grid.Column="0" DataContext="..."/>
    <View:ImageView Grid.Row="0" Grid.Column="1" DataContext="..."/>
    <View:ImageView Grid.Row="0" Grid.Column="2" DataContext="..."/>
</Grid>

窗口的宽度为600。网格将延伸到该窗口。它将具有大约600的宽度。网格将具有三列具有相同的宽度，大约为200。每个单元格中的ImageView将拉伸以填充该单元格。每个单元格的宽度大约为200。

这确定了单元格的高度，从而确定了网格的高度。

添加：评论后，我不想调整窗口大小。在决定应显示的内容以及控件应具有的良好显示大小之后，就无需调整其大小。

为了进行调试，看看会发生什么，我调整了主窗口的大小，并记录了各种高度/宽度/ ActualHeight / ActualWidth值的变化。

我注意到网格已调整大小，因此其宽度正好填满了窗口的宽度。调整大小还会调整单元格和单元格中ImageViews的大小。

高度不适合这种情况。我可以使“高度”窗口高于和低于网格的高度。

我想设置窗口的高度，使其恰好位于网格周围。

我希望这样：

<Window ... Width = "600" Height = "auto" />

不是，高度远远超过应该的高度，大约在1000左右。网格仍然是300 x 600。

<Window ... Width = "600" Height = "*" />

这导致异常。

也许具有约束力？像这样吗？

<Window ... Width = "600" Height = "{Binding Height, ElementName=MainGrid, Mode=OneWay}"/>
<Window ... Width = "600" Height = "{Binding ActualHeight, ElementName=MainGrid, Mode=OneWay}"/>

不，仍然很大。

那么，如何确保窗口恰好位于网格周围？

Answer 1

从窗口中删除Height并将SizeToContent设置为Height。但是，这只会设置您最初期望的宽度和高度，不会调整大小。

<Window
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns: ...
    ...
    mc:Ignorable="d"
    d:DesignHeight="600"
    d:DesignWidth="600"
    Title="MainWindow"
    Width="600"
    SizeToContent="Height">

如果要按您所描述的那样调整窗口的大小，则意味着要保持宽高比，并且这很难解决而不会产生意想不到的效果，或者必须将缩放大小限制为仅沿水平方向，这也不是小事。您可以看看这些相关问题。

当然，您也可以侦听窗口的调整大小事件并在那里进行自定义处理，但是这种方法以及上面的方法可能会损害您的用户体验并可能带来不想要的效果，因此建议重新访问布局可能更可取概念。

Answer 2

正如@thatguy所说，您所要求的很难做得很好。通常，您不希望代码在用户调整窗口大小之后尝试调整窗口大小，因为您会在用户尝试执行的操作与代码想要执行的操作之间发生冲突。

如果您不希望剪切图像并希望它们尽可能地填充窗口，那仍然给您提供一些选择，我想这就是您要的。

1 /您可以保持图像的高宽比，调整图像的大小以在一个方向或另一个方向上充满屏幕，并接受可以得到空格的方法： 2 /您可以拉伸图像以填充可用空间，因此在调整大小时始终填充整个窗口，但会失去宽高比：这些的代码如下。保持宽高比：

<Window x:Class="ImageResizeTest.MainWindow"
        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"
        xmlns:local="clr-namespace:ImageResizeTest"
        mc:Ignorable="d"
        Title="MainWindow" Width="600" Height="110">
    <Grid Name="MainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Image Grid.Row="0" Grid.Column="0" Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />
        <Image Grid.Row="0" Grid.Column="1" Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />
        <Image Grid.Row="0" Grid.Column="2" Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />
    </Grid>
</Window>

拉伸图像以填充：

<Window x:Class="ImageResizeTest.MainWindow"
        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"
        xmlns:local="clr-namespace:ImageResizeTest"
        mc:Ignorable="d"
        Title="MainWindow" Width="600" Height="110">
    <Grid Name="MainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Image Grid.Row="0" Grid.Column="0" Stretch="Fill" Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />
        <Image Grid.Row="0" Grid.Column="1" Stretch="Fill" Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />
        <Image Grid.Row="0" Grid.Column="2" Stretch="Fill" Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />
    </Grid>
</Window>

WPF：如何将窗口高度设置为等于网格高度

2 个答案: