Using a .xaml page as PivotItem Content

[Kunal Prime]

Hi all,

I have a pivot page and a Tools.xaml file. Tools.xaml file is associated with a code behind Tools.xaml.cs and its ViewModel ToolsViewModel.cs. Now i want to use Tools.xaml in one of my PivotItem.Content by persisting its associations with code behind and ViewModel. Is this possible. If yes how?

What i tried.?
I looked for possibility of using a xaml file as PivotItem.Content but for that all my xaml code should be embedded in UserControl tag after which i could not use any data bindings.

Please help.

Regards

[to_pe]

And how is your Tools.xaml formed if not as a UserControl already?

You can add user controls as a child element to a Pivot Item with bindings intact. Why should they be of any problem? Simply set its DataContext to an instance of ToolsViewModel and you are done.

[Loukt]

Hi all,

I have a pivot page and a Tools.xaml file. Tools.xaml file is associated with a code behind Tools.xaml.cs and its ViewModel ToolsViewModel.cs. Now i want to use Tools.xaml in one of my PivotItem.Content by persisting its associations with code behind and ViewModel. Is this possible. If yes how?

What i tried.?
I looked for possibility of using a xaml file as PivotItem.Content but for that all my xaml code should be embedded in UserControl tag after which i could not use any data bindings.

Please help.

Regards

Hello I've just made a little sample to confirm that it is possible (with databinding too).


I created a pivot page and changed the phone:PhoneApplicationPage to UserControl (in xaml and cs files)

<UserControl
    x:Class="AppTesting.ControlPivot"
    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"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    shell:SystemTray.IsVisible="True" >

    <!--LayoutRoot est la grille racine où tout le contenu de la page est placé-->
    <Grid x:Name="LayoutRoot" Background="#50000000">
        <!--Contrôle Pivot-->
        <phone:Pivot Title="MON APPLICATION">
            <!--Élément un de tableau croisé dynamique-->
            <phone:PivotItem Header="item1">
                <Grid>
                    <phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding}">
                        <phone:LongListSelector.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Margin="0,0,0,17">
                                    <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                    <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                </StackPanel>
                            </DataTemplate>
                        </phone:LongListSelector.ItemTemplate>
                    </phone:LongListSelector>
                </Grid>
            </phone:PivotItem>

        </phone:Pivot>
    </Grid>
    
</UserControl>

Then in my Main Pivot Page just called the UserControl and binded my items using DataContext

<phone:PhoneApplicationPage
    x:Class="AppTesting.MainPage"
    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" xmlns:AppTesting="clr-namespace:AppTesting"
    mc:Ignorable="d"
    d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot est la grille racine où tout le contenu de la page est placé-->
    <Grid x:Name="LayoutRoot" Background="Transparent">

       <!--Contrôle Pivot-->
        <phone:Pivot Title="MON APPLICATION">
            <!--Élément un de tableau croisé dynamique-->
            <phone:PivotItem Header="first">
                <!--Liste double trait avec habillage du texte-->
                <phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding Items}">
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="0,0,0,17">
                                <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                            </StackPanel>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </phone:PivotItem>

            <phone:PivotItem Header="Test">
            
                    <AppTesting:ControlPivot DataContext="{Binding Items}" />
                
            </phone:PivotItem>

            <!--Élément deux de tableau croisé dynamique-->
            <phone:PivotItem Header="second">
                <!--Liste double trait, aucun habillage du texte-->
                <phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding Items}">
                    <phone:LongListSelector.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Margin="0,0,0,17">
                                    <TextBlock Text="{Binding LineOne}" TextWrapping="NoWrap" Margin="12,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                    <TextBlock Text="{Binding LineThree}" TextWrapping="NoWrap" Margin="12,-6,0,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                </StackPanel>
                            </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </phone:PivotItem>
        </phone:Pivot>

        <!--Supprimez les commentaires pour voir une grille d'alignement qui vous aidera à vous assurer que vos contrôles sont
            alignés sur les limites communes.  L'image a une marge supérieure de -32px pour
            tenir compte de la barre d'état système. Attribuez-lui la valeur 0 (ou supprimez la marge)
            si la barre d'état système est masquée.

            Avant l'envoi, supprimez ce XAML et l'image proprement dite.-->
        <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" IsHitTestVisible="False" />-->
    </Grid>

</phone:PhoneApplicationPage>

[Kunal Prime]

Hi Loukt and to_pe,

Sorry my bad. I did not change PhoneApplicationPage to UserControl in my .cs file. Thanks a ton for pointing that out loukt.
Did that and it works seamless.

One more question. It might seem silly but just want to be sure. Now since we are using UserControl as base class for Tools.cs, i can not override OnBackKeyPress, OnNavigatedTo etc. So i need to handle these in Pivot Page .cs file depending on currently visible pivot item right??

Regards

[Loukt]

One more question. It might seem silly but just want to be sure. Now since we are using UserControl as base class for Tools.cs, i can not override OnBackKeyPress, OnNavigatedTo etc. So i need to handle these in Pivot Page .cs file depending on currently visible pivot item right??

Exactly you will handle it depending on the currently visible pivot using the SelectedIndex Property
PS: don't forget to cancel the event if you're on that pivot index, else you'll exit the page

protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
        {
            if( YourPivot.SelectedIndex == thatPivotIndex )
            {
                    //do what you want
                    e.Cancel = true;
            }
            base.OnBackKeyPress(e);
        }

[Kunal Prime]

Hi Loukt,

Thanks a lot. Everything works like charm now.

Regards

[Kunal Prime]

Hi All,

Can i dynamically replace Tools.xaml with some other xaml page as PivotItem Content from code??

Regards

[to_pe]

Of course. Simply set PivotItem.Content to a new instance of some user control.

[Kunal Prime]

Hi to_pe,

But how do i read my .xaml file at runtime. Its BuildAction is set to Page since it is associated with a .xaml.cs file..

Regards

[Loukt]

But how do i read my .xaml file at runtime. Its BuildAction is set to Page since it is associated with a .xaml.cs file..

No, you can't replace a control with a page, only UserControls.
Just use the usercontrol name (add a reference to it's namespace before) (pivotItem.Content = new YourUserControl(); )

[Kunal Prime]

Oh boy. It was so easy and i was hunting from yest for this. :P That's why basics are so necessary.

Thanks Loukt.

Regards