My windows phone app keeps crashing before startup and I have only done the ui so far

Question

I have been trying to make an app for windows phone 8.1 I decided that I would use a hub template. I have designed my app and now when I try to run it an exeption is thrown everytime. This has extremely confused me because I did all the designing with vs own controls and havent written any of my own xaml. But I get a windows.UI.Xaml.UnhandledException any help on this would be really great this is one of the first apps I've made for windows phone so I am fairly new on the subject. Here is the xaml if it is any use.

<Page
    x:Class="AttemptAtHub.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AttemptAtHub"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <ControlTemplate x:Key="HubSectionControlTemplate1" TargetType="HubSection">
            <Grid>
                <TextBox x:Name="tbHours" HorizontalAlignment="Left" Margin="8,160,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" InputScope="Number" Width="87" PlaceholderText="   hrs"/>
                <TextBox x:Name="tbMinutes" HorizontalAlignment="Left" Margin="109,160,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" InputScope="Number" PlaceholderText="   min" Width="87"/>
                <TextBlock x:Name="tblk_" HorizontalAlignment="Left" TextWrapping="Wrap" Text=":" VerticalAlignment="Top" FontSize="21.333" Margin="101,163,0,0"/>
                <TextBlock HorizontalAlignment="Left" Margin="8,205,0,0" TextWrapping="Wrap" Text="Work date" VerticalAlignment="Top" FontSize="13.333"/>
                <DatePicker HorizontalAlignment="Left" Margin="8,216,0,0" VerticalAlignment="Top" Width="133"/>
                <AppBarButton HorizontalAlignment="Left" Icon="Add" Label="" Margin="132,213,0,0" VerticalAlignment="Top" Height="59"/>
                <TextBlock x:Name="hdrAddHours" HorizontalAlignment="Left" Margin="20,110,0,0" Style="{StaticResource ControlHeaderTextBlockStyle}" TextWrapping="Wrap" Text="Add Hours" VerticalAlignment="Top"/>
            </Grid>
        </ControlTemplate>
        <ControlTemplate x:Key="HubSectionControlTemplate2" TargetType="HubSection">
            <Grid>
                <TextBlock x:Name="hdrWage" HorizontalAlignment="Left" Margin="20,95,0,0" Style="{StaticResource ControlHeaderTextBlockStyle}" TextWrapping="Wrap" Text="Wage" VerticalAlignment="Top" Foreground="White" FontSize="18.667"/>
                <TextBlock HorizontalAlignment="Left" Margin="8,150,0,0" TextWrapping="Wrap" Text="Working hour rate" VerticalAlignment="Top" FontSize="13.333"/>
                <TextBlock HorizontalAlignment="Left" Margin="8,175,0,0" TextWrapping="Wrap" Text="$" VerticalAlignment="Top" FontSize="21.333"/>
                <TextBox x:Name="tbWage" HorizontalAlignment="Left" Margin="26,170,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" InputScope="Number" PlaceholderText="   0.00" Width="89"/>
                <AppBarButton HorizontalAlignment="Left" Icon="Add" Label="" Margin="109,159,0,0" VerticalAlignment="Top"/>
            </Grid>
        </ControlTemplate>
    </Page.Resources>

    <Grid>
        <Hub x:Name="Hub" Header="Hours+" Background="{ThemeResource PhoneAccentBrush}">
            <HubSection x:Name="sctnAddHours" Template="{StaticResource HubSectionControlTemplate1}" Header="Add Hours">
                <DataTemplate>
                    <Grid/>
                </DataTemplate>
            </HubSection>
            <HubSection x:Name="sctnExpenses" Header="AddExpenses">
                <HubSection.Resources>
                    <ControlTemplate x:Key="HubSectionControlTemplate2" TargetType="HubSection">
                        <Grid>
                            <TextBlock x:Name="hdrAddExpenses" HorizontalAlignment="Left" Margin="20,110,0,0" Style="{StaticResource ControlHeaderTextBlockStyle}" TextWrapping="Wrap" Text="Add Expenses" VerticalAlignment="Top"/>
                            <TextBlock x:Name="tblk_" HorizontalAlignment="Left" Margin="8,156,0,0" TextWrapping="Wrap" Text="$" VerticalAlignment="Top" FontSize="21.333"/>
                            <TextBox x:Name="tbExpense" HorizontalAlignment="Left" Margin="30,150,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" InputScope="Number" PlaceholderText="   0.00" Width="89"/>
                            <TextBlock HorizontalAlignment="Left" Margin="8,200,0,0" TextWrapping="Wrap" Text="Expense date" VerticalAlignment="Top" FontSize="13.333"/>
                            <DatePicker HorizontalAlignment="Left" Margin="8,215,0,0" VerticalAlignment="Top"/>
                            <TextBlock HorizontalAlignment="Left" Margin="8,270,0,0" TextWrapping="Wrap" Text="Expense date" VerticalAlignment="Top" FontSize="13.333"/>
                            <TextBox x:Name="tbNotes" HorizontalAlignment="Left" Margin="8,290,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="260"/>
                            <AppBarButton HorizontalAlignment="Left" Icon="Add" Label="" Margin="255,277,0,0" VerticalAlignment="Top"/>
                        </Grid>
                    </ControlTemplate>
                </HubSection.Resources>
                <HubSection.Template>
                    <StaticResource ResourceKey="HubSectionControlTemplate2"/>
                </HubSection.Template>
                <DataTemplate>
                    <Grid/>
                </DataTemplate>
            </HubSection>
            <HubSection x:Name="sctnWage" Header="Set wage" Height="640" Template="{StaticResource HubSectionControlTemplate2}">
                <DataTemplate>
                    <Grid/>
                </DataTemplate>
            </HubSection>
        </Hub>

    </Grid>
</Page>

thank you again for any help.

Answer 1

You are replacing the Template of your HubSection.

The ControlTemplate of the HubSection itself by setting

<HubSection Template="{...}">...</HubSection>

This Template is required to have a CompositeTransform with Name "WrappingTransform" on it's root element for the Hub Control to work properly.

You really only want to set the HubSections child DataTemplate.

<HubSection Header="Add Hours">
    <DataTemplate>...</DataTemplate>
</HubSection>

It may be a little confusing that the Content of the HubSection is a DataTemplate, but keep in mind that is the Content Property (aka what is inside the HubSection) and not the Template Property (aka the appearance of the HubSection itself, its borders, spacing, etc.) you want to modify.