Refresh an ObservableCollection when Item's property changed - windows-phone-8

I have a observableCollection which is loaded with elements and displayed on the UI .At the same time the app is downloading one Icon for each element of the observable collection.I would like to display each Icon when its download finishes...
My code is working but i guess it's not the best pratice because I bind my collection to the Ui control 2 times...I am pretty convinced that it shouldn't be necessary ...I try to implement the InotifypropertyChanged on the element's Icon property but I still have to add those lines of code to display the Icons:
listDocsLibs = new ObservableCollection<BdeskDocLib>(listBoxGetDocsLibs);
llslistDocslibs.ItemsSource = listDocsLibs;
Below the function which dowload the Icons
List<BdeskDocLib> listBoxGetDocsLibs = new List<BdeskDocLib>();
ObservableCollection<BdeskDocLib> listDocsLibs = new ObservableCollection<BdeskDocLib>();
private async void LoadIconDocLibs()
{
foreach (var doclib in listBoxGetDocsLibs)
{
byte[] Icon = await ServerFunctions.GetDocLibsIcon(doclib);
if (Icon != null)
{
{
var ms = new MemoryStream(Icon);
BitmapImage photo = new BitmapImage();
photo.DecodePixelHeight = 64;
photo.DecodePixelWidth = 92;
photo.SetSource(ms);
doclib.Icon = photo;
}
}
else if (Icon == null)
{
doclib.Icon = new BitmapImage();
doclib.Icon.UriSource = new Uri("/Images/BDocs/ico_ext_inconnu.png", UriKind.Relative);
}
}
}
//IM PRETTY SURE The following code IS NOT NECESSARY BUT WHY MY UI IS NOT REFRESHING WITHOUT ?
listDocsLibs = new ObservableCollection<BdeskDocLib>(listBoxGetDocsLibs);
llslistDocslibs.ItemsSource = listDocsLibs;
}

Related

How to get image if I drag and drop an Image from Google Chrome or Internet Explorer in AS3

I am trying to drag an Image from Google Chrome or Internet Explorer and Drop into my Flex Project but I am unable to get Image directly from temp folder like Mozilla Firefox,
For Example I am using the following codes go get drag drop images from system temp folder in case of Mozilla Firefox:
this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onNativeDragDrop);
private function onNativeDragDrop(vEvent:NativeDragEvent)
{
var dropFiles:Array = vEvent.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
if(dropFiles && dropFiles.length > 0)
{
var original:File = File(dropFiles[0]);
var nativePath:String = original.nativePath;
}
}
In nativePath i am getting the path where the image is initially stored like : "C:\Users\User_Name\AppData\Local\Temp\ubeh2wbl.bmp"
But In case of Google Chrome or Internet Explorer I am getting NULL in nativePath.
So I Don't know where Google Chrome or Internet Explorer initially storing the images.
Does anyone have an idea where it is storing or how to solve this problem ?
I just tried this, and when you drag an image from Chrome over the an AIR app, it comes in as the following formats:
file promise list
url
text
html
The file promise list is empty, so we'll focus on the others.
Here is the code I used which falls back through several formats to try and get a dragged image or image path:
private function onNativeDragDrop(e:NativeDragEvent):void
{
var img:DisplayObject; //the image (or first image) that was dragged
//IF IT'S A BITMAP (The easiest, so check it first)
if (e.clipboard.hasFormat(ClipboardFormats.BITMAP_FORMAT)) {
var bmd:BitmapData = BitmapData(e.clipboard.getData(ClipboardFormats.BITMAP_FORMAT));
img = new Bitmap(bmd);
addChild(img);
trace("It's a bitmap");
}
//IF IT'S FILE(S) that are dragged, try this next
if (!img && e.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)) {
var dropfiles:Array;
var file:File;
dropfiles = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
for each (file in dropfiles)
{
//isImagePath is defiend below
if (isImagePath(file.nativePath)) {
img = loadImage(file.nativePath); //load image function is defined below
break; //let's just load the first image
}
}
}
//IF IT's A URL that was dragged, try this next
if (!img && e.clipboard.hasFormat(ClipboardFormats.URL_FORMAT)) {
var url:String = String(e.clipboard.getData(ClipboardFormats.URL_FORMAT));
trace("It's a url: ", url);
if (isImagePath(url)) {
trace("it's a URL image path");
img = loadImage(url);
}
}
//IF IT's HTML that was dragged, try this next
if (!img && e.clipboard.hasFormat(ClipboardFormats.HTML_FORMAT)) {
var html:String = String(e.clipboard.getData(ClipboardFormats.HTML_FORMAT));
trace("its HTML: ", html);
//use regex to get all the <img> tags from the html
var imgs:Array = html.match(/(<img.*?>)/g);
//if one or more was found
if (imgs.length) {
trace("Image tag(s) found");
var imgPath:String;
for (var i:int = 0; i < imgs.length; i++) {
//use regex to get the src value from the img tag
imgPath = imgs[i].match(/src="(.*?)"/)[1];
img = loadImage(imgPath);
break; //let's just load the first image
}
}
}
//IF IT's raw text that dragged, try this next
if (!img && e.clipboard.hasFormat(ClipboardFormats.TEXT_FORMAT)) {
var txt:String = String(e.clipboard.getData(ClipboardFormats.TEXT_FORMAT));
trace("its text: ", txt);
if (isImagePath(txt)) {
img = loadImage(txt);
}
}
}
private var imgTypes:Vector.<String> = new < String > ["jpg", "gif", "png"];
private function isImagePath(path:String):Boolean {
if (path.lastIndexOf(".") > -1) {
var ext:String = path.substr(path.lastIndexOf(".")).toLowerCase();
return new RegExp(imgTypes.join("|")).test(ext);
}
return false;
}
private function loadImage(path):Loader {
var l:Loader = new Loader();
l.load(new URLRequest(path));
addChild(l);
return l;
}

Inject html/javascript-code into Flex AS3 HTML class

I need to Inject html/javascript-code into every HTML that gets loaded.
The program uses the HTML class.
I disassembled the original Flex3 files and found this.
The important? functions I modified/tested:
public function set htmlText(value:String) : void
{
_htmlText = value;
htmlTextChanged = true;
_location = null;
locationChanged = false;
invalidateProperties();
invalidateSize();
invalidateDisplayList();
dispatchEvent(new Event("htmlTextChanged"));
}
public function set location(value:String) : void
{
_location = value;
locationChanged = true;
_htmlText = null;
htmlTextChanged = false;
invalidateProperties();
invalidateSize();
invalidateDisplayList();
dispatchEvent(new Event("locationChange"));
}
I successfully changed the code of set location and managed that only http://www.example.com/ gets loaded.
However, the htmlText setter seems not to get called when the location is set using location.
This is what I have tried:
public function set htmlText(value:String) : void
{
_htmlText = "<html><h1>test</h1></html>" + value;
htmlTextChanged = true;
_location = null;
locationChanged = false;
invalidateProperties();
invalidateSize();
invalidateDisplayList();
dispatchEvent(new Event("htmlTextChanged"));
}
I need to have a look in flash.net.HTMLloader but I cannot locate the file.
I hope someone can help me and tell me where the HTML-code gets loaded from the location and where it gets rendered so I can modify it before.
Thanks in advance.
I don't know what do you want to inject to your html content, but I think that you can do it when the complete event on the HTMLLoader of your HTML component is fired, using the window object which is :
The global JavaScript object for the content loaded into the HTML control..
So you can use it ( the window object ) as in any JavaSript code.
// for the example, I took the page of your current question
var url:String = 'http://stackoverflow.com/questions/32348824/inject-html-javascript-code-into-flex-as3-html-class';
html_content.location = url;
html_content.htmlLoader.addEventListener(Event.COMPLETE, on_complete);
And
protected function on_complete(e:Event): void
{
var html_loader:HTMLLoader = html_content.htmlLoader;
var document = html_loader.window.document;
var _head = document.getElementsByTagName('head')[0];
// create a new css class
var _class = '.akmozo { background: #ff9900; color: white; padding: 2px; }';
var _style = document.createElement('style');
_style.appendChild(document.createTextNode(_class));
// create a new js function
var _js = 'function click_me(){ alert("Hello, how are you ?"); }';
var _script = document.createElement('script');
_script.appendChild(document.createTextNode(_js));
_head.appendChild(_style);
_head.appendChild(_script);
// change the page's top bar background color to green
if(document.querySelector('.topbar-wrapper'))
{
document.querySelector('.topbar-wrapper').style.backgroundColor = 'green';
}
// edit the title of your question,
// apply the new css class and call the js function
if(document.querySelector('.question-hyperlink'))
{
document.querySelector('.question-hyperlink').innerHTML += ' [ edited by <span class="akmozo" onclick="click_me()">AKMOZO</span> ]';
}
// change the SO logo to my avatar
if(document.getElementById('hlogo'))
{
document.getElementById('hlogo').style.backgroundImage = 'url(https://i.stack.imgur.com/YAKpv.png?s=50)';
document.getElementById('hlogo').style.backgroundRepeat = 'no-repeat';
}
// do some changes in your comment
if(document.querySelector('#comment-52605069'))
{
document.querySelector('#comment-52605069 .comment-copy').style.color = 'green';
document.querySelector('#comment-52605069 .comment-copy').style.fontWeight = 700;
document.querySelector('#comment-52605069 .comment-copy').style.fontSize = '24px';
document.querySelector('#comment-52605069 .comment-user').innerHTML = '<span class="akmozo">akmozo</span>';
}
}
This code will give you something like this :
Of course I tried just to give you an example of what you can do, you have to improve and adapt this code to your needs.
Hope that can help.

Blur images in Windows Runtime C# using WriteableBitmapEx

I am trying to blur an image in my new Windows Phone Runtime C# app (WPRT)
I used WriteableBitmapEx NuGet and this code to make my image blured but can't see any changes in my picture . what's going wrong guys ?
public TestXaml()
{
this.InitializeComponent();
....
test();
}
async void test()
{
var ImgFile = await Windows.Storage.StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/TestBG.jpg"));
var wb = new WriteableBitmap(100,100);
using (var strm = await ImgFile.OpenReadAsync())
{
wb = await wb.FromStream(strm);
}
var wb3 = WriteableBitmapExtensions.Convolute(wb, WriteableBitmapExtensions.KernelGaussianBlur5x5);
ImageBrush ib = new ImageBrush();
ib.ImageSource = wb3;
PageBackground.Background = ib;
}
also I tried WriteableBitmapExtensions.KernelGaussianBlur3x3 but still no change

How to add tooltip in map windows phone 8?

My windows 8 phone app programatically add an image (as a pin) to a specific coordinataion in map using mapoverlay. And now i would like to add a tooltip to the image (pin) after tapping on it. Does anyone know how to fix this?
pinIMG = new Image();
pinIMG.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri("/Assets/pin.png", UriKind.Relative));
MapOverlay myLocationOverlay = new MapOverlay();
myLocationOverlay.Content = pinIMG;
myLocationOverlay.PositionOrigin = new Point(0.5, 0.5);
myLocationOverlay.GeoCoordinate = new GeoCoordinate(57.724611, 12.938945);
MapLayer myLocationLayer = new MapLayer();
myLocationLayer.Add(myLocationOverlay);
MyMap.Layers.Add(myLocationLayer);
Instead of adding an Image to the MapOverlay, consider adding an ExpanderView control that expands to add additional data. You'll need to download the Windows Phone Toolkit to get the ExpanderView control. While you're at it you might want to switch over to using Map Extensions Pushpins to get databinding support.
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
MapLayer myLayer = new MapLayer();
MapOverlay myOverlay = new MapOverlay()
{
GeoCoordinate = new GeoCoordinate(-17, 133)
};
ExpanderView expander = new ExpanderView();
expander.Header = new Image()
{
Source = new BitmapImage(new Uri("Assets/ApplicationIcon.png", UriKind.Relative)),
Width = 200
};
expander.ItemsSource = new[]
{
new TextBlock{ Text = "HELLO"}
};
;
myOverlay.Content = expander;
myLayer.Add(myOverlay);
myMap.Layers.Add(myLayer);
}
When we run this sample we can see the following icon over australia:
And once we click ti we can see our "Hello" text show up:
A few ceavets: the code sample above is terrible. ExpanderView is meant to use both ItemSource and IteTemplate for multiple items databinding. Using it for a single item isn't great. The above code sample is also terrible since it creates UI elements in C# code whereas using Map Extensions could have placed this code in XAML.

QrCode Open Source Library for WinRT

I need to generate the Qr Code for my Windows 8 Store App.Is there any Open Source Qr Code Library which is based on Win Rt.
I have made use of zxing library which is available on codeplex.
The method I wrote is as follows:
I'm making use of the DecodeQRcode with storage file from the camera's CaptureFileAsync method which returns the storage file of the qrImgage.
public async void DecodeQRCode(StorageFile file)
{
// load a jpeg, be sure to have the Pictures Library capability in your manifest
var data = await FileIO.ReadBufferAsync(file);
// create a stream from the file
var ms = new InMemoryRandomAccessStream();
var dw = new Windows.Storage.Streams.DataWriter(ms);
dw.WriteBuffer(data);
await dw.StoreAsync();
ms.Seek(0);
// find out how big the image is, don't need this if you already know
var bm = new BitmapImage();
await bm.SetSourceAsync(ms);
// create a writable bitmap of the right size
var wb = new WriteableBitmap(bm.PixelWidth, bm.PixelHeight);
ms.Seek(0);
// load the writable bitpamp from the stream
await wb.SetSourceAsync(ms);
var lsource = new BitmapLuminanceSource(wb);
var binarizer = new HybridBinarizer(lsource);
var bbmp = new BinaryBitmap(binarizer);
var c = new QRCodeReader();
Result res= c.decode(bbmp);
}
While taking the image of the QR code you must make sure that you crop the image properly or else you won't get the expected result.
I have not used this, but ZXing.Net is....
A library which supports decoding and generating of barcodes (like QR
Code, PDF 417, EAN, UPC, Aztec, Data Matrix, Codabar) within images.
and has assembles available for WindowsRT (as well as phone)
You can use the ZXing.NET: https://zxingnet.codeplex.com/
Code for load image to get QR Code result:
FileOpenPicker openPicker = new FileOpenPicker();
openPicker.ViewMode = PickerViewMode.Thumbnail;
openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
openPicker.FileTypeFilter.Add(".png");
openPicker.FileTypeFilter.Add(".jpg");
openPicker.FileTypeFilter.Add(".bmp");
StorageFile file = await openPicker.PickSingleFileAsync();
if (null != file)
{
try
{
BitmapImage bitmap = new BitmapImage();
using (IRandomAccessStream fileStream1 = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
bitmap.SetSource(fileStream1);
}
using (IRandomAccessStream fileStream2 = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
WriteableBitmap writeableBitmap = new WriteableBitmap(bitmap.PixelWidth, bitmap.PixelHeight);
writeableBitmap.SetSource(fileStream2); IBarcodeReader reader = new BarcodeReader();
var result = reader.Decode(writeableBitmap);
txt1.Text = result.ToString();
}
}
catch (Exception exception)
{
//
}
}
Code for get QR from camera (use the MSDN demo: http://code.msdn.microsoft.com/windowsapps/CameraCaptureUI-Sample-845a53ac and customized):
private async void CapturePhoto_Click(object sender, RoutedEventArgs e)
{
try
{
rootPage.NotifyUser("", NotifyType.StatusMessage);
// Using Windows.Media.Capture.CameraCaptureUI API to capture a photo
CameraCaptureUI dialog = new CameraCaptureUI();
Size aspectRatio = new Size(1, 1);
dialog.PhotoSettings.CroppedAspectRatio = aspectRatio;
StorageFile file = await dialog.CaptureFileAsync(CameraCaptureUIMode.Photo);
if (file != null)
{
BitmapImage bitmapImage = new BitmapImage();
using (IRandomAccessStream fileStream1 = await file.OpenAsync(FileAccessMode.Read))
{
bitmapImage.SetSource(fileStream1);
}
CapturedPhoto.Source = bitmapImage;
ResetButton.Visibility = Visibility.Visible;
ZXing.BarcodeReader br = new ZXing.BarcodeReader();
WriteableBitmap wrb = new WriteableBitmap(bitmapImage.PixelWidth, bitmapImage.PixelHeight);
BitmapImage img = new BitmapImage();
img.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
using (IRandomAccessStream fileStream2 = await file.OpenAsync(FileAccessMode.Read))
{
wrb.SetSource(fileStream2);
}
var res = br.Decode(wrb);
rootPage.NotifyUser(res.ToString(), NotifyType.ErrorMessage);
}
else
{
rootPage.NotifyUser("No photo captured.", NotifyType.StatusMessage);
}
}
catch (Exception ex)
{
rootPage.NotifyUser(ex.Message, NotifyType.ErrorMessage);
}
}