Answered Why does the image not show up in row 1

simsenVejle

Well-known member
Joined
Feb 14, 2021
Messages
46
Programming Experience
Beginner
I'm totally new into WPF, so I hope for som help.

I have the image, which I have set to Grid.Row="1" Grid.Column="4" - The column is ok in the 5. position. But the row show up as in the bottom of row 4 as You can see on the picture. What I am doing wrong?

Best Regards
SimsenVejle :)
C#:
<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>
 

Attachments

  • WpfImagePosition.jpg
    WpfImagePosition.jpg
    27.2 KB · Views: 17
Solution
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.

Since the OP didn't say were they want the image to appear, so I'm going to assume they want it aligned beside the Super Demo textblock...

Notice in the code above :
C#:
<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...
Image VerticalAlignment is Stretch by default, try Top.
 
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.

Since the OP didn't say were they want the image to appear, so I'm going to assume they want it aligned beside the Super Demo textblock...

Notice in the code above :
C#:
<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.
So what if there are no more rows to span over?
Or what if you have to many row definitions and you aren't spanning over an adequate portion of the many definitions defined?

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.

Anyway, if you want to "push" the image upwards? You are setting the image to have a row span of 6, where a lower integer would be a better value for the given amount of defined rows. Try set it to 4. With your current setting, this might also push the lower rows down further. This will happen despite setting VerticalAlignment="Top" or any other alignment property.

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.

Sample output :
Screenshot_20.jpg

I will mark this as answered. If you have any questions as to the why's and how's, let us know.
 
Solution
Back
Top Bottom