Populate ScrollView at runtime in WIndows Phone 8 - windows-phone-8

I have an app for windows phone 8 that displays data loaded from my website.
At the moment, I have setup 4 'holders' for the data, that contain a few TextBlocks and Images. When the app is loaded, these 4 holders display the data for the first 4 'records'. To display the next 4 'records', the user has to click a button, 'Next'.
I want to change this so that all 'records' are displayed in a ScrollView so the user simply has to scroll down to view records rather than click the 'Next' button.
I have also written the app for Android using Eclipse and Java. To do the above, I created a layout of the 'holder' in xml and then this is used as a template for the data. I only have to define the layout once and it is repeated at runtime, populated with the data from each record.
How do I achieve the same in Windows Phone, using vb.net and xaml?
I have googled and possibly DataTemplate is what I need however I'm not sure and have no idea how to implement it.
If you could point me in the right direction I'm sure I can figure it out!
Thanks in advance.
EDIT:
Ok, I've tried the following but the ListBox is empty:
Basically I have a List populated at runtime from my website (I know this bit works):
Public WebData As New System.Collections.Generic.List(Of WebInfo)
WebInfo Class:
Public Class WebInfo
Public ID As Integer
Public H1 As String
Public A1 As String
Public C1 As String
Public C2 As String
Public K1 As Date
End Class
xaml:
<ListBox x:Name="MainList" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Grid.Row="3" Grid.RowSpan="6" Grid.Column="0" Grid.ColumnSpan="3">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock x:Name="H1" Text="{Binding H1}" FontSize="15" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Right" TextAlignment="Right" FontWeight="Bold" Foreground="Black"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I try to set the ItemsSource using:
MainList.ItemsSource = WebData
The ListBox does not populate.
Any Thoughts?

I think LongListSelector works for you, but you should edit DataTemplate for your needs.
<phone:LongListSelector ItemsSource="{Binding ArticleList}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Title:" />
<TextBlock Text="{Binding Title}" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

The problem was, I was using variables in my class rather than properties:
Public Class WebInfo
Public Property ID As Integer
Public Property H1 As String
Public Property A1 As String
Public Property C1 As String
Public Property C2 As String
Public Property K1 As Date
End Class
Thanks for your help.

Related

Want to launch the view that exists in the views sub folder using mvvmcross

In PCL Core project I have sub folder in ViewModels folder as TestViewMdoels and in that I have a FirstViewModel.cs. And in Phone UI project I have sub folder in Views folder as TestViews and in that i have FirstView.xaml. Up on launching my windows app i need to show FirstView as start up page.
Please guide me to build the sub folders in views and viewmodels folder using mvvmcross.
Thanks
Hari
UPDATE 1
public class FirstViewModel : MvxViewModel
{
private string _hello = "MvvmCross";
public string Hello {
get { return _hello; }
set { _hello = value; RaisePropertyChanged(() => Hello); }
}
}
Code in FirstView.xaml
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock 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">
<TextBlock HorizontalAlignment="Left" Margin="40,79,0,0"
TextWrapping="Wrap" Text="{Binding Hello}"
VerticalAlignment="Top" Width="291"/>
</Grid>
</Grid>
In your Core project, find the file App.cs, there is the overrided method Initialize(), so in this method in the end add RegisterAppStart<ViewModels.TestViewModel.FirstViewModel>();
*if there is RegisterAppStart already exist in that method, remove it and add your one
also please look through Stuart "N+1 days of MvvmCross" lessons, here is the link to the first one - N=0 : A first MvvmCross Application
In his blog you can also find the other great lessons (more then 40) about MvvmCross

How to display element in LongListSelector only if bool=true?

I have a LongListSelector binded to a ObservableCollection(MyObject) I want display an image inside a container (Grid) only if the myobject.BoolProperty=True. How can I do that ?
Unfortunatly it seems we can't access elements inside the LongListSelector from code behind...In my xaml page i want to display the image (IsSuscribed) only if the boolean property is true...
<phone:LongListSelector x:Name="llsAllDoclibs"
LayoutMode="List"
ItemsSource="{Binding}"
HideEmptyGroups="False"
Background="WhiteSmoke"
SelectionChanged="Doclibs_SelectionChanged"
Margin="20,20,20,20"
>
<phone:LongListSelector.ItemTemplate >
<DataTemplate >
<Grid
Height="auto"
Margin="0,20,0,0"
Background="White"
>
<StackPanel Margin="10,10,10,10">
<Image HorizontalAlignment="Right"
VerticalAlignment="Center"
Source="/Images/BDocs/ico_action_valider.png"
x:Name="IsSuscribed"></Image>
<TextBlock
Text="{Binding NomDocLib}"
Foreground="#FF00485A"/>
<TextBlock
HorizontalAlignment="Right"
VerticalAlignment="Top"
Text="{Binding NbrElements}"
Foreground="#FF00485A"/>
</StackPanel>
</Grid>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
EDIT
I implemented this code.It works fine.But I was wondering How can use this class with an int value.If the value >10 I want display my element otherwise I want to hide it. I try to replace the object value by an int but i had an error...
public sealed class BooleanToVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo language)
{
return (value is bool && (bool)value) ? Visibility.Collapsed : Visibility.Visible;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo language)
{
return value is Visibility && (Visibility)value == Visibility.Visible;
}
}
Add the following attribute to your Grid:
Visibility="{Binding BoolValue,Converter={StaticResource BooleanToVisibilityConverter}}"
It should be fairly easy to write such converter (one line actually), but it is part of many frameworks out there.

How to refresh LongListSelector after delete an item

I have a LongListSelector like that
<phone:LongListSelector Name="ListRecentFiles"
LayoutMode="Grid"
ItemsSource="{Binding}"
GridCellSize="140,140"
SelectionChanged="ListRecentFiles_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid Background="Red" Margin="0,0,5,5">
<TextBlock Text="{Binding NoteTitle}" Style="{Binding PhoneTextNormalStyle}" />
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="ContextMenu">
<toolkit:MenuItem x:Name="Delete" Header="Delete" Click="DeleteNote_Click" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Grid>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
this is DataContext: public static ObservableCollection<Note> NoteItems;
And i try to delete an item from LongListSelector
private void DeleteNote_Click(object sender, RoutedEventArgs e)
{
Note selectedNote = (sender as MenuItem).DataContext as Note;
ListRecentFiles.ItemsSource.Remove(item);
NoteItems.Remove(selectedNote);
}
It's not work except i navigate to a other XAML page and return
I have visited this page but can't fix link
Without seeing more of the code, it's hard to be sure what's going wrong. But if you are setting
ListRecentFiles.DataContext = NoteItems;
that is incorrect. You want to set
ListRecentFiles.ItemsSource = NoteItems;
The XAML declaration:
ItemSource="{Binding}"
Could do that (depending on the rest of the code). Once .ItemsSource is set correctly, then the line:
NoteItems.Remove(selectedNote);
Should succeed in removing the visual item from the LongListSelector. In any case, you should not do the line:
ListRecentFiles.ItemsSource.Remove(item);
That would do the wrong thing when the list gets so big that it doesn't all fit in memory at once.

How to display flatlist using LongListSelector phone control of WP8

In toolkit LongListSelector, there used to be a property IsFlatList which needed to be set to true to display flat list without any grouping. But in the LongListSelector provided in phone control, this property is missing. Here is what I am doing
<phone:LongListSelector Name="myList" IsGroupingEnabled="False" LayoutMode="List" ItemsSource="{Binding Source ={StaticResource SortedList} }" CacheMode="BitmapCache" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<components:MyControl CacheMode="BitmapCache" MyItem="{Binding}"/>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
If I change the control to ListBox and remove LongListSelector specific property then it display my list.
Can someone please tell me what I am missing?
I am following this(Remarks) documentation of LongListSelector
In the Windows Phone 8 Version of the LongListSelector setting LayoutMode to List and IsGroupingEnabled to false should display your databound data as a flat list like in the WP7 Toolkit version of the control.
For example,
Given an Entity class
public class Entity
{
public string Name
{
get;
set;
}
public string Info
{
get;
set;
}
public int ID
{
get;
set;
}
}
All I need to do is create an ObservableCollection of Entity on my page and bind it to the itemsource of my LongListSelector (named list).
ObservableCollection<Entity> data = new ObservableCollection<Entity>();
list.ItemsSourdce = data;
Then I create the entities and add them to the collection.
Here is the XAML for my LongListSelector:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:LongListSelector Name="list" HorizontalAlignment="Left" Height="609" VerticalAlignment="Top" Width="456" LayoutMode="List" IsGroupingEnabled="False" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Top">
<TextBlock FontWeight="Bold" Text="{Binding Name}" />
<TextBlock Text="{Binding Info}" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
LayoutMode ="List" that's all you need.

ContextMenu's MenuItem DataContext returns old items

I am using a ContextMenu within a LongListSelector so that I can delete some items in the list bounded to the LLS.
I am following a recent guide here in order to implement the LLS (though I am not using the JumpList). The only thing I've changed is to have the base group class extend ObservableCollection instead of List.
The issue I am having is that once I've implemented the ContextMenu and delete from there, I can delete from the same "location" in teh visible list twice and then it would crash.
Debugging shows that after the second delete, the Datacontext of the MenuItem returns the previous item that was deleted. So when I search for it in the list, the index I get is -1. I can catch this but I don't know how to then find out what was really selected as the item.
My XAML section for the contextMenu is as below:
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid toolkit:TiltEffect.IsTiltEnabled="True">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="conmen" Loaded="ContextMenu_Loaded">
<toolkit:MenuItem Header="Delete" Click="DeleteItem_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Background="{StaticResource PhoneInverseBackgroundBrush}" Padding="{StaticResource PhoneTouchTargetOverhang}">
<TextBlock Text="{Binding Usr, StringFormat='x{0}'}" FontSize="32" HorizontalAlignment="Left" Width="48"/>
</Border>
<Border Grid.Column="1" Background="{StaticResource PhoneInverseBackgroundBrush}" Padding="{StaticResource PhoneTouchTargetOverhang}">
<TextBlock Text="{Binding Name}" FontSize="32" HorizontalAlignment="Left" />
</Border>
<Border Grid.Column="2" Background="{StaticResource PhoneInverseBackgroundBrush}" Padding="{StaticResource PhoneTouchTargetOverhang}">
<TextBlock Text="{Binding Type, StringFormat=\{0:C\}}" FontSize="32" HorizontalAlignment="Right" />
</Border>
</Grid>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
And this is the start of my delete_click function to remove the item:
private void DeleteItem_Click(object sender, RoutedEventArgs e)
{
var menItem = (MenuItem)sender;
editCartItem = (Model.Cartitem)menItem.DataContext;
cartIndex = editCartItem.Id;
deleteIndex = this.cartList.FindIndex(FindItem);
After two deletes, the (Model.Cartitem)menItem.DataContext returns the previously deleted item.
I have been searching for a while and have found similar cases for different frameworks and scenarios from some years before. I wanted to know if there was an updated method for doing this in WP8.
I have seen suggestions in manually re-assigning the datacontext of the ContextMenu with a Loaded or Opened event, but the DataContext still relies on a specific item in the LLS. So I can't just point it's context to the LLS's.
I've also seen that it's been pointed to as a bug with a patch here which seems exactly like my issue, but I had no idea on how to apply the patch or if it even pertained to my situation with WP8.
I've also been ensuring that the LLS's selected item is cleared and have tried re-assigning it's itemSource after each operation to no avail.
Any help or advice in the right direction would be great. I've seen some posts on here about this, but I believe I've already passed those points (such as simply getting the menuItem and using an ObservableCollection...).
xaml:
<toolkit:ContextMenu Opened="ContextMenu_Opened">... </toolkit:ContextMenu>
c#
private void ContextMenu_Opened(object sender, RoutedEventArgs e)
{
var menu = (ContextMenu)sender;
var owner = (FrameworkElement)menu.Owner;
if (owner.DataContext != menu.DataContext)
menu.DataContext = owner.DataContext;
}
you can see: Windows Phone Toolkit Context Menu Items have wrong object bound to them when an item is removed and then added
I just came across a simular issue:
When adding items to a listbox the datacontext of the menuitem belonging to the newly added items is not set correctly.
The workaround I ended up implementing was to rebuild the listbox after adding an item:
MyListBox.ItemsSource = null;
MyListBox.Items.Clear( );
MyListBox.ItemsSource = theList;
Not sure, if would also work for your issue...
Also the performance impact for listboxes with many items should be considered.