- Back to Home »
- Windows store apps C#/XAML »
- Windows phone 8 apps using common template for all longlistselectors in pivot app xaml c#
Posted by :
Sudhir Chekuri
Wednesday, 20 November 2013
In this example i created a template with grid and textblock to use it in 2 longlist selectors in pivot app.
XAML code with template in pivot page
<phone:PhoneApplicationPage
x:Class="PivotApp1.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"
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">
<phone:PhoneApplicationPage.Resources >
<DataTemplate x:Key="GridTemplate">
<Grid Background="{StaticResource PhoneAccentBrush}" Margin="5">
<StackPanel VerticalAlignment="Bottom" Margin="5">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap"/>
</StackPanel>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<phone:Pivot Title="MY APPLICATION">
<!--Pivot item one-->
<phone:PivotItem Header="first">
<!--Double line list with text wrapping-->
<phone:LongListSelector LayoutMode="Grid" GridCellSize="180,180"
Margin="0,0,-12,0" ItemsSource="{Binding Items}"
ItemTemplate="{StaticResource GridTemplate}"
>
</phone:LongListSelector>
</phone:PivotItem>
<!--Pivot item two-->
<phone:PivotItem Header="second">
<!--Double line list no text wrapping-->
<phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding Items}"
GridCellSize="150,150"
LayoutMode="Grid"
ItemTemplate="{StaticResource GridTemplate}">
</phone:LongListSelector>
</phone:PivotItem>
</phone:Pivot>
</Grid>
</phone:PhoneApplicationPage>
XAML code with template in pivot page
<phone:PhoneApplicationPage
x:Class="PivotApp1.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"
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">
<phone:PhoneApplicationPage.Resources >
<DataTemplate x:Key="GridTemplate">
<Grid Background="{StaticResource PhoneAccentBrush}" Margin="5">
<StackPanel VerticalAlignment="Bottom" Margin="5">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap"/>
</StackPanel>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<phone:Pivot Title="MY APPLICATION">
<!--Pivot item one-->
<phone:PivotItem Header="first">
<!--Double line list with text wrapping-->
<phone:LongListSelector LayoutMode="Grid" GridCellSize="180,180"
Margin="0,0,-12,0" ItemsSource="{Binding Items}"
ItemTemplate="{StaticResource GridTemplate}"
>
</phone:LongListSelector>
</phone:PivotItem>
<!--Pivot item two-->
<phone:PivotItem Header="second">
<!--Double line list no text wrapping-->
<phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding Items}"
GridCellSize="150,150"
LayoutMode="Grid"
ItemTemplate="{StaticResource GridTemplate}">
</phone:LongListSelector>
</phone:PivotItem>
</phone:Pivot>
</Grid>
</phone:PhoneApplicationPage>
PivotGrid control data binding to xmla in C#
ReplyDelete