×

Discussion Board

Results 1 to 11 of 11

Hybrid View

  1. #1
    Registered User
    Join Date
    Mar 2013
    Location
    Goa, India
    Posts
    32

    Exclamation Using a .xaml page as PivotItem Content

    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

  2. #2
    Registered User
    Join Date
    Dec 2012
    Location
    Zagreb, Croatia
    Posts
    73

    Re: Using a .xaml page as PivotItem Content

    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.

  3. #3
    Nokia Developer Champion
    Join Date
    Sep 2012
    Location
    Morocco
    Posts
    297

    Re: Using a .xaml page as PivotItem Content

    Quote Originally Posted by Kunal Prime View Post
    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)
    Code:
    <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

    Code:
    <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>

  4. #4
    Registered User
    Join Date
    Mar 2013
    Location
    Goa, India
    Posts
    32

    Re: Using a .xaml page as PivotItem Content

    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

  5. #5
    Nokia Developer Champion
    Join Date
    Sep 2012
    Location
    Morocco
    Posts
    297

    Re: Using a .xaml page as PivotItem Content

    Quote Originally Posted by Kunal Prime View Post
    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
    Code:
    protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
            {
                if( YourPivot.SelectedIndex == thatPivotIndex )
                {
                        //do what you want
                        e.Cancel = true;
                }
                base.OnBackKeyPress(e);
            }

  6. #6
    Registered User
    Join Date
    Mar 2013
    Location
    Goa, India
    Posts
    32

    Re: Using a .xaml page as PivotItem Content

    Hi Loukt,

    Thanks a lot. Everything works like charm now.

    Regards

  7. #7
    Registered User
    Join Date
    Mar 2013
    Location
    Goa, India
    Posts
    32

    Re: Using a .xaml page as PivotItem Content

    Hi All,

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

    Regards

Similar Threads

  1. Accordion for content on a Page
    By mundic in forum Qt
    Replies: 2
    Last Post: 2012-07-10, 13:49
  2. Content of this page corrupted
    By Sahrear in forum Automatic Feedback Channel
    Replies: 3
    Last Post: 2010-03-29, 16:23
  3. Displaying the content of a web page
    By avi1000 in forum Mobile Java General
    Replies: 5
    Last Post: 2007-09-07, 19:57
  4. How to display the content on same page?
    By youzx in forum Browsing and Mark-ups
    Replies: 5
    Last Post: 2007-08-31, 01:07
  5. unsupport content page
    By auwuisien in forum Browsing and Mark-ups
    Replies: 0
    Last Post: 2006-09-20, 10:02

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×