ActualWidth and ActualWidth is 0

Question

First of all YES I've read all the suggested "Questions that may already have your answer", so I belive this is not a dublicate.

I have this grid on a Page:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="70"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="Please sign below." Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Image x:Name="SignImage" />
    </Grid>
    <Grid Background="Transparent" Grid.Row="2" Margin="12,0,10,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="120"/>
            <ColumnDefinition Width="120"/>
            <ColumnDefinition Width="10"/>
        </Grid.ColumnDefinitions>

        <Button x:Name="ClearButton" Content="Clear" Grid.Column="1"/>
        <Button x:Name="OkButton" Content="Ok" Grid.Column="2"/>
    </Grid>
</Grid>

Then this CodeBehind:

public MainPage()
{
    InitializeComponent();
    this.Loaded += MainPage_Loaded;
    // Sample code to localize the ApplicationBar
    //BuildLocalizedApplicationBar();
}

....

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
  MessageBox.Show($"SignImage.ActualWidth: {SignImage.ActualWidth}, SignImage.ActualWidth: {SignImage.ActualWidth} ");
}

The problem is that the size of my Image is 0 (zero).

How do I make my Image fill out the cell I've placed it in?

Answer 1

First there is difference between * and Auto. Please do check the size of the main grid. "*" means stretch to fill the available space, and is a fraction, so if one row is * and the other row is 2* then the second row will be twice the size of the first row.

Auto means it takes whatever/or only space it needs.

If you have set the size of whole Grid to a small height then there will be a problem. Set the MinHeight for the Main Grid component.

Second you have not set the image for SignImage with a size which mean you will obviously get ActualWidth and ActualHeight as Zero. The image tag is empty in which no Source is set.

<Image x:Name="SignImage" Source="C:\Users\Administrator\Pictures\user-thumbnail.png"/>

Check after setting the image source if you are getting the ActualWidth and ActualHeight

Have a look at this image I have written your code. You can see that for Grid 0 and 2 there is Height set for Grid 1 there is no Height set as you have written * for it so it is necessary to set the height to parent.

Now look at this image I have set the height for the parent element as 200 and hence you can see the Gird 1 is visible and the height is not 0.

So it is necessary to set the height or set the image source for the height not to be zero.