I am developing a Windows 8.1 application that consumes services from ASP.NET.
I want to display a club by id (application for managing clubs). In my welcome page I have a list of clubs (logos) when I click into a logo I want to display all information about the club concerned. (the get all works fine)
Here is my method
private Club GetClubById(int id)
{
HttpClient httpClient = new HttpClient();
string result = httpClient.GetStringAsync("http://xxxxxx:2209/api/clubapi/" + id).Result;
Club club = JsonConvert.DeserializeObject<Club>(result);
return club;
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
navigationHelper.OnNavigatedTo(e);
DefaultViewModel["ClubById"] = GetClubById(1003);
//this ID already exists I don t know how to bind the id with the xaml.
}
My class:
public class Club
{
public int IDClub { get; set; }
public string ClubName { get; set; }
public string ClubMail { get; set; }
public string PhoneNumber { set; get; }
public byte[] Logo { get; set; }
}
This is my GridView in XAML:
<HubSection Width="500" Header="Clubs">
<DataTemplate>
<GridView ItemsSource="{Binding ListClubs}" SelectionMode="None" Tapped="GridView_Tapped" >
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Source="{Binding Logo,Converter={StaticResource bytesToImageSourceConverter}}" Height="100" Width="200" Stretch="UniformToFill"/>
<TextBlock TextWrapping="NoWrap" Width="100" >
<Run Text="{Binding ClubName}" Foreground="Black" > </Run>
</TextBlock>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</DataTemplate>
</HubSection>
Related
I need my TreeView to display playlists and their songs, it should look something like this:
-Playlist1
--Song1
--Song2
--Song3
-Playlist2
--Song1
--Song2
--Song3
--Song4
-Playlist3
--Song1
--Song2
There can be an unlimited amount of playlists in the TreeView, with each node having differing amounts of songs. I want to achieve this using MVVM.
MainWindow.xaml
<TreeView ItemsSource="{Binding PlayLists}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type types:Playlist}" ItemsSource="{Binding PlayLists}">
<TextBlock Text="{Binding Path=Name}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type types:Song}">
<TextBlock Text="{Binding Path=Title}"/>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
Playlist.cs
public class Playlist
{
public string Name { get; set; }
public List<Song> Songs { get; set; }
public static ObservableCollection<Playlist> Playlists { get; set; } = new ObservableCollection<Playlist>();
}
Song.cs
public class Song
{
public string FullPath { get; set; }
public string Title { get; set; }
public string Artist { get; set; }
public string Genre { get; set; }
public string Length { get; set; }
public string Size { get; set; }
}
MainViewModel.cs
public ObservableCollection<Playlist> PlayLists { get; set; }
public MainViewModel()
{
/* Get Play-lists */
string listsPath = Path.Combine(
Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "AppName", "Playlists");
if (!Directory.Exists(listsPath))
{
Directory.CreateDirectory(listsPath);
}
string[] playlists = Directory.GetDirectories(listsPath);
foreach (var playlist in playlists)
{
var songs = new List<Song>();
string[] songsInPath = Directory.GetFiles(playlist);
foreach (var song in songsInPath)
{
songs.Add(NewSong(song));
}
Playlist newPlaylist = new Playlist()
{
Name = playlist.Split(Path.DirectorySeparatorChar).Last(),
Songs = songs
};
Playlist.Playlists.Add(newPlaylist);
}
PlayLists = Playlist.Playlists;
}
This is what it looks like:
There should be a sub-nodes for every song in the playlist.
The TreeView only shows the Playlist's Name, but not the Song's Title. I realized this is because the Playlist's property Songs is actually a List<Song>. I am not sure how I can display each Song's Title from the property Playlist.Songs.
Can someone please help me with this.
Your structure for Songs is wrong
Have a look at this example:
<HierarchicalDataTemplate DataType="{x:Type self:Family}" ItemsSource="{Binding Members}">
<StackPanel Orientation="Horizontal">
<Image Source="/WpfTutorialSamples;component/Images/group.png" Margin="0,0,5,0" />
<TextBlock Text="{Binding Name}" />
<TextBlock Text=" [" Foreground="Blue" />
<TextBlock Text="{Binding Members.Count}" Foreground="Blue" />
<TextBlock Text="]" Foreground="Blue" />
</StackPanel>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type self:FamilyMember}">
<StackPanel Orientation="Horizontal">
<Image Source="/WpfTutorialSamples;component/Images/user.png" Margin="0,0,5,0" />
<TextBlock Text="{Binding Name}" />
<TextBlock Text=" (" Foreground="Green" />
<TextBlock Text="{Binding Age}" Foreground="Green" />
<TextBlock Text=" years)" Foreground="Green" />
</StackPanel>
</DataTemplate>
Given this Model
public class Family
{
public Family()
{
this.Members = new ObservableCollection<FamilyMember>();
}
public string Name { get; set; }
public ObservableCollection<FamilyMember> Members { get; set; }
}
public class FamilyMember
{
public string Name { get; set; }
public int Age { get; set; }
}
Take a look at this for reference:
TreeView, data binding and multiple templates
I am working on windows phone app and I want to show some grouped JSON list item to longlist selector but I am not able to show anything in LongListSelector please help me following code I am using-:
Code Behind
public class UserInfo
{
public string service_name { get; set; }
public string uid { get; set; }
public string fname { get; set; }
public string lname { get; set; }
public string Contact { get; set; }
public object Mutual_friend { get; set; }
public object Direct { get; set; }
public string Miles { get; set; }
}
public class ResultSearch
{
public string service { get; set; }
public List<UserInfo> user_info { get; set; }
}
public class RootObjectSearch
{
public string flag { get; set; }
public string message { get; set; }
public List<ResultSearch> result { get; set; }
}
XAML
<phone:LongListSelector Name="test"
ItemsSource="{Binding service}"
HorizontalAlignment="Left"
Height="384"
Margin="10,136,0,0"
VerticalAlignment="Top"
Width="436">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Left"
Height="301"
Margin="10,10,0,0"
VerticalAlignment="Top"
Width="436"
Background="{StaticResource PhoneAccentBrush}">
<StackPanel Orientation="Horizontal"
Height="64">
<TextBlock Text="{Binding service }"
TextWrapping="Wrap"
Foreground="Red"
Margin="10"
Width="229"
FontSize="24" />
</StackPanel>
<StackPanel Orientation="Horizontal"
Height="64">
<TextBlock Text="{Binding fname }"
TextWrapping="Wrap"
Foreground="Red"
Margin="10"
Width="229"
FontSize="24" />
</StackPanel>
<StackPanel Orientation="Horizontal"
Height="64">
<TextBlock Text="{Binding lname }"
TextWrapping="Wrap"
Foreground="Red"
Margin="10"
Width="229"
FontSize="24" />
</StackPanel>
<StackPanel Orientation="Horizontal"
Height="64">
<TextBlock Text="{Binding Contact }"
TextWrapping="Wrap"
Foreground="Red"
Margin="10"
Width="229"
FontSize="24" />
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
I assume that you are able to download the json as a string.
Once you have that string add Json.NET library via nuGet and then add:
List<UserInfo> userInfo = JsonConvert.DeserializeObject<List<UserInfo>>(response);
where response is the string with the json inside.
Ok, now link the List<UserInfo> to the LongListSelector:
longListSelector.ItemSource = userInfo;
where longListSelector is the x:name of the phone:LongListSelector you have previously created in XAML
I am using nested ListBox for databinding,
This is my ListBox
<ListBox x:Name="lst1" ItemsSource="{Binding ListDS}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="10">
<TextBlock Text="{Binding Name}"/>
<ListBox Height="300" Width="200" ItemsSource="{Binding userFiles }" Margin="0,10" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,10,0,0">
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="Print" Width="75" HorizontalAlignment="Right" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Margin="0,0,0,0" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
These are my entities
public class UsersInfo
{
public long Id { get; set; }
public string Name { get; set; }
public DateTime DateCreated { get; set; }
public DateTime DateUploaded { get; set; }
public List<UsersFiles> userFiles { get; set; }
}
public class UsersFiles
{
public long Id { get; set; }
public string Name { get; set; }
public DateTime DateCreated { get; set; }
public DateTime DateDownloaded { get; set; }
}
and in my ViewModel, I have this
public List<UsersInfo> ListDS{ get; set; }
I am initializing it in my ViewModel's constructor and this is how I am populating the data
UsersInfo entity = new UsersInfo();
entity.MediaFiles = new List<UsersFiles>();
UsersFiles mFiles = new UsersFiles();
mFiles.Name = "abc";
mFiles.Id = 1
entity.Name = "User name";
entity.MediaFiles.Add(mFiles);
ListDS.Add(entity);
The problem is, ListBox is appearing blank, nothing is showing on it,even Print button.
When I added ListBoxItem in it,its showing perfectly.
Where I am doing wrong in databinding?
You have to implement INotifyPropertyChanged interface. The interface will notify the view when the property changes.
But you want your view to be notified if there is any new item in the collection so it's better to use a collection that will do that for you. Use ObservableCollection<UserInfo> to expose your ListDS.
public ObservableCollection<UserInfo> ListDS
{
get { return listDS; }
set
{
listDS = value;
// Call OnPropertyChanged whenever the property is updated
OnPropertyChanged("ListDS");
}
}
// Create the OnPropertyChanged method to raise the event
protected void OnPropertyChanged(string name)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(name));
}
}
assuming your view-model code is correct you only need to change this:
<ListBox Height="300" Width="200" ItemsSource="{Binding ListDS2}" Margin="0,10" >
to this:
<ListBox Height="300" Width="200" ItemsSource="{Binding userFiles}" Margin="0,10" >
and it will work. note the incorrect binding value !
This is my modal,
public class main
{
public List<categories> categorieslist { get; set; }
}
public class categories
{
public int categoryId { get; set; }
public string categoryName { get; set; }
public List<pdf> pdfdocs { get; set; }
public List<video> videoFiles { get; set; }
}
public class pdf
{
public string URL { get; set; }
public string language { get; set; }
public string createdDate { get; set; }
public bool isFavorite { get; set; }
public bool isRead { get; set; }
}
Im using JSON.NET to deserialize
main mainobj = JsonConvert.DeserializeObject<main>(App.hello);
I need to display list of PDF's for a selected category,
Im using LINQ to filter that particular category, I am unable to bind the PDF list..
pdf.ItemsSource = App.mainobj.categorieslist.Where(i => i.categoryId.Equals(s));
<ListBox x:Name="pdf" Margin="0,0,0,363" ItemsSource="{Binding}" Foreground="White">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding pdf.URL}" Foreground="White"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox ItemsSource="{Binding categorieslist}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding categoryId }" FontSize="20" />
<ItemsControl ItemsSource="{Binding pdf}" Margin="0 20 0 0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Blue" BorderThickness="2">
<TextBlock Text="{Binding URL }" FontSize="20" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding videoFiles}" Margin="0 20 0 0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Red" BorderThickness="2">
<TextBlock Text="{Binding URL}" FontSize="20" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
I have a listbox that has a listsource that is a list of 'results' objects. The results class looks like this:
public class Result
{
public string GUID { get; set; }
public string __invalid_name__I { get; set; }
public string FN { get; set; }
public string DOB { get; set; }
public string SEX { get; set; }
public string SN { get; set; }
public string __invalid_name__U { get; set; }
public string TYPE { get; set; }
//Gender icon path associated with result
public string SexIcon { get; set; }
}
And this is what my listbox looks like in the xaml code:
<ListBox
Height="517"
HorizontalAlignment="Left"
Margin="12,84,0,0"
Name="searchList"
VerticalAlignment="Top"
Width="438"
SelectionChanged="SearchList_SelectedEvent">
<!-- What each listbox item will look like -->
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Path=Sex, Converter={StaticResource SexToSourceConverter}}" Visibility="Visible" />
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Name="FirstName" Text="{Binding FN}" FontSize="28" Margin="0,0,10,0"/>
<TextBlock Name="LastName" Text="{Binding SN}" FontSize="28" />
</StackPanel>
<TextBlock Text="{Binding DOB}" FontSize="24" />
<!-- Line Stroke="#FF04863C" StrokeThickness="3" X1="100" Y1="100" X2="300" Y2="100" / -->
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So my question is, (and what I'm really struggling with) is how does one for instance get the value of the GUID property of the selected Item (which is basically a results object)?
(searchList.SelectedItem as Result).GUID