I'm trying to create a autocompletebox but it keeps moving items in my grid/stackpanel down while I want the listbox to overlap the controls, how can I prevent this from happening? I also want to say that a control may appear above the textbox. Thanks in advance.
XAML:
<Page
x:Class="test.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:test"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:mmppf="using:Microsoft.PlayerFramework"
xmlns:ab="using:AutoCompleteBox"
mc:Ignorable="d">
<Grid Name="rootGrid">
<ScrollViewer Grid.Row="2" Grid.Column="0" x:Name="panelScrollViewer" Height="Auto" VerticalScrollBarVisibility="Auto" HorizontalScrollMode="Disabled" HorizontalAlignment="Stretch" VerticalAlignment="Top" ZoomMode="Disabled" MaxZoomFactor="1" MinZoomFactor="1">
<StackPanel Name="contentPanel" Orientation="Vertical" Margin="20,0" HorizontalAlignment="Stretch">
<mmppf:MediaPlayer Name="player" Background="Black" Margin="0,0,0,40" Height="Auto" Width="Auto" VerticalAlignment="Top" Visibility="Collapsed"/>
<TextBox Name="autocomplete" Grid.Row="1" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
<ListBox Name="autoCompleteListbox" Grid.Row="0"
ScrollViewer.VerticalScrollBarVisibility="Auto"/>
<StackPanel Name="menuPanel" Orientation="Vertical" HorizontalAlignment="Center">
<!--Contains Rows of stack panels with buttons-->
</StackPanel>
<ProgressRing Name="prLoading" Width="100" Height="100" Margin="50" Foreground="White" Visibility="Collapsed"/>
<Grid Name="cv">
<!--more controls-->
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
</Page>
NOTE: The autocomplete textbox is a object that will show a listbox under it. Also have I found a workaround but if there is a better way to do it, please suggest.
SOLUTION:
<Page
x:Class="test.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:test"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:mmppf="using:Microsoft.PlayerFramework"
xmlns:ab="using:AutoCompleteBox"
mc:Ignorable="d">
<Grid Name="rootGrid">
<ScrollViewer Grid.Row="1" Grid.Column="0" x:Name="panelScrollViewer" Height="Auto" VerticalScrollBarVisibility="Auto" HorizontalScrollMode="Disabled" HorizontalAlignment="Stretch" VerticalAlignment="Top" ZoomMode="Disabled" MaxZoomFactor="1" MinZoomFactor="1">
<StackPanel Name="contentPanel" Margin="20,0" HorizontalAlignment="Stretch">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<mmppf:MediaPlayer x:Name="player" Background="Black" Margin="0,0,0,40" Height="Auto" Width="Auto" VerticalAlignment="Top" Visibility="Collapsed"/>
<TextBox x:Name="autocomplete" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
</StackPanel>
<Grid>
<StackPanel Margin="0" Orientation="Vertical" Grid.Row="1">
<StackPanel Name="menuPanel" Orientation="Vertical" HorizontalAlignment="Center">
<!--Contains Rows of stack panels with buttons-->
</StackPanel>
<ProgressRing Name="prLoading" Width="100" Height="100" Margin="50" Foreground="White" Visibility="Collapsed"/>
<Grid Name="cv">
<!--more controls-->
</Grid>
</StackPanel>
<ListBox Name="autoCompleteListbox" Grid.Row="0"
VerticalAlignment="Top"
ScrollViewer.VerticalScrollBarVisibility="Auto"/>
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
</Page>
Related
I am trying to build a 4 column list view to display some data in the Windows Universal App. I have the following Listview but the list view is not scrolling vertically in spite of data being there for scroll. I am not sure what I am doing wrong. Any pointers or help is appreciated..
XAML Code
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ChennaiTrains"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ViewModel="using:ChennaiTrains.ViewModel"
xmlns:Model="using:ChennaiTrains.Model"
x:Class="ChennaiTrains.MainPage"
xmlns:c="using:ChennaiTrains.Controls"
mc:Ignorable="d" Loaded="Page_Loaded">
<Page.BottomAppBar>
<CommandBar>
<AppBarButton Icon="Find" Click="AppBarButton_Click"/>
</CommandBar>
</Page.BottomAppBar>
<Page.Background>
<ImageBrush ImageSource="..\Assets\Images\marina.jpg" Stretch="UniformToFill"></ImageBrush>
</Page.Background>
<Grid>
<Grid x:Name="body">
<StackPanel>
<Grid x:Name="titlebar">
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="menu"
VerticalAlignment="{x:Bind VerticalContentAlignment}"
HorizontalAlignment="{x:Bind HorizontalContentAlignment}"
FontSize="30"
FontFamily="Segoe MDL2 Assets"
Content="" Click="HamburgerButton_Click"
Background="Transparent" Height="42" Visibility="Visible"/>
<TextBlock x:Name="content"
FontSize="25"
Text="Chennai Compass" Height="42" Visibility="Visible"
VerticalAlignment="{x:Bind VerticalContentAlignment}"
HorizontalAlignment="{x:Bind HorizontalContentAlignment}" Margin="0"/>
</StackPanel>
</Grid>
<SplitView x:Name="MySplitView"
DisplayMode="Inline"
OpenPaneLength="150"
CompactPaneLength="50"
IsPaneOpen="False" Background="Transparent" BorderBrush="Black">
<SplitView.Pane>
<StackPanel Background="Transparent">
<!-- <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click" /> -->
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
<TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
</StackPanel>
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
<TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
</StackPanel>
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
<TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
</StackPanel>
</StackPanel>
</SplitView.Pane>
<Grid>
<AutoSuggestBox AllowDrop="True" x:Name="fromTextBox"
PlaceholderText="Enter the starting point"
QueryIcon="Find" TextChanged="DestinationBox_TextChanged"
SuggestionChosen="AutoSuggestBox_SuggestionChosen"
QuerySubmitted="AutoSuggestBox_QuerySubmitted"
TextMemberPath="StationName"
>
<AutoSuggestBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="2">
<TextBlock Text="{Binding StationName}" />
</StackPanel>
</DataTemplate>
</AutoSuggestBox.ItemTemplate>
<AutoSuggestBox.DataContext>
<ViewModel:AutoSuggestBoxVM/>
</AutoSuggestBox.DataContext>
</AutoSuggestBox>
<AutoSuggestBox x:Name="DestinationBox"
QueryIcon="Find"
DisplayMemberPath="{Binding StationList.StationName}"
TextMemberPath="StationName"
TextChanged="DestinationBox_TextChanged"
SuggestionChosen="DestinationBox_SuggestionChosen"
PlaceholderText="Enter the destination" Margin="0,60,0,0">
<AutoSuggestBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="2">
<TextBlock Text="{Binding StationName}" />
</StackPanel>
</DataTemplate>
</AutoSuggestBox.ItemTemplate>
<AutoSuggestBox.DataContext>
<ViewModel:AutoSuggestBoxVM/>
</AutoSuggestBox.DataContext>
</AutoSuggestBox>
<Grid x:Name="resultGrid" Margin="0,140,2,0">
<ListView x:Name="resultsList" ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollMode="Enabled" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="15"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.Resources>
<DataTemplate x:Key="TimeTemplate">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Grid.Row="0">
<TextBlock Text="Start at:" Margin="0,0,5,0"></TextBlock>
<TextBlock x:Name="startAt" Text="{Binding Time}" />
<TextBlock FontFamily="Segoe MDL2 Assets" Margin="20,0,5,0" Text="">
</TextBlock>
<TextBlock x:Name="duration" Text="{Binding Duration}"/>
<TextBlock Text="Reach by:" Margin="-212,35,0,0"></TextBlock>
<TextBlock x:Name="EndPoint" Margin="-145,35,0,0" Text="{Binding DestinationTime}" />
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
Margin="-75,35,0,0"></TextBlock>
<TextBlock x:Name="trainType" Margin="-55,35,0,0" Text="{Binding TrainType}" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.Resources>
<ListView.HeaderTemplate>
<DataTemplate>
<TextBlock x:Name="headerText" Text="Next available Trains"/>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<StaticResource ResourceKey="TimeTemplate"/>
</ListView.ItemTemplate>
<ListView.DataContext>
<Model:ResultListModel/>
</ListView.DataContext>
</ListView>
</Grid>
</Grid>
</SplitView>
</StackPanel>
</Grid>
</Grid>
</Page>
Your problem is the StackPanel that contains the titlebar and SplitView. Content inside of a StackPanel is not confined to any space and it will stretch on forever. In your case this means the SplitView and therefore the ListView inside it are stretching forever. Without being confined the ListView doesn't believe it needs to scroll.
The fix is to use a Grid with Rows instead. I would add Grid RowDefinitions into your body Grid with the titlebar in row 0 and the SplitView in row 1 and remove the StackPanel just inside the body Grid. That will get your scrolling working. Paraphrasing your code, the row definitions would look like this
<Grid x:Name="body">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid x:Name="titlebar" Grid.Row="0">
</Grid>
<SplitView x:Name="MySplitView" Grid.Row="1">
</SplitView>
</Grid>
I am trying to implement the TimePicker in a new WP7 application..
But when i run the application...
There is always an error :
'Invalid attribute value controls:LongListSelector for property TargetType'
Here is my xaml Code
<phone:PhoneApplicationPage
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"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
x:Class="WindowsPhoneApplication3.NewOrEditCoursePage"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
Orientation="Portrait"
shell:SystemTray.IsVisible="True" >
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" MinHeight="607"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel HorizontalAlignment="Left" Height="450" Margin="8,8,0,0" VerticalAlignment="Top" Width="440">
<StackPanel Orientation="Vertical">
<TextBlock TextWrapping="Wrap" Text="" Margin="0,0,0,5" Foreground="{StaticResource PhoneSubtleBrush}"/>
<TextBox TextWrapping="Wrap" Text="TextBox"/>
</StackPanel>
<controls:TimePicker Header="StartTime" Width="440" Height="100"/>
<controls:TimePicker Header="EndTime" Width="440" Height="100" />
<StackPanel Orientation="Vertical">
<TextBlock TextWrapping="Wrap" Text="Address" Foreground="{StaticResource PhoneSubtleBrush}" />
<TextBox TextWrapping="Wrap" Text="TextBox"/>
</StackPanel>
</StackPanel>
<StackPanel HorizontalAlignment="Left" Height="100" VerticalAlignment="Bottom" Width="400" Margin="36,0,0,8" Orientation="Horizontal">
<Button Content="Submit" HorizontalAlignment="Left" Width="200" Height="80"/>
<Button Content="Cancel" Width="200" Height="80"/>
</StackPanel>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
By the way , i have added the "Microsoft.Phone.Controls.Toolkit.dll"
You posted the wrong XAML. We need the XAML for the Control.
Anyway, the error message means that you attempted to set a Value property on the LongListSelector. The LongListSelector control don't expose such a dependency property, and thus you can't set it.
I have a ItemTemplate like this
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Button Grid.Row="0">
<Button.Template>
<ControlTemplate>
<Border BorderBrush="AntiqueWhite" BorderThickness="1">
<StackPanel Orientation="Horizontal" Background="Gray" Width="465">
<Image Margin="2,0,10,0" Source="{Binding StateImage}" Stretch="None"/>
<TextBlock Name="txt" Text="{Binding DateLabel}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Button.Template>
<Custom:Interaction.Triggers>
<Custom:EventTrigger EventName="Click">
<mx:EventToCommand Command="{Binding VisibilityListboxCommand}"
CommandParameter="{Binding EementName=txt, Path=Text}"
/>
</Custom:EventTrigger>
</Custom:Interaction.Triggers>
</Button>
<ListBox Grid.Column="1" ItemsSource="{Binding WhatsonList, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" BorderThickness="0,0,0,1" Padding="0,0,0,10">
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="360"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<Button>
.....
</Button>
<CheckBox Template="{StaticResource CheckboxImageTemplate}" Margin="0,5,0,0"/>
</StackPanel>
<ListBox Grid.Column="1">
.....
</ListBox>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
When I click on button inside listboxitem datatemplate I want to get content of textblock txt to find out what listbox item was clicked to trace back index in the List(model) that listbox bind from.
But from commandparameter I cannot get anything because there are many textblock named txt I think.
Please help me !
A better way to solve this is by binding the CommandParameter to 'thing' in the DataContext of the item like this:
<Custom:Interaction.Triggers>
<Custom:EventTrigger EventName="Click">
<mx:EventToCommand Command="{Binding VisibilityListboxCommand}"
CommandParameter="{Binding}" />
</Custom:EventTrigger>
</Custom:Interaction.Triggers>
This way the binding does not rely on a particular control being present and having a specific name.
I have the following XAML code:
<DataTemplate x:Key="FriendsDataTemplate">
<toolkit:WrapPanel Orientation="Horizontal" ItemWidth="173" ItemHeight="233">
<Grid VerticalAlignment="Top" HorizontalAlignment="Right">
<Grid.RowDefinitions>
<RowDefinition Height="183"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image x:Name="FriendAvatar" Margin="1,1,11,11" Source="{Binding ImageURL}" Width="173" Height="173"/>
<Grid Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Top">
<TextBlock x:Name="FriendName" Margin="0" Text="{Binding FriendName}" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,10,0" TextAlignment="Right"/>
</Grid>
</Grid>
</toolkit:WrapPanel>
</DataTemplate>
<Grid x:Name="FriendsGrid">
<ListBox x:Name="FriendsList" Margin="0" ItemTemplate="{StaticResource FriendsDataTemplate}"/>
</Grid>
FriendsList width is 420px.
My problem is: I want two items column, but I see one.
Any advice?
I've found the solution. Here is my working XAML code:
<DataTemplate x:Key="FriendsDataTemplate">
<Grid VerticalAlignment="Top" HorizontalAlignment="Right">
<Grid.RowDefinitions>
<RowDefinition Height="183"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image x:Name="FriendAvatar" Margin="1,1,11,11" Source="{Binding ImageURL}" Width="173" Height="173"/>
<Grid Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Top">
<TextBlock x:Name="FriendName" Margin="0" Text="{Binding FriendName}" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,10,0" TextAlignment="Right"/>
</Grid>
</Grid>
</DataTemplate>
<Grid x:Name="FriendsGrid">
<ListBox x:Name="FriendsList" Margin="0" ItemTemplate="{StaticResource FriendsDataTemplate}" Width="420">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemWidth="173" ItemHeight="233"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
I've added a ListBox.ItemsPanel inside ListBox definition. And I've moved wrap panel on it.
I have developed one user control, which has ListBox. when we scrolling it is not happen for me can u tell me what would goes wrong in it?
I have following items,
1.Panorama Page
In side controls:PanoramaItem I have created the instance of usecontrol
<controls:PanoramaItem Header ="Header">
<Grid>
<views:MyUserControlView DataContext="{Binding MyViewModel}" />
</Grid>
</controls:PanoramaItem>
2.MyUserControlView
<UserControl x:Class="UI.Views.RecentFileView"
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"
xmlns:utility="clr-namespace:UI.CommandBehaviours"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="364" d:DesignWidth="245">
<Grid x:Name="LayoutRoot" Height="360">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ListBox x:Name="RecentFilesListBox" Grid.Row="0" ItemsSource="{Binding RecentFiles}"
utility:CommandService.Command="{Binding ToFileViewCommand}" utility:CommandService.CommandParameter="{Binding SelectedItem, ElementName=RecentFilesListBox}" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="DataTemplateStackPanel" Orientation="Horizontal">
<Image x:Name="ThumbnailImage" Source="{Binding Path=Thumbnail}" Height="43" Width="43" VerticalAlignment="Top" Margin="10,0,20,0"/>
<StackPanel>
<TextBlock x:Name="FileNameTextBlock" Text="{Binding Path=FileName, Mode=OneWay}" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock x:Name="FileserverNameTextBlock" Text="{Binding Path=FileServerName}" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
When I am Scrolling Its not working for me..
Assuming you mean vertical scrolling, then the structure you've shown should work OK - although I'm a little bit concerned about where the <ListBox> is in your <UserControl>
Here are two things that should work:
Option 1:
<Panorama>
<PanoramaItem>
<MyUserControl>
</PanoramaItem>
</Panorama>
where MyUserControl is:
<UserControl>
<ScrollViewer>
<StackPanel>
... lots of <TextBlock>s
</StackPanel>
</ScrollViewer>
</UserControl>
or...
Option 2.
<Panorama>
<PanoramaItem>
<MyUserControl>
</PanoramaItem>
</Panorama>
where MyUserControl is:
<UserControl>
<ListBox>
... lots of "items" possibly created inside a <DataTemplate>
<ListBox>
</UserControl>
If you want to put a list of items inside a ScrollViewer, then you might be better off using an ItemsControl instead.
The XAML you posted for your usercontrol isn't valid (it contains an extra </StackPanel>) and has lots more grids than you should need.
Try this:
<ListBox x:Name="MyListBox" ItemsSource="{Binding MyProperty}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image x:Name="MyImage" Source="{Binding MyImageSource}" VerticalAlignment="Center" HorizontalAlignment="Center" />
<StackPanel>
<TextBlock x:Name="Label" Text="{Binding MyLabel}" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="ReadOnlyTextBlock" Text="{Binding MyStatus}" Style="{StaticResource PhoneTextSubtleStyle}" />
<TextBlock x:Name="PaidTextBlock" Text="{Binding MyPurchase}" Style="{StaticResource PhoneTextSubtleStyle}" Foreground="Blue"/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>