Introduction

Generally it is not possible to showing default listbox scrollviewer in windows phone,it will be showing only if user scroll the listbox item.And so we may need to make customizable scrollbar in some requirement.And it is best practice for user want to how many items will presented in long horizontal list. And for our requiremnt, expression blend is best suitable tool for customizing listbox and off cource it is very flexible for henerating customizable xaml of our app UI.

Note:

1)Sample is targeted on windows phone 7.1

2)Here I am using expression blend 2012 which is comes under wp8 sdk.

Building the Sample

No need to add any other external dll's & libraries.Beacuse BLEND will comes on wp sdk by default.

Source File at : ListboxStyle in wp8

Description

However expression blend is more efficient for customizing UI controls,To know more about custom style's you may visit http://www.geekchamp.com/tips/custom-styles-and-templates-in-windows-phone-intro.We need to follow some steps here

1)Making horizontal listbox

XAML

  <ListBox.ItemsPanel> 
       <ItemsPanelTemplate> 
            <StackPanel Orientation="Horizontal" /> 
        </ItemsPanelTemplate> 
 </ListBox.ItemsPanel>

2)Embeded custom style in <phone:PhoneApplicationPage.Resources>

XAML

 <phone:PhoneApplicationPage.Resources> 
        <Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer"> 
            <Setter Property="VerticalScrollBarVisibility" Value="Auto"/> 
            <Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/> 
            <Setter Property="Background" Value="Transparent"/> 
            <Setter Property="Padding" Value="0"/> 
            <Setter Property="BorderThickness" Value="0"/> 
            <Setter Property="BorderBrush" Value="Transparent"/> 
            <Setter Property="Template"> 
                <Setter.Value> 
                    <ControlTemplate  TargetType="ScrollViewer"> 
                        <Border  BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"> 
                            <VisualStateManager.VisualStateGroups > 
                                <VisualStateGroup  x:Name="ScrollStates"> 
                                    <VisualStateGroup.Transitions> 
                                        <VisualTransition GeneratedDuration="00:00:00.00"/> 
                                    </VisualStateGroup.Transitions> 
                                    <VisualState  x:Name="Scrolling"> 
                                        <Storyboard > 
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/> 
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalScrollBar"/> 
                                        </Storyboard> 
                                    </VisualState> 
                                    <VisualState x:Name="NotScrolling"> 
                                        <Storyboard> 
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/> 
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalScrollBar"/> 
                                        </Storyboard> 
                                    </VisualState> 
                                </VisualStateGroup> 
                            </VisualStateManager.VisualStateGroups> 
                            <!--Margin="{TemplateBinding Padding}"--> 
                            <Grid Margin="{TemplateBinding Padding}"  > 
                                <ScrollContentPresenter  x:Name="ScrollContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/> 
                                <ScrollBar  x:Name="VerticalScrollBar" HorizontalAlignment="Right" Height="Auto" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Opacity="0" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" VerticalAlignment="Stretch" Width="5" Background="Red"/> 
                                <ScrollBar Margin="0,0,0,-20" Height="8" x:Name="HorizontalScrollBar" HorizontalAlignment="Stretch"  IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Opacity="0" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" VerticalAlignment="Bottom"  Background="#FF1584D1" Width="auto" BorderThickness="10,5,5,10"/> 
                            </Grid> 
                        </Border> 
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 
        <Style x:Key="ListBoxStyle1"   TargetType="ListBox"> 
            <Setter Property="Background" Value="Transparent"/> 
            <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> 
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/> 
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> 
            <Setter Property="BorderThickness" Value="0"/> 
            <Setter  Property="BorderBrush" Value="Transparent"/> 
            <Setter Property="Padding" Value="0"/> 
            <Setter  Property="Template"> 
                <Setter.Value> 
                    <ControlTemplate  TargetType="ListBox"> 
                        <ScrollViewer  x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}" Style="{StaticResource ScrollViewerStyle1}" > 
 
                            <ItemsPresenter   ScrollViewer.HorizontalScrollBarVisibility="Auto"/> 
 
                        </ScrollViewer> 
 
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 
    </phone:PhoneApplicationPage.Resources>

3)Applying styles for listbox

XAML

<ListBox Height="auto" Width="455" Style="{StaticResource ListBoxStyle1}"/>

4)Another image control for showing selected image in big size.

XAML

<Image Height="249" HorizontalAlignment="Left" Margin="0,0,0,0" x:Name="imagetxt" Stretch="Fill" VerticalAlignment="Top" Width="459" Source="{Binding }"> 
 <Image.RenderTransform> 
              <CompositeTransform x:Name="ImageTransformation" ScaleX="1" ScaleY="1" /> 
  </Image.RenderTransform> 
                        
</Image >

5)Screen Shot

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 
using Microsoft.Phone.Controls; 
 
namespace ListboxHorizontalScroll 
{ 
    public partial class MainPage : PhoneApplicationPage 
    { 
        List<ImageResoorce> lst = new List<ImageResoorce>(); 
        public MainPage() 
        { 
            InitializeComponent(); 
             
            lst.Add(new ImageResoorce() { imagepath = "http://kareninthekitchen.files.wordpress.com/2012/04/strawberry-shortcake10.jpg?r=", Caption = "Image1"}); 
            lst.Add(new ImageResoorce() { imagepath = "http://htmlgiant.com/wp-content/uploads/2009/05/lemon-500x375.jpg", Caption = "Image2" }); 
            lst.Add(new ImageResoorce() { imagepath = "http://kareninthekitchen.files.wordpress.com/2012/04/strawberry-shortcake10.jpg?r=", Caption = "Image3" }); 
            lst.Add(new ImageResoorce() { imagepath = "http://htmlgiant.com/wp-content/uploads/2009/05/lemon-500x375.jpg", Caption = "Image4" }); 
            lst.Add(new ImageResoorce() { imagepath = "http://kareninthekitchen.files.wordpress.com/2012/04/strawberry-shortcake10.jpg?r=", Caption = "Image5" }); 
            lst.Add(new ImageResoorce() { imagepath = "http://htmlgiant.com/wp-content/uploads/2009/05/lemon-500x375.jpg", Caption = "Image6" }); 
            lst.Add(new ImageResoorce() { imagepath = "http://kareninthekitchen.files.wordpress.com/2012/04/strawberry-shortcake10.jpg?r=", Caption = "Image7" }); 
            PhotoList.ItemsSource = lst; //Binding listbox with list 
            PhotoList.SelectedIndex = 0;//to load first listboxitem  
            PhotoList.SelectedItem = true; 
        } 
 
        private void lstContact_SelectionChanged(object sender, SelectionChangedEventArgs e) 
        { 
            if ((sender as ListBox).SelectedValue != null) 
            { 
                ImageResoorce selectedItemData = (sender as ListBox).SelectedValue as ImageResoorce;//Get selected listboxitem value 
                imagetxt.DataContext = selectedItemData.imagepath;//binding selected image 
                txtcaption.Text = selectedItemData.Caption;//binding selected image title 
            } 
            
        } 
 
    } 
    public class ImageResoorce 
    { 
       public string  imagepath{get;set;} 
       public string Caption { get; set; } 
    } 
}


Windows Phone tutorials for beginners key points

This section is included for only windows phone beginners.However this article can covers following questions.Off course these key words is more helpful for getting more best results about this topic in search engines like google/bing/yahoo.. 




1.Customizing default listbox scrollviewer in windows phone 8 c#,xaml



2.How to bind listbox items in windows phone 8 c#


3.Customizing scrollviewer using windows phone xaml,c# expression blend



4.Custom styles and templates in windows phone 8 c# xaml using expression bled



5.How to change the scroll bar color for a ListBox in Windows Phone 8



6.How to change the scrollviewer color for a ListBox in Windows Phone 8







Have a nice day by Subramanyam Raju