[WPF] Unable to click on a button or write in a textbox when using Pivot control

Question

Hi all,

trying to learn to work with the windows phone 7 pivot control, I encounter a strange behaviour.

I have this xaml :

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Canvas Grid.Row="0">
            <TextBox Height="78" HorizontalAlignment="Left" Margin="108,33,0,0" Name="tb" VerticalAlignment="Top" Width="313" />
            <Button Content="Click Me" Height="78" HorizontalAlignment="Left" Margin="127,252,0,0" Name="button1" VerticalAlignment="Top" Width="213" Click="button1_Click" />
        </Canvas>
        <controls:Pivot Name="pivotCtrl" Grid.Row="1">
        <controls:Pivot.ItemTemplate>
            <DataTemplate>
                    <Grid>
                        <TextBlock Height="38" HorizontalAlignment="Left" Margin="29,381,0,0" Name="querytb" VerticalAlignment="Top" Width="200" Text="{Binding}" />
                    </Grid>
            </DataTemplate>
        </controls:Pivot.ItemTemplate>
    </controls:Pivot>
    </Grid>

And I have this code behind :

public partial class MainPage : PhoneApplicationPage
{
    public MainPage()
    {
        InitializeComponent();
    }


    private void button1_Click(object sender, RoutedEventArgs e)
    {
        pivotCtrl.ItemsSource = new List<string> { "abc", "def" };
    }
}

But When launching the emulator, I'm unable to click on the button, or type in the textbox ...

How can I correct that ?

Thanks for you help

Answer 1

You have a row height issue. (Rememeber that the pivot is designed to take up pretty much the full page height.)

If you force the row heights to be large enough to display everything they contain then your button will be clickable:

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Canvas Grid.Row="0">
            <TextBox Height="78" HorizontalAlignment="Left" Margin="108,33,0,0" Name="tb" VerticalAlignment="Top" Width="313" />
            <Button Content="Click Me" Height="78" HorizontalAlignment="Left" Margin="127,252,0,0" Name="button1" VerticalAlignment="Top" Width="213" Click="button1_Click" />
        </Canvas>
        <controls:Pivot Name="pivotCtrl" Grid.Row="1">
            <controls:Pivot.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <TextBlock Height="38" HorizontalAlignment="Left" Margin="29,381,0,0" Name="querytb" VerticalAlignment="Top" Width="200" Text="{Binding}" />
                    </Grid>
                </DataTemplate>
            </controls:Pivot.ItemTemplate>
        </controls:Pivot>
    </Grid>

That will make it clickable, but once you've got that working you'll want to do some major relaying out of the page contents.