Display images from Assets with JSON - Windows Phone 8 - c#

I am making a WP8 application with a lot of local content in my Assets folder. So I am using a JSON file stored in the a JSON folder.
I have been able to parse the JSON to C# very easily and now I am trying to display the data in a list. I had no problem with displaying the title but I am unable to display an image, even with the filename I am got.
My images are stored in "Assets/Content/mediaXXX.jpg";
ListViewModel :
public class ListViewModel
{
public string Title { get; set; }
public string Subtitle { get; set; }
public BitmapImage ListImage { get; set; }
}
XAML
<ListBox Margin="0,1,0,0"
Height="730"
x:Name="MainList">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="120"
Width="480">
<StackPanel Orientation="Horizontal">
<Image HorizontalAlignment="Left"
Source="{Binding ListImage}"
Margin="12"
Stretch="UniformToFill"
Width="130"/>
<Grid>
<TextBlock x:Name="ListItemTitle"
Text="{Binding Title}"/>
<TextBlock x:Name="ListItemSubTitle"
Text="{Binding Subtitle}"/>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And my C# page
BitmapImage image = new BitmapImage(new Uri(#"Assets/Content/" + photo.filename + ".jpg", UriKind.Relative);
l.ListImage = image;
Any idea?

Code should work. Only problems that might occur is your ListBox databinding is incorrectly defined.
I don't see any .ItemsSource = or ItemsSource={Binding some_collection}
Another thing is make sure that photo.filename is returning the correct file.
Set a string debug_string = "Assets/Content/" + photo.filename + ".jpg";
Make sure everything is correct.
Last thing is to make sure the files are actually in the Assets Folder inside the project and its
BuildAction is set to Content
like so

Related

Accessing TextBox Text Inside GridView (C# / XAML)

So I have a customised GridView with a data template that contains a TextBox and is populated by a list of a custom class called Player. I need to be able to retrieve both the instance of Player and the text in the TextBox and save them to a new custom class called Score.
<GridView x:Name="gridScore" ItemsSource="{x:Bind PlayerList}" IsItemClickEnabled="True">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Player">
<StackPanel Orientation="Horizontal">
<TextBox x:Name="txtbxGridScore" TextChanged="txtbxGridScoreChangedEventHandler" />
<Image Source="{x:Bind ProfilePicture}"/>
<StackPanel VerticalAlignment="Center">
<TextBlock Text="{x:Bind FullName}" />
<TextBlock Text="{x:Bind Alias}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<Button x:Name="buttonSave" Content="Save Scores" Style="{StaticResource BarButtonStyle}" Click="buttonSave_Click"/>
I come from a web-based Java background so this is a little bit new to me but it seems like it should be a fairly simple exercise.
Initially, I tried iterating through the GridView upon a Button Click and grabbing each Player item along with the TextBox Text and saving them to a List<> of Score, however, getting the TextBox value proved troublesome.
I then tried initialising a page scope List<> of Score and simply updating it each time the TextBox value was changed, however, I wasn't able to make this work either.
A solution for either approach will work fine for my purposes. Any input is appreciated!
If I correctly understood you this is one of the way to resolve your problem.
So let's assume that your model class Player have this structure:
public class Player {
public int PlayerID { get; set; }
public string ProfilePicture { get; set; }
public string FullName { get; set; }
public string Alias { get; set; }
public float PlayerScore { get; set; } // To store textbox value
}
So you can resolve this by using two way binding.
XAML part will look something like this:
<GridView x:Name="gridScore"
ItemsSource="{x:Bind PlayerList}"
IsItemClickEnabled="True">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Player">
<StackPanel Orientation="Horizontal">
<TextBox x:Name="txtbxGridScore"
Text="{x:Bind PlayerScore, Mode=TwoWay}" />
<Image Source="{x:Bind ProfilePicture}" />
<StackPanel VerticalAlignment="Center">
<TextBlock Text="{x:Bind FullName}" />
<TextBlock Text="{x:Bind Alias}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<Button x:Name="buttonSave"
Content="Save Scores"
Click="buttonSave_Click" />
I have initialized your PlayerList with some dummy data like this:
PlayerList = new ObservableCollection<Player>() {
new Player() {
FullName = "Player A", Alias = "AAA"
},
new Player () {
FullName = "Player B", Alias = "BBB"
}
};
As you can see in XAML I am binding your text box with PlayerScore property of Player model.
When I run this App I get screen like this:
I will input some data into TextBox and click Save button:
When I click on Save it will trigger the event that you wrote in Button part
In that event I have one foreach loop that will iterate through the list and one breakpoint and as you can see on first item "Player A" the PlayerScore value is 10:
Now you can find your players with some ID property or with some other way that you want. This is the most simple way to accomplish what you want.
Remark: This could be solved in a better way using MVVM pattern and other stuff but as you mentioned you are beginner so maybe it is better for you to solve it like this and after that go with more advanced technique. Hope that this was helpful for you.

Image binding two way mode not working wpf c#

i have an image tag in my window, whenever i am binding it in one way mode, its working fine, but unable to two way mode.
<ComboBox Grid.Column="1" DisplayMemberPath="sm.admno" Grid.Row="0" Name="txtadm" ItemsSource="{Binding}" IsSynchronizedWithCurrentItem="True" IsEditable="True"/>
<Image Grid.Column="6" Grid.Row="0" Source="{Binding ElementName=txtadm, Mode=TwoWay, Path=SelectedItem.sp.pic, UpdateSourceTrigger=PropertyChanged}" Grid.RowSpan="4" Grid.ColumnSpan="2" Name="imgpic"/>
class i am using
public string admno { get; set; }
public byte[] pic { get; set; }
data binding souce
var dt = from sm in db.studentmains
join sp in db.StudentPersonals on sm.admno equals sp.admno
select new { sm, sp};
txtadm.ItemsSource = dt.ToList();
Image.Source is not a property for which TwoWay makes any sense, the control is not interactive, it's not going to change the source. If you modify it, you should modify the data, not the Image.Source.

Display a local image in WPF

I have a problem displaying an image in WPF. The problem is that I add the image into the Grid and I can not actually see the image. I can see the place where the image is, but not the image itself (check the image below):
Here is my code:
View:
<DataGridTemplateColumn Header="Image" Width="SizeToCells" IsReadOnly="True" Visibility="Visible">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Height="25" Width="50" Source="{Binding Path=ImageArticle}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
Here I take the path and add it:
ContinueArticle ca = new ContinueArticle();
string ImagePath = Environment.CurrentDirectory + #"C:\iClipIT\Thumbs\" + ClipID;
ca.ImageArticle = ImagePath;
atlist.Add(ca);
And here I create the object and the getters and setters:
public static readonly DependencyProperty ArticleImageProperty
= DependencyProperty.Register("ArticleImage", typeof(string), typeof(ContinueArticle));
public string ImageArticle
{
get
{
return (string)GetValue(ArticleImageProperty);
}
set
{
SetValue(ArticleImageProperty, value);
}
}
Any clue what I'm doing wrong? I read a lot about this and I can't find the problem.

I can't binding image in document Library from https c# CSOM

I'm working on UWP App with c#.
And i can't binding image from document Library in sharepoint,
I can Retrieve data from list or info of document library by using CSOM, but how to display image?
When i open image's link on browser i have to give username and password before.
So i think that's problem in authentification?
I'm trying to get file and after display it like this,but i don't know how to bind image:
using (var context=new ClientContext("https://xxxx.sharepoint.com/sites/demo/"))
{
context.Credentials = new SharePointOnlineCredentials("xxx#xxxx","Pass");
var file =context.Web.GetFileByServerRelativeUrl("/sites/Demo/mylib/1.jpg");
context.Load(file);
await context.ExecuteQueryAsync();
Microsoft.SharePoint.Client.File File doc = file;
list.add(new Person(1,"Name","Description", ??Image?? ));
}
**XAML CODE**
<DataTemplate x:Key="ControlCategoryPrincipal" x:DataType="data:Person">
<Ellipse Margin="8,0" HorizontalAlignment="Left" Height="80" Width="80">
<Ellipse.Fill>
<ImageBrush Stretch="UniformToFill">
<ImageBrush.ImageSource>
<BitmapImage UriSource="{x:Bind Image}" />
</ImageBrush.ImageSource>
</ImageBrush>
</Ellipse.Fill>
</Ellipse>
</DataTemplate>
...
<GridView x:Name="gridPrinc"
AutomationProperties.AutomationId="GroupGridView"
ItemTemplate ="{StaticResource ControlCategoryPrincipal}"
ItemsSource="{x:Bind list,Mode=OneWay}"
ScrollViewer.VerticalScrollMode="Disabled"
SelectionMode="None" Loaded="gridPrinc_Loaded">
</GridView>
**MODEL**
public class Person
{
private int id;
private String name;
private String image;
private String description;
... + GETTERS + SETTERS
public Person(int id, String n, String desc, String img)
{
this.Id = idd;
this.Name = n;
this.Image = img;
this.Description = desc;
}
}
list property on the PropertyChanged event did not occur if the output should not
list ObservableCollection property Taxes output because this event does not occur unless CollectionChanged
x: Bind the OneTime mode is because when data for later binding can be integral

TextBlock Databinding Error

Class File:
public class User
{
public string user { get; set; }
}
XML for the TextBlock:
<DataTemplate x:Key="DataTemplate1">
<StackPanel x:Name="Stak" Orientation="Vertical" Width="0">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding}" Width="443" Margin="0,0,-443,0" FontSize="22"/>
<TextBlock x:Name="UserText" HorizontalAlignment="Left" Text="{Binding User}" TextWrapping="NoWrap" Width="443" Margin="0,0,-443,0" FontFamily="Segoe WP SemiLight" FontSize="23"/>
</StackPanel>
</DataTemplate>
C# code to load text:
IsolatedStorageFileStream readName = store.OpenFile("/User Information/UserName.txt", FileMode.Open, FileAccess.Read);
using (StreamReader contactName = new StreamReader(readName))
{
var name = contactName.ReadLine();
var Load = new User();
Load.user = name;
}
So Basically what this is supposed to do is when the app loads, it reads a file from the User Information folder and is meant to add it to the TextBlock text. Because I cant access the TextBlock since it's inside a Pivot Datatemplate, I've binded it.
Once the App is done reading the file it's meant to add whatever is inside the name into the textblock but it doesn't do it.

Categories