已回答 为什么图像未显示在第1行

[SimsenVejle]

我对WPF完全陌生，所以希望对Som有帮助。

我有图像，已将其设置为Grid.Row ="1" Grid.Column="4"-该列在5.位置正常。但是该行显示在第4行的底部，如图所示。我做错了什么？

最好的祝福
SimsenVejle

<Window x:Class="WPFDemo.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:WPFDemo"
        mc:Ignorable="d" FontFamily="Verdana" FontSize="16"
        Title="Our WPF Demo" Height="481.204" Width="860.766">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20" />
            <!--Her er kanten så det ikke går helt ud til-->
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="auto" />
            <!--* betyder at den tager resten af pladsen på formen-->
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="20" />
            <!--Samme som coulumns-->
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="20" />
        </Grid.RowDefinitions>

        <!--Kun et tal ved margin fortæller at det er alle 4 marginer
            1. tal er left, 2. tal er top, 3. tal er right og 4. er buttom-->
        <TextBlock Grid.Column="1" Grid.Row="1" Text="WPF Super Demo"
                   FontSize="28" Grid.ColumnSpan="3" Margin="0,0,0,20" />

        <TextBlock Grid.Column="1" Grid.Row="2" Text="First Name" />
        <TextBox x:Name="txtFirstName" Grid.Column="2" Grid.Row="2" Width="150" />

        <ComboBox x:Name="CmbMy" Grid.Column="1" Grid.Row="3" Grid.ColumnSpan="2" Margin="10">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding FullName}" />
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>

        <Button x:Name="BtnSubmit" Content="Run Me" Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="2" Margin="10" Click="BtnSubmit_Click" />

        

        <Image MaxHeight="200" MaxWidth="200" Grid.Row="1" Grid.Column="4" Grid.RowSpan="6" Source="C:\3Billeder\20210131-01.jpg" />
        
    </Grid>
</Window>

 

[约翰·H]

图像的VerticalAlignment默认为“拉伸”，请尝试“顶部”。

 

[羊皮]

The Vertical and Horizontal Alignments aren't the best setting to use when the GridRow/ColumnDefinitions use "*" over the nested controls set grid positions/spans. If the <RowDefinition Height="*" /> was set to auto, the Vertical/Horizontal properties would not be needed inline on whatever object you place within that grid definition.

由于OP没有说他们是否希望图像出现，所以我假设他们希望图像在Super Demo文本块旁边对齐...

注意上面的代码：

<Image MaxHeight="200" MaxWidth="200" Grid.Row="1" Grid.Column="4" Grid.RowSpan="6" Source="C:\3Billeder\20210131-01.jpg" />

You have Grid.Row="1" and Grid.RowSpan="6" - The GridRowSpan will allow your image to span 6 other rows over from its current position.
那么，如果没有更多行可以跨越呢？
或者，如果您有许多行定义，而又没有覆盖定义的许多定义中的足够部分，该怎么办？

Both of the above questions can effect your alignment when using "*" in your grid definitions, and that's why when you work with the grid control, you should only add grids definitions if they are absolutely needed and use the auto property where possible. When you set the Auto property on your Grid Definitions, you eradicate the need to be specific with setting object positions and alignment properties on whatever control you are using in that defined grid.

无论如何，如果你想"推"图像向上？您将图像设置为具有6的行跨度，其中对于给定的已定义行数，较低的整数将是更好的值。尝试将其设置为4。使用当前设置，这也可能会将较低的行进一步向下推。尽管设置VerticalAlignment ="Top"或任何其他对齐属性。

Its my opinion that the correct thing to do, would be to change : <RowDefinition Height="*" /> to : <RowDefinition Height="auto" /> and what you will notice is that you no longer need to set any horizontal/vertical alignments on your controls at all. That's because the alignment is being handled automatically by that rows definition property : <RowDefinition Height="auto" />. If you want to add some spacing between your picture and the grids defined parameter border, you can add a margin : Margin="8" to give you that little extra spacing.

样本输出：


我将其标记为已回答。如果您对原因和方式有任何疑问，请告诉我们。