Making Stylish ListPicker in Wp8

Making Stylish ListPicker

Here I am Explaining With List of Object assign to ListPicker.

Here Xaml Code :-

add the namespace to the Xaml Page like below :-

 xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"


this is List Picker :-

<toolkit:ListPicker x:Name="lpkCategory" Margin="120,-20,10,-24"
  ItemsSource="{Binding Category}"                              Grid.Row="5"      Canvas.ZIndex="220" Width="200" SelectionChanged="lpkCategory_SelectionChanged" Foreground="Teal"  ExpansionMode="FullScreenOnly" >
                    <toolkit:ListPicker.ItemTemplate>
                        <DataTemplate>
                            <Border Width="200" Background="BlueViolet" Margin="10,10,10,10" >
                                <TextBlock Text="{Binding categoryName}" Margin="10,10,10,10"/>
                            </Border>
                        </DataTemplate>
                    </toolkit:ListPicker.ItemTemplate>
                    <toolkit:ListPicker.FullModeItemTemplate>
                        <DataTemplate>
                            <Border Width="200" Background="BlueViolet" Margin="10,10,10,10" >
                                <TextBlock Text="{Binding categoryName}" Margin="10,10,10,10"/>
                            </Border>
                        </DataTemplate>
                    </toolkit:ListPicker.FullModeItemTemplate>
                </toolkit:ListPicker>


Expecting Problems :-

ZIndex :- Some times Listpicker items not appear when it expands so  make sure ur ZIndex Sets High .

like Below Canvas.ZIndex ="220"

Display Item Name : While Displaying Item name in Listpicker It shows Listpicker Property  .
for this we need to check the  ListPicker.ItemTemplate and ListPicker.FullModeItemTemplate

class :-

 public  class Category
    {
         
       
        public int categoryId { get; set; }
     
        public string categoryName { get; set; }
       
    }

 Category = objdbhelper.GetCategory();
  // Make sure here Category  is same mentioned in Xaml like  ItemsSource="{Binding Category}"

lpkCategory.ItemsSource = Category;
lpkCategory.SelectedIndex = 0;


//Display different Design Styles Item i have used Border tags in DataTemplate like below in above Xaml  page .

<DataTemplate>
       <Border Width="200" Background="BlueViolet" Margin="10,10,10,10" >
       <TextBlock Text="{Binding categoryName}" Margin="10,10,10,10"/>
       </Border>
 </DataTemplate>

Output like below :-