0

I tried to use a grid (inside a grid)

<Grid HorizontalAlignment="Stretch" Background="#2f1807" Grid.Column="1" Grid.Row="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="71"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="505"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Image Source="Assets/logo.png" Height="71" Width="505" Grid.Column="1" Grid.Row="0" Stretch="None" />
</Grid>

The image has a height of 71 pixels and width of 505 pixels. and this is the output: enter image description here So the horizontal center worked, but no vertical and the image width should fill up the whole cell. Why is this not working?

the output of uniform:

enter image description here

image prop (sorry for the dutch language) size is 505 width and 71 px height.

enter image description here

edit as @YoupTube suggests:

<Image 
    Source="Assets/logo.png" 
    Height="71" 
    Width="505" 
    Grid.Column="1" 
    Grid.Row="0" 
    MinWidth="505" 
    MinHeight="71" 
    VerticalAlignment="Center" />

gives:

enter image description here

1
  • Can you post the outer grid row definitions as well please? looks like something else is causing the layout issues for this grid.
    – Krishna
    Jul 28, 2014 at 10:53

2 Answers 2

5

Your problem is that you have restricted the Height of the Grid so that it is the same size as the Image. The solution is to remove the Height setting on the RowDefinition (or remove the whole RowDefinition) and let the Grid fill the space of its parent container... then the Image can be centred vertically:

<Grid HorizontalAlignment="Stretch" Background="#2f1807" Grid.Column="1" Grid.Row="0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="505"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Image Source="Assets/logo.png" Height="71" Width="505" Grid.Column="1" 
        Grid.Row="0" Stretch="None" HorizontalAlignment="Center"
        VerticalAlignment="Center" />
</Grid>

UPDATE >>>

In order for your Image to be centred vertically, it must be in a container that has a larger Height value than the Image. I see that your Grid is in another Grid... if the Image takes the whole Height of this Grid, then you must put this Grid into a container that has more Height than this Grid and centre that instead:

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="#2f1807" 
    Grid.Column="1" Grid.Row="0" MinHeight="150">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="505"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Image Source="Assets/logo.png" Height="71" Width="505" Grid.Column="1" 
        Grid.Row="0" Stretch="None" HorizontalAlignment="Center"
        VerticalAlignment="Center" />
</Grid>
1
0

Shouldn't you just have to set:

<Image VerticalAlignment="Center" ... />
1
  • I have updated the question with your suggestion. though thanks for your time and effort! :) Jul 28, 2014 at 11:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.