How to bind data user control inside listbox (Windows Phone8)

[Abdul Rahman Hamidy]

Dear friends, I am trying to bind user control inside listbox, but it seems I am doing something wrong. Here what I am doing in user control

<Grid x:Name="LayoutRoot" Background="Transparent" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="Images/download.png" Width="30" Height="30" VerticalAlignment="Top" Grid.Column="0"/>
<ProgressBar Grid.Row="0" Grid.Column="1" x:Name="prg" VerticalAlignment="Top" />
<TextBlock x:Name="TextBlock" Foreground="Black" Text="{Binding Text}" Grid.Row="0" Grid.Column="2" VerticalAlignment="Top" FontSize="20" HorizontalAlignment="Left" />
</Grid>

and code behind for user control

public static readonly DependencyProperty TextProperty =
DependencyProperty.Register(
"Text",
typeof(string),
typeof(SuraWithProgressBar),
new PropertyMetadata(null));

public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value);}
}

The usage

<ListBox x:Name="lsbQuranData" Grid.Row="1" Foreground="Black" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<local:SuraWithProgressBar Text="{Binding SuraTName, ElementName=SuraWithProgressBar}"></local:SuraWithProgressBar>
<Line X1="0" X2="480" Y1="0" Y2="0" VerticalAlignment="Bottom" StrokeThickness="2" Stroke="Black" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

and code behind for usage lsbQuranData.ItemsSource = App.Chapter; Let me mention that "App.Chapter" contain "SuraTName" which is binded to Text property of user control. The user control is added in list box, but the text is not displayed. Thanks,

Abdul Rahaman