ActualHeight and ActualWidth of object is always zero

Question

I have a Canvas with a TextBlock like so:

<Canvas x:Name="ContentPanel" Grid.Row="1" DoubleTapped="ContentPanel_DoubleTapped">
        <TextBlock x:Name="WordBlock" FontSize="226.667" FontFamily="Segoe UI Semilight" TextAlignment="Center"
                   RenderTransformOrigin="0.5, 0.5">
            <TextBlock.RenderTransform>
                <TranslateTransform x:Name="translate"/>
            </TextBlock.RenderTransform>
        </TextBlock>
    </Canvas>

My app is such that when the user navigates to this page, the TextBlock will be centered in the Canvas and if the TextBlock's width is greater than that of the canvas, the marquee animation will occur:

private void SetAnimation()
{
    Canvas.SetLeft(WordBlock, (ContentPanel.ActualWidth - WordBlock.ActualWidth) / 2);
    Canvas.SetTop(WordBlock, (ContentPanel.ActualHeight - WordBlock.ActualHeight) / 2);

    if (WordBlock.ActualWidth > ContentPanel.ActualWidth)
    {
        MarqueeAnimation.From = WordBlock.ActualWidth;
        MarqueeAnimation.To = -WordBlock.ActualWidth;
        MarqueeAnimation.Duration = new Duration(new TimeSpan(0, 0, 10));
        MarqueeBoard.Begin();
    }
}

This method is called OnNavigatedTo. I can't figure out why the TextBlock won't center because the ActualHeight and ActualWidth properties are always coming back as 0.0. I don't want to put fixed sizes because this is a Windows Store app and would like for it to be scalable across different screen sizes.

Any ideas? I'm stuck.

Answer 1

When OnNavigatedTo is called I don't believe the page has actually been drawn yet. I had similar confusion when trying to resize and rearrange things. The answer appeared to be to wait until the page has loaded and do the calculation then:

public ChallengePage()
{
  this.InitializeComponent();
  this.Loaded += ChallengePage_Loaded;
}

void ChallengePage_Loaded(object sender, RoutedEventArgs e)
{
  *Do your calculations which use ActualWidth and ActualHeight in here*
}

You'll need something like that I believe. Adding the Loaded handler into your initialize for the page, and then you can call SetAnimation from in there.