It seems that you're using an outdated browser. Some things may not work as they should (or don't work at all).
We suggest you upgrade newer and better browser like: Chrome, Firefox, Internet Explorer or Opera

×
I'm having trouble getting full screen images to load in a winphone7 application I'm building for a uni assignment and was hoping some of the lads/lasses/other here could help.

I'm trying to create a basic image gallery view and have set up the thumbnails as buttons in my .xaml page and that part works perfectly, they display the images and respond to clicks correctly. My objective is to have a grid of thumbnail images and when the user taps one, he gets a fullscreen display of the large version of the image and can close that with a screen tap or by hitting back.

I've managed to figure out how to use global variables and get them populating correctly, the problem I'm having now is how to change the image source based on the variable (which is populated by the on-click function of the button on the previous page). For example I want to have the variable contain the name of the selected image (pic1.jpg) and have the image reference in the xaml change based on the variable <image name="pic" source="/project;component/images/<VARIABLE DATA>". I eventually want to have it populate from a remote server but local will do fine for the moment as long as it bloody works in time for me to hand the project in.

The tricky thing is that I'm trying to do it across different pages (gallery.xaml & fullscreenimage.xaml) and I can't get the image tag to update its source based on the global variable.

I've set up my global variable in app.xaml on the theory that every page would have access to it, as far as I know making a public class to contain the variable in a page restricts it to that page.

IN APP.XAML.CS - Global variable
public class FullscreenImage
{
public static string picsource="";
}
IN GALLERY.XAML.CS - for the button click in the gallery page
private void pic1_click(object sender, RoutedEventArgs e)
{
FullscreenImage.picsource = "Pic1.jpg";
NavigationService.Navigate(new Uri("/Fullscreenpic.xaml", UriKind.Relative));
}
IN FULLSCREEN.XAML - For the actual image placeholder I'm trying to dynamically alter
<Image Name="FullscreenPic" Source="" Height="800" Margin="14,0,-1,0" />
From what I've researched I get the impression that I'm supposed to be using data binding but I can never find a tutorial that I can understand, they're either written for people who already know C# (I'm trying to teach myself and I'm a crap teacher) or are doing more complicated things like binding to a database which is a lot more than I want to do for the short term.

Anyone got any ideas?
Post edited May 16, 2011 by Aliasalpha
This question / problem has been solved by Gersenimage
Get thyself to Stackoverflow. Seriously, that site is the best place to get really good, helpful answers for stuff like this.
avatar
orcishgamer: Get thyself to Stackoverflow. Seriously, that site is the best place to get really good, helpful answers for stuff like this.
Except that I've been looking at it for a week now and found nothing. I can't imagine that I've invented a brand new way of programming so I assume I've just been searching for terms that sound right to me but are completely wrong
avatar
orcishgamer: Get thyself to Stackoverflow. Seriously, that site is the best place to get really good, helpful answers for stuff like this.
avatar
Aliasalpha: Except that I've been looking at it for a week now and found nothing. I can't imagine that I've invented a brand new way of programming so I assume I've just been searching for terms that sound right to me but are completely wrong
Did you post this there and no one could help?

I can ask some C# buddies but if they're busy they'll be all cranky and whine at me about Java or something:)
avatar
Aliasalpha: Anyone got any ideas?
It's not a C# problem it's a XAML (Silverlight/WPF) problem.

Yes technically your are supposed to use binding (technically everything uses Binding in XAML)

Normally (the easy, dirty, non MVVM way) you should create an object which you assign to your page DataContext property and then you can access it's value from the page by using for example

<Image Name="FullscreenPic" Source="{Binding ImagePath}" Height="800" Margin="14,0,-1,0" />

ImagePath being the name of the property of the object you assigned to the DataContext.

EDIT: XAML has a rather step learning curve, and DataBinding is definitely the most important/tricky part of it. IMHO you should first get a basic working knowledge of C#, which isn't that hard if you already know another programing language like C or Java, and then try to understand how XAML / Silverlight works; trying to do both at the same time will just drive you crazy.

EDIT 2: Also when you are trying to play with C# and or XAML, at first, do it with a standard WPF or Silverlight application rather than with a WP7 application, it will be a lot faster rather than having to wait for the emulator to starts. Once you have understood how to do what you want with Silverlight/WPF then you can easily move to WP7 and do the same thing.
Post edited May 16, 2011 by Gersen
Gersen is right that binding is definitely one of the more difficult concepts to get your head around, and also that you should try and get it to work in a browser first.

I'm afraid we can't really tell why your app isn't working without seeing it. If you want you can email me your code, and I'll see if I can explain how you should be doing it.
avatar
Gersen: IMHO you should first get a basic working knowledge of C#, which isn't that hard if you already know another programing language like C or Java, and then try to understand how XAML / Silverlight works; trying to do both at the same time will just drive you crazy.
Trust me I'd love to but I suck at self teaching and there's noone within a few hundred clicks who teaches it. Ideally I'd love to start from scratch and actually learn how to do things properly but this thing is due next week so I really need to solve the immediate problem in the most expedient method possible

I'll upload the relevant code somewhere tomorrow when I'm more awake
avatar
wpegg: I'm afraid we can't really tell why your app isn't working without seeing it. If you want you can email me your code, and I'll see if I can explain how you should be doing it.
The application itself is working perfectly, the issue isn't a problem with the existing code its just that I have no idea how to do the variable & image tag thing I mentioned in the first post. If I can understand how to read a variable in app.xaml and use that to change the contents of <image source=""> in fullscreen.xaml it'll work perfectly.
Post edited May 17, 2011 by Aliasalpha
avatar
Aliasalpha: Trust me I'd love to but I suck at self teaching and there's noone within a few hundred clicks who teaches it. Ideally I'd love to start from scratch and actually learn how to do things properly but this thing is due next week so I really need to solve the immediate problem in the most expedient method possible
Well when I said having a "basic working knowledge" I really meant "basic", if you already worked with other programing language you should be able to have a basic grasp of C#/.Net in one day or two day.

Once you have this basic knowledge spend some time reading articles/tutorial about WPF/Silverlight data binding and play a little with samples to also have a basic understanding of it.

It might seems like a lot of "wasted" time but without a minimum of prerequisite knowledge it's going to be very hard for you to advance on your project.
avatar
Aliasalpha: I can understand how to read a variable in app.xaml and use that to change the contents of <image source=""> in fullscreen.xaml it'll work perfectly.
You basically have two possibility, do it in the code behind (in the fullscreen.xaml.cs) which would be called the winform's way, or like i mention in my first post, create an object containing the shared variable, assign an instance of this object to your page DataContext and access it's property via binding.

You can find a very basic example of databinding here : http://anteru.net/2008/08/18/252/

It's very close to what you are trying to do except that it change a label text instead of an image source.
Post edited May 17, 2011 by Gersen
avatar
Gersen: ...
And obligatory "Holy crap I love Wicket!" with which I regularly taunt my C# buds:)

Still, that databinding example should get you there, aliasalpha.
Gosh, I only know XNA with C#, the databinding stuff is out of my league, but it sounds like others have you taken care of. I like programming topics on GOG, always fun to read.
avatar
Gersen: You can find a very basic example of databinding here : http://anteru.net/2008/08/18/252/

It's very close to what you are trying to do except that it change a label text instead of an image source.
Okay that's an excellent link (thank you kindly) and it has gotten me to the edge of getting it right. I'm certain that I'm just using the wrong term somewhere or there's a problem interacting with the other pages, is cross-page binding possible? Surely it must be.

Would someone mind casting an eye over my test code to see if there's an obvious error I'm making? http://aliasalpha.customer.netspace.net.au/DatabindTest.zip

The objective of this test is purely to change the loaded image (if one ever loads) based on which button you click.
avatar
Aliasalpha: ...
Ok so in short : In App.cs

I changed your Piccy class to:

public class Piccy
{
public String PicSource { get; set; }
}

In the App class I created a new public property and it's attached field:

private Piccy piccy = new Piccy();
public Piccy Piccy { get { return piccy; } }

Note : The reason I do that is because the App class is actually common to every page in your app.

Now in mainpage.cs for button1_Click :

((App)Application.Current).Piccy.PicSource = "/DatabindTest;component/bg1.jpg";
NavigationService.Navigate (new Uri("/Page1.xaml", UriKind.Relative));

And for button2_click:

((App)Application.Current).Piccy.PicSource = "/DatabindTest;component/bg2.jpg";
NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));

In the Page1.cs in the Page1 constructor, remove everything except :

InitializeComponent();
DataContext = ((App)Application.Current).Piccy;

And finally in the Page1.xaml :

<Image Height="595" HorizontalAlignment="Left" Source="{Binding PicSource}" Margin="9,6,0,0" Name="image1" Stretch="None" VerticalAlignment="Top" Width="441"/>

Here, I don't have that much time right now but I will probably edit this post after work with more info but it's working and I guess do what you wanted...
Hmm that sounds pretty promising, I'll have to force myself to stop playing LA Noire tomorrow and try it, if it works you've earned yourself a few shiny rep points
avatar
Gersen: Ok so in short
I BLOODY LOVE YOU!*

It actually worked and even continued to do so after I changed a few bits when adding it to my proper project!

What I really should do now is try to figure out a way to dynamically generate entire pages this way, that way my application would only need 3-4 framework pages and they could be dynamically populated which is the way I'd be doing it if I was using a vbscript & HTA approach like my last few coding projects.

Given that the demo is due next week and I have a 4000 word report to write on it I might just finish up the visual demo and declare victory, after all I have the next project subject to work on making things better

You, Gersen, are a champion, pick a (non-witcher 2) GOG and it's yours (on friday when I have money again)


*Declaration of love valid only for attractive, single, straight or bisexual women aged 20-40. Void where prohibited, love not redeemable for cash (well not legally in this part of the world)
Post edited May 21, 2011 by Aliasalpha