Cannot see the content and image on the user control - windows-phone-7

Question

I created the user control, I added them in the stackpanel by coding. when it is complier, there is no error. However, I didn't seen any content and image on this user control. When the button is clicked, it open another page. I know the click event is working fine. Would someone show me how to solve the problem? Thanks in advance.
The following is my UserControl.xaml:
<UserControl x:Name="NoButtonListItemControl"
x:Class="PhoneApp1.NobuttonListItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
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}"
d:DesignHeight="480" d:DesignWidth="480">
<Grid x:Name="LayoutRoot" >
<StackPanel Margin="14,17,20,48" >
<Image Source="{Binding Path=PicFileName,
ElementName=NoButtonListItemControl}"
Width="120" Height="120"></Image>
<Button Content="{Binding Path=Description,
ElementName=NoButtonListItemControl }"
ClickMode="Press"
Click="btnNoButtonListItem_Click" FontFamily="Georgia"
FontSize="15" Foreground="SkyBlue" Height="90"
Width="400" />
<TextBlock Text="{Binding Path=ID,
ElementName=NoButtonListItemControl }"
Style="{StaticResource pageTitleStyle}"
TextAlignment="{Binding}" />
</StackPanel>
</Grid>
 
The following is my UserControl.xaml.cs:
namespace PhoneApp1
{
public partial class NobuttonListItem : UserControl
{
public NobuttonListItem()
{
InitializeComponent();
}
public static DependencyProperty PicFileNameProperty =
DependencyProperty.Register("PicFileName", typeof(string),
typeof(NobuttonListItem), null);
public static DependencyProperty DescriptionProperty =
DependencyProperty.Register("Description", typeof(string),
typeof(NobuttonListItem), null);
public static DependencyProperty IDProperty =
DependencyProperty.Register("ID", typeof(string),
typeof(NobuttonListItem), null);
public string PicFileName
{
get
{
return (string)GetValue(PicFileNameProperty);
}
set
{
SetValue(PicFileNameProperty, value);
}
}
public string Description
{
get
{
return (string)GetValue(DescriptionProperty);
}
set
{
SetValue(DescriptionProperty, value);
}
}
public string ID
{
get
{
return (string)GetValue(IDProperty);
}
set
{
SetValue(IDProperty, value);
}
}
private void btnNoButtonListItem_Click(object sender,
RoutedEventArgs e)
{
App.Navigate(new
Uri(String.Format("/CallPage.xaml?ID={0}",ID),
UriKind.Relative));
}
}
}
 
There is test.xaml page in which I added the user control:
<phone:PhoneApplicationPage xmlns:my="clr-
namespace:PhoneApp1"
x:Class="PhoneApp1.test"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0"
Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION"
Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-
7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<StackPanel x:Name="spListPanel" Loaded="spListPanel_Loaded"
Grid.Row="1" Margin="12,0,12,0">
</StackPanel>
<Grid Grid.Row="2" Margin="12,0,12,0">
<StackPanel>
</StackPanel>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
The code behind of the test.xam l page:
namespace PhoneApp1
{
public partial class test : PhoneApplicationPage
{
public test()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(Page_Loaded);
}
void Page_Loaded(object sender, RoutedEventArgs e)
{
ShowList();
}
void ShowList()
{
int userControlUniqueID = 0;
AddItem("1", "Test 1", "onHold_icon.png", 1);
AddItem("2", "Test 2", "responded_icon.png",2);
}
void AddItem(string id, string description, string fileName,
int userControlUniqueID)
{
NobuttonListItem item = new NobuttonListItem();
item.Name = "lst_" + Convert.ToString(userControlUniqueID);
item.ID = id;
item.Description = description;
item.PicFileName = "/images" + "/" +fileName;
spListPanel.Children.Add(item);
}
}
}

Answer 1

Don't forget to add the following code in your "CodeBehind" file
this.DataContext = this;
If it still doesn't work, please post some of the output in the output window