Image Control asynchronous - c#

I have an image control that I want it to load the image asynchronously over the network. I see some sample code in the network saying something like:
<Image HorizontalAlignment="Left" Height="118" Margin="2,8,0,0" VerticalAlignment="Top" Width="167" x:Name="ImageThumbnail" Source="{Binding SummaryImageLink, IsAsync=True}" />
However, in Windows Phone 7, I cannot find anything like that. Does anybody know a way to do that without I have to code a lot myself

Unfortunately you are going to have to write, or include, more code yourself to do this properly. I have a similar solution with the goal to cache images after the first download. The image cache class is accessed via a IValueConverter, so once you have included the appropriate code, you only have to add a decorator on the Image object:
<Image Source="{Binding ElementName=ImageSource, Path=Text, Converter={StaticResource imageCacheConverter}}" Width="200" />
Full details here and source code here: http://www.ben.geek.nz/2010/07/one-time-cached-images-in-windows-phone-7/

David Anson's work with LowProfileImageLoader may be of interest to you.
Keep a low profile [LowProfileImageLoader helps the Windows Phone 7 UI thread stay responsive by loading images in the background] - Delay's Blog

Alternatively you can asynchronously download the picture (for ex. with a BackgroundWorker) and assign it as source for your image control only when the download has completed.

Related

Class Library not including images

I have a class library that is essentially a collection of forms to be run. Consider it a module/plugin in a larger program, that can be developed independently, all the larger program cares about is the DLL (and interface).
Running the main form of the class library is fine and works well. My issue is with pictures. I've set up an Images folder in the class library, added an image, set it's Build Action to Embedded Resource and then rebuilt the project, but the images won't appear in the main program.
XAML:
<Button x:Name="btnAdd" Command="{Binding Add}">
<StackPanel Orientation="Horizontal">
<Image x:Name="imgAdd" Source="Resources/Add.png"/>
<Label>New</Label>
</StackPanel>
</Button>
The interesting part though, is that if I create a BitmapSource in code-behind and assign it to imgAdd in the constructor of the form, it works as expected. Does anyone have any ideas as to why this might be the case?
Use Pack URIs for your images.
<Button x:Name="btnAdd" Command="{Binding Add}">
<StackPanel Orientation="Horizontal">
<Image x:Name="imgAdd" Source="pack://application:,,,/ReferencedAssembly;component/Resources/Add.png"/>
<Label>New</Label>
</StackPanel>
</Button>
It turns out that the correct Build Action is actually Resource rather than Embedded Resource. Thinking about it now, Embedded Resource does seem more like a reference to a Resource in another DLL.
I inadvertently found the answer in this post while trying to improve my code.

Notebook-like background for a TextBox in a Windows Phone App

I am trying to create an application to take notes for windows phone 8.1
I want to give the user,a notebook type of feel.
For this I have created the UI for notes, the XAML is:
<Grid Margin="0,12.333,0,-0.333">
<Grid.Background>
<ImageBrush ImageSource="Images/notebookpaper.jpg"/>
</Grid.Background>
<TextBox TextWrapping="Wrap" Background="{x:Null}" Text="" BorderBrush="{x:Null}" HorizontalAlignment="Left" Margin="60,96,0,0" VerticalAlignment="Top" Height="480" Width="340" BorderThickness="0" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" FontFamily="Arial" TextChanged="TextBox_TextChanged" AcceptsReturn="True" FontSize="24.8"/>
<TextBlock Text="Date : " HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="246,10,0,0" Height="20" Width="59"/>
</Grid>
The image notebookpaper.jpg looks like this:
When user types in the text in text box, it looks like:
The problem is that, some characters appear a little above the line, some exactly on the line etc. which looks odd. Also, when I try to scroll, UI appears as:
The text appears striked out, as only the text scrolls and not the background image.
Also I want to be able to provide user a list of 5-6 fonts out of which they can select which one to use for typing the notes.
What should I do, so that the text appears properly aligned and text scrolls properly.
Is there any other way to do this ?
It looks like you have two problems:
Varying line height
Scrolling doesn't match the lines
To solve the first problem, you can probably work with TextBlock.TextLineBounds, talked about a bit in this MSDN blog post and the TextLineBounds enumeration documentation. This only seems to apply to TextBlocks, so you might have to swap between a TextBlock and TextBox as users edit their text.
To solve the second problem, the TextBox styles and templates page has a lot of helpful info. It looks like you can make your ImageBrush the background of your control by overriding TextBoxButtonBackgroundThemeBrush. If that doesn't work when focused, you may have to take the entire template given on the linked page and edit it to put your image in the background (there's a lot of XAML, but you should just be able to put your image in BackgroundElement or just before it).
If it still doesn't scroll, you can try setting ScrollViewer.Background instead; if that doesn't work, you'll need to handle the ScrollViewer.ViewChanging or ScrollViewer.ViewChanged events (probably by overriding it) so that it you can transform the background image by the amount of pixels the scrollviewer has moved.
You can also find the ScrollViewer in your code-behind (and skip dealing with the template) by using VisualTreeHelper. This would allow you to set the background of the ScrollViewer and/or subscribe to its events. This however is more brittle than the other methods and is usually a last resort.

Terrible performance of MapControl with multiple children in Windows Phone 8.1 Runtime

I have a MapControl which is supposed to be filled with multiple objects (500+). These objects represent some kind of POI. When the user taps on the object (pushpin) I display more info about the POI. So, I need:
A MapControl capable of handling high amount of child objects
Intercept Tappedevent of the child object
In order to achieve the second goal I decided to define my own pushpin template:
<maps:MapControl x:Name="Map">
<maps:MapItemsControl ItemsSource="{Binding Pushpins}">
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<Image Width="40"
Height="40"
Source="{ ... }"
Tapped="OnPushpinTappedAsync"
maps:MapControl.Location="{Binding Location}"
maps:MapControl.NormalizedAnchorPoint="{Binding AnchorPoint}" />
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
</maps:MapControl>
This works great except for the fact that.. the visual out of such approach is AWFULL. Every time I move a map, every Pushpin flickers a lot. It's like they are not, I don't know, bound to the position. They are also lagging. It looks really bad. Rendering of those objects is really poor.
The alternative is to add elements to the MapControl's MapElements property. It makes rendering of those objects really nice.
But then I loose binding ability and will have to workaround it - I'm not a big fan of that. There's also a second problem - from what I've read, rendering objects of the MapElements collection is a best effort deal. So it does not guarantee that it will succeed. And that is not an option for me, as in the future I plan to add clustering functionality, so I need to have a full control over what is being rendered on the map and what is not.
Do you have any idea why these MapControl's elements flickers so much? What can I do to prevent it? Thanks in advance for any hint or answer.
I'm facing the exact same problem. Seems to me, that the MapControl is completely broken. There are many more bugs besides performance :(
You cannot really solve the problem, but you can create a "oldschool" WP8.0 Silverlight application and use something like this:
<Page xmlns:map="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps">
<map:Map Grid.Row="1" x:Name="myMap">
<tool:MapExtensions.Children>
<tool:MapItemsControl>
... and so on ...
This performs great but of course you have to change everything from Win(P)RT to Silverlight...
I too faced this problem, but I find this library to be usefull.
Hopefully Microsoft updates the MapControl for Windows 10.
Try this:
Tag="{Binding index_of_collection}"
and this:
OnPushpinTappedAsync()
int index = (int)(sender as Image).Tag; //index_of_collection

Windows 8 Data Binding

I'm developing an application using C# and XAML and I've encountered a problem that is confusing me. I have a property in my data called GroupImage and have used binding to set the Source property of an Image with it. That worked fine but when I wanted to do the same thing a second time it doesn't show the image in the second Image control.
<Image Source="{Binding Group.GroupImage}" Width="250" Height="500" Stretch="UniformToFill" />
<Image VerticalAlignment="Bottom" Stretch="UniformToFill" Source="{Binding Group.GroupImage}" Grid.RowSpan="2"/>
The top one works fine the bottom one doesn't. I have been reading about Data Binding and have gotten the impression that you need to specify something in the DataContext to use a property more than once. Is this right? It seems a very strange way of doing this.
I am relatively new to C# so sorry if I'm missing something obvious. I'd appreciate a more knowledgeable cluing me in.
Thanks
Update Following the assistance I received I figured out that the context was being set to
DataContext="{Binding Group}"
And as a result my second line needed to change to the following since the Data Context was already set to Group.
<Image VerticalAlignment="Bottom" Stretch="UniformToFill" Source="{Binding GroupImage}" Grid.RowSpan="2"/>
You don't need to specify something in the DataContext to use a property more than once. But your two Image have to have the right DataContext (you can easily test it with the debugger), depending on their location on the visual tree (You didn't provide any code for the DataContext part ?) .
You can also check that your Image's Width/Height are not 0.

WPF icon preloading

My application does a lot of work with currencies and so frequently makes use of 80-90 .ICO files I have as resources which are country flags, to represent each currency. Most screens use these and it seems a waste to keep reloading them for each use, especially given that when I use a datatemplate that has an IMG tag, it freezes the GUI or makes it very unperformant when loading these in ListViews etc.
Is there some way or design that's recommended in WPF whereby I can preload these images into the WPF application space so that whenever they are referenced, they are already cached and loaded globally so I only have to load them into memory once at application start, then every usage from then on in is lightning fast?
Thanks
I would suggest to place them into the Application.Resources in your xaml.
Those are loaded only once and accessible everywhere in your app.'
See How to: Use Application Resources on msdn.
EDIT:
In your class where you bind your items too (class that contains IconSelect) you need to add an extra property.
public BitmapImage BitmapIconSelect
{
get
{
return Application.Resources[IconSelect];
}
}
And then bind to this property:
<Image Source="{Binding BitmapIconSelect, IsAsync=True, Mode=OneWay}" Width="20" Height="20" />
I wrote this code freehand, so I am not sure if it compiles but I hope you get my point.

Categories