We Keep Coding

Why does gridview expand like it has the data, but doesn't display the data?

The data is coming through fine, and I can successfully display the data the in a list box, but when i try to do this in a grid view or list view, i get these results. I feel like something small is missing here.
I've set the two way, and update property source on the textboxes, but still no visible data shown. I know it has the data, because it expands like I captured in this screenshot.
LeadingCauseOfDeath Class
public class LeadingCausesOfDeath : BasePropertyHandler
{
public int Year { get; set; }
public string _113_cause_name { get;set;}
public string Cause_name { get; set; }
public string State { get; set; }
public int Deaths { get; set; }
public int AgeAdjustedDeathRate { get; set; }
}
XAML View
<Grid DataContext="{Binding Source={StaticResource HomePageVM}}">
<StackPanel >
<NavigationView PaneDisplayMode="Top" IsBackButtonVisible="Collapsed" >
<NavigationView.MenuItems>
<NavigationViewItem Content="Family"/>
<NavigationViewItem Content="History"/>
<NavigationViewItem Content="About"/>
</NavigationView.MenuItems>
</NavigationView>
<GridView ItemsSource="{Binding Data, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
IsItemClickEnabled="True"
IsSwipeEnabled="true"
SelectionMode="Single"
BorderThickness="10" BorderBrush="Blue">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="4" Orientation="Vertical"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid BorderBrush="Black" BorderThickness="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Cause_name}" />
<TextBlock Grid.Column="1" Text="{Binding Year}" />
<TextBlock Grid.Column="2" Text="{Binding Deaths}" />
<TextBlock Grid.Column="3" Text="{Binding State}" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>
</Grid>
View model
private ObservableCollection<LeadingCausesOfDeath> _data;
public ObservableCollection<LeadingCausesOfDeath> Data
{
get
{
return _data;
}
set
{
_data = value;
OnPropertyChanged("Data");
}
}
public HomePageVM()
{
GetData();
}
private async void GetData()
{
var service = new ServiceForApi();
Data = new ObservableCollection<LeadingCausesOfDeath>();
Data = await service.GetFDAStuff();
OnPropertyChanged("Data");
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged( string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}

Putting a GridView inside a StackPanel is a bad idea. StackPanel will expand as much as it needs to fit the entire content. So, the automatic virtualization that GridView does is lost because it stretches to fit all the items.
With your ItemsWrapGrid's Orientation set to Vertical, it's probably not expanding at all... it expects a fixed height to fill with items and will expand in the horizontal direction.
Use a Grid with two RowDefinitions... first set to Auto, second set to *

Win 8 App Set text in data template

Im trying to learn how to make datatemplate in listviews in my win 8 app
I have the following code in my Xaml code
<!-- Vertical scrolling item list -->
<ListView x:Name="itemListView"
Margin="120,0,0,60"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionChanged="ItemListView_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="110" Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
<Image Source="{Binding Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Title}" TextWrapping="NoWrap" FontFamily="Global User Interface"/>
<TextBlock Text="{Binding Subtitle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Description}" MaxHeight="60" FontFamily="Global User Interface"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
What I cant work out is how to set the text for the three text blocks Title,Subtitle & Description as well as the Picture in Image
Usually When the page loads I use the following in my itemListView_Loaded(object sender, RoutedEventArgs e) method
itemListView.Items.Add(Convert.ToString(correct) + ". " + line.Split(',')[6]);
But how do I do it Im really stumped
Any help appreciated
Mark

You'll have to make a class which includes those properties.
public class MyItem
{
public string Title { get; set; }
public string Subtitle { get; set; }
public string Description { get; set; }
public string Source { get; set; }
}
Then when you add items:
var item = new MyItem();
item.Title = "Title";
item.Subtitle = "Subtitle";
item.Description = "Some example description.";
item.Source = "Assets/SomeFolder/SomeImage.png";
itemListView.Items.Add(item);
That worked in my app (AirPett Transit)

Dynamic Property Value Binding in the ListBox

I have a listbox "lbModernLineView" in which it is bound to "Lines" observable collection and each listbox item is bound with "Line" object. I have another listbox within this listbox named"InnerListBox".
I am going to show a pop up to the user once the user right click on the "InnerListBox" .In this pop up I am going to show all the properties in the "Line" class(for eg: Value1,Value2 etc).
if a user selects a "property" name from the popup, I need to show that property "value" into the InnerListBox. (for eg: if a user selects "value1" ,then the correspoding value in that "Line " objects need to display in the InnerListBox).
User can select upto 5 property names from the Poppup and that five property values and five property names for that "Line" object should should display in the "InnerListBox".
How can I bind these dynamic property values in a listbox item?
public class Line
{
public int Value1{ get; set; }
public int Value2{ get; set; }
public int Value3{ get; set; }
public int Value4{ get; set; }
public int Value5{ get; set; }
public int Value6{ get; set; }
public int Value7{ get; set; }
public int Value8{ get; set; }
}
Following are the part of my listBox sample
<ListBox x:Name="lbModernLineView"
Grid.Row="1"
Margin="2,2,2,2"
FontFamily="Courier New"
FontSize="13" ItemsSource="{Binding Lines,IsAsync=True,
Mode=TwoWay}" >
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="2,1,2,1">
<Border.ToolTip>
<TextBlock Text="{Binding desription}" />
</Border.ToolTip>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="110" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="89" />
</Grid.RowDefinitions>
<Border Grid.Column="1"
BorderBrush="Black"
BorderThickness="0,0,2,0" >
<ListBox ItemsSource="{Binding ModernColumn,Mode=TwoWay}" Name="InnerListBox" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Transparent" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"> </ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Prop}" />
<TextBlock Grid.Column="1" Text="{Binding Value}" HorizontalAlignment="Right" Background="Transparent"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<
</ListBox>

How to retrieve the selected group in a LongListSelector?

I using LongListSelector for showing Groups with Contact (one Contact can belong to multiple Groups)
class Group
{
public string Name { get; set; }
}
class Contact
{
public string Name { get; set; }
public List<Group> Groups { get; set; }
}
I use code below to build ItemsSource for LongListSelector
public List<KeyedList<Group, Contact>> GroupedContacts
{
get
{
List<Group> groups = ...;
List<Contact> contacts = ...;
List<KeyedList<Group, Contact>> result
= new List<KeyedList<Group, Contact>>();
foreach (Group gr0up in groups)
{
var temp = from c in contacts where c.Groups.Contains(gr0up) select c;
List<Contact> groupedContacts = new List<Contact>(temp);
result.Add(new KeyedList<Group, Contact>(gr0up, groupedContacts));
}
return result;
}
}
As you can see from the code above, single contact object can be used in several groups.
I handle SelectionChanged event and I can get a selected Contact but I can't get information about the selected Group.
Is there any 'standard' possibility to know, which Group has been selected?
Update
<Grid>
<Grid.Resources>
<DataTemplate x:Key="GroupHeader">
<Grid Margin="3,3" Width="480" Height="90" HorizontalAlignment="Stretch"
Hold="GroupDelete" Tag="{Binding Key.Name}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Key.Name}"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="ItemTemplate">
<StackPanel Height="128" Width="128" Orientation="Vertical">
<Grid>
<Image Width="102" Height="102" VerticalAlignment="Top" HorizontalAlignment="Left" Stretch="UniformToFill">
<Image.Source>
<BitmapImage UriSource="/Assets/contact_template.png" CreateOptions="BackgroundCreation"/>
</Image.Source>
</Image>
<Image Width="36" Height="36" VerticalAlignment="Top" HorizontalAlignment="Right"
Margin="10,5,35,0"
Source="/Assets/delete_contact.png"/>
</Grid>
<TextBlock Text="{Binding Name}" Foreground="Black" VerticalAlignment="Top"/>
</StackPanel>
</DataTemplate>
</Grid.Resources>
<phone:LongListSelector Name="ContactsList"
ItemsSource="{Binding GroupedContacts}"
ItemTemplate="{StaticResource ItemTemplate}"
GroupHeaderTemplate="{StaticResource GroupHeader}"
Style="{StaticResource ContactsLongListSelectorStyle}"
SelectionChanged="ContactsList_SelectionChanged"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled"/>
</Grid>
KeyedList implementation:
public class KeyedList<TKey, TItem> : List<TItem>
{
public TKey Key { protected set; get; }
public KeyedList(TKey key, IEnumerable<TItem> items)
: base(items)
{
Key = key;
}
public KeyedList(IGrouping<TKey, TItem> grouping)
: base(grouping)
{
Key = grouping.Key;
}
}

In ContactsList_SelectionChanged(sender,e): e.AddedItems[0] should give you a group/value pair.
UPDATE: To receive a key/value pair in SelectionChanged(), each list item of LongListSelector needs to be a key/value pair.
Here's a walkthrough for LongListSelector (It's specialized in that the groups are strings and calculated from the value, but it can easily be made more generic):
http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj244365%28v=vs.105%29.aspx
So the example's AddressBook class would for you be something like
public class LongListGroupEntry
{
public Group Key;
public Contact Value;
}

ListBox not databinding

My ListBox control is working fine, except that the data to be bound is not displaying.
My XAML:
<ListBox x:Name="listFileNames" SelectionMode="Single" Margin="10">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Margin="5" Source="{Binding Path=Image}" Stretch="Fill" Width="50" Height="50"></Image>
<StackPanel Grid.Column="1" Margin="5">
<TextBlock Text="{Binding Path=FileName}" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding Path=State}"></TextBlock>
<TextBlock Text="This text shows..."></TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
My code:
public struct StyleDocumentFile
{
public string Image;
public string FileName;
public string State;
}
// ......
StyleDocumentFile sdf = new StyleDocumentFile()
{
Image = "/Images/Loading.png",
FileName = "abc",
State = "Extracting Data...",
};
this.listFileNames.Items.Add(sdf);

Change fields to Property. After this, all works fine.
public struct StyleDocumentFile
{
public string Image { get; set; }
public string FileName { get; set; }
public string State { get; set; }
}

You should set ItemsSource in ListBox definition like ItemsSource="{Binding Model.Items}". In addition you must call RaisePropertyChanged in setter of model properties.