Question

The following is a very basic layout for a Windows Phone 8 app. I’ve got a PivotControl with a PivotItem. The header of the PivotControl is outlined in red, while the PivotItem is outlined in green. I’m going to have a Canvas taking up 100% of the PivotItem so I need to be able to calculate it’s dimensions accordingly (because that height/width will determine the size and placement of other controls).

So right now I can calculate the width of my PivotItem with this, where margin is the amount of margin on all four sides (multiplied by 2 for the left and right):

double width = Application.Current.Host.Content.ActualWidth - (margin * 2);

The height is more difficult because I need to take the total screen height and subtract the StatusBar height, and the header height (red rectangle in my image).

Does anyone know how I can get the height of my PivotItem? Is there an easier way than trying to calculate it like I am? Right now the Height and ActualHeight properties are both 0.0.

Answer 1

If I understand correctly, you have a Canvas occupying the whole PivotItem? Something like this:

<phone:Pivot>
    <phone:Pivot.Items>
        <phone:PivotItem Header="menu">
            <Canvas x:Name="Canvas" />
        </phone:PivotItem>
        <phone:PivotItem Header="game" />
    </phone:Pivot.Items>
</phone:Pivot>

If so, retrieving the height of the canvas is quite straightforward:

Debug.WriteLine(this.Canvas.ActualHeight);

Note: the ActualHeight property won’t be populated before the Loaded event. So if you’re trying to read it from the constructor or the OnNavigatedTo method, the property will be equal to 0.

The full XAML code:

<phone:PhoneApplicationPage 
    x:Class="WP7ForumTest.Page3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    Loaded="Page_Loaded">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <phone:Pivot>
                <phone:Pivot.Items>
                    <phone:PivotItem Header="menu">
                        <Canvas x:Name="Canvas" />
                    </phone:PivotItem>
                    <phone:PivotItem Header="game" />
                </phone:Pivot.Items>
            </phone:Pivot>
        </Grid>

</phone:PhoneApplicationPage>

And the code-behind:

private void Page_Loaded(object sender, RoutedEventArgs e)
{
    MessageBox.Show(this.Canvas.ActualHeight.ToString());
}