为什么在网格中以等间距的行/列破坏视图框布局?

Put it simply, I have one Grid with three equally high rows and two buttons. I want to have first button in the first row, then second row empty and finally second button in the third row. This way I get spacing between buttons that is of relative size. I need this rather than hard-coding absolute margin values. So here is the XAML for that:

简单地说，我有一个网格，有三个同样高的行和两个按钮。我想要在第一行中有第一个按钮，然后第二行为空，最后在第三行中有第二个按钮。这样我就可以在相对大小的按钮之间进行间距。我需要这个而不是硬编码绝对空白值。这是XAML

                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Button Grid.Row="0">Button 1</Button>
                    <Button Grid.Row="2">Button 2</Button>
                </Grid>

Works great! Now additional feature I need is to have everything scalable, so I put it in Viewbox:

工作好了!现在我需要的额外功能是让所有东西都可伸缩，所以我把它放在Viewbox中:

            <Viewbox>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Button Grid.Row="0">Button 1</Button>
                    <Button Grid.Row="2">Button 2</Button>
                </Grid>
            </Viewbox>

And suddenly layout is broken. I get the scaling provided by Viewbox but I don't get empty space between buttons. So two questions:

突然间，布局被打破了。我得到了Viewbox提供的缩放比例，但我没有得到按钮之间的空白。这样两个问题:

Why is Viewbox breaking things here?
为什么Viewbox会破坏这里的东西?
How can I workaround this? I need flexibility so imagine I can have arbitrary number of buttons that can be separated by arbitrary number of empty rows/columns in a Grid.
我怎么解决这个问题呢?我需要灵活性，假设我可以有任意数量的按钮，这些按钮可以被网格中任意数量的空行/列分隔。

2 个解决方案

#1

Try this...

试试这个…

     <Viewbox>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition 
                        MinHeight="{Binding Path=ActualHeight,
                                   ElementName=MyButton1}"
                        Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Button Grid.Row="0" x:Name="MyButton1">Button 1</Button>
            <Button Grid.Row="2">Button 2</Button>
        </Grid>
    </Viewbox>

Strictly assuming the buttons are of all same height.

严格假设按钮的高度相同。

And for reason why this happens check this... http://connect.microsoft.com/VisualStudio/feedback/details/403562/wpf-grid-layout-is-broken-when-put-in-viewbox

为什么会发生这种情况，看看这个。http://connect.microsoft.com/VisualStudio/feedback/details/403562/wpf-grid-layout-is-broken-when-put-in-viewbox

#2

Viewbox doesn't work well with percents. In my opinion, I don't recommend the use of Viewbox to "group" all the elements. You should use the Viewbox just for the button text:

在使用百分数时，Viewbox不能正常工作。在我看来，我不建议使用Viewbox来“分组”所有的元素。您应该仅为按钮文本使用Viewbox:

<Window.Resources>
    <Style x:Key="DefaultButton" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="LightGray">
                        <Viewbox>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Viewbox>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <Border>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.3*" />
                <RowDefinition Height="0.3*" />
                <RowDefinition Height="0.3*" />
            </Grid.RowDefinitions>
            <Button Grid.Row="0" Style="{DynamicResource DefaultButton}">Button 1</Button>
            <Button Grid.Row="2" Style="{DynamicResource DefaultButton}">Button 2</Button>
        </Grid>
    </Border>
</Grid>

#1