I am trying to bind an image that is saved in isolated storage and display it on the same screen as the camera, but I can't seem to get the image to display. I don't know if it because I am not saving it on the phones camera roll, but I am not saving them because I am gonna take multiple pictures and display them like a film strip across the bottom of the view finder for the camera. Can anyone help me please?
I am using this tutorial Here
public partial class Page1 : PhoneApplicationPage
{
private static ObservableCollection<PhotoImage> photoList = new ObservableCollection<PhotoImage>();//For the class and list
private int savedCounter = 0;
public Page1()
{
InitializeComponent();
}
private void ShutterButton_Click(object sender, RoutedEventArgs e)
{
if (cam != null)
{
try
{
// Start image capture.
cam.CaptureImage();
}
catch (Exception ex)
{
this.Dispatcher.BeginInvoke(delegate()
{
txtDebug.Text = ex.Message;
});
}
}
}
void cam_CaptureCompleted(object sender, CameraOperationCompletedEventArgs e)
{
// Increments the savedCounter variable used for generating JPEG file names.
savedCounter++;
}
void cam_CaptureImageAvailable(object sender, Microsoft.Devices.ContentReadyEventArgs e)
{
string fileName = "MyImage" + savedCounter + ".jpg";
try
{
// Save picture to the library camera roll.
//library.SavePictureToCameraRoll(fileName, e.ImageStream);//dont want to save it to the camera roll
// Set the position of the stream back to start
e.ImageStream.Seek(0, SeekOrigin.Begin);
// Save picture as JPEG to isolated storage.
using (IsolatedStorageFile isStore = IsolatedStorageFile.GetUserStoreForApplication())
{
using (IsolatedStorageFileStream targetStream = isStore.OpenFile(fileName, FileMode.Create, FileAccess.Write))
{
// Initialize the buffer for 4KB disk pages.
byte[] readBuffer = new byte[4096];
int bytesRead = -1;
// Copy the image to isolated storage.
while ((bytesRead = e.ImageStream.Read(readBuffer, 0, readBuffer.Length)) > 0)
{
targetStream.Write(readBuffer, 0, bytesRead);
}
}
}
Deployment.Current.Dispatcher.BeginInvoke(delegate()
{
photoList.Add(new PhotoImage(fileName));//here is where I set with the file name
listBoxSearch.ItemsSource = photoList; //here is the binding
});
}
finally
{
// Close image stream
e.ImageStream.Close();
}
}
public class PhotoImage
{
public string PhotoItem { get; set; }
public PhotoImage(string pItem)
{
this.PhotoItem = pItem;
}
}
here is my XAML code
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="640" />
<ColumnDefinition Width="160" />
</Grid.ColumnDefinitions>
<Canvas x:Name="viewfinderCanvas" Width="640" HorizontalAlignment="Left" Margin="0,0,0,143">
<!--Camera viewfinder -->
<Canvas.Background>
<VideoBrush x:Name="viewfinderBrush" />
</Canvas.Background>
<TextBlock Height="40" Name="txtDebug" Width="626" FontSize="24" FontWeight="ExtraBold" Canvas.Left="14" Canvas.Top="297" />
</Canvas>
<!--Button StackPanel to the right of viewfinder>-->
<StackPanel Grid.Column="1" >
<Button x:Name="ShutterButton" Content="SH" Click="ShutterButton_Click" FontSize="26" FontWeight="ExtraBold" Height="75" />
</StackPanel>
<Grid>
<ListBox Foreground="RoyalBlue" Height="131" Name="listBoxSearch" Width="438" TabIndex="10" Margin="96,343,106,6">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="Auto" >
<Image Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0" Source="{Binding PhotoItem }" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
Okay - the issue is that does not have an implicit converter that knows how to take an IsoStorage URI and load it.
One easy solution is to add another property to your PhotoImage class and bind to it instead - here's a quick and dirty:
public ImageSource SourceItem
{
get
{
BitmapImage image = new BitmapImage();
image.SetSource(isStore.OpenFile(PhotoItem, FileMode.Open));
return image;
}
}
Note that this is not a great solution - I am just showing you the general idea. Things to think about when implementing your own:
The stream is not being discarded. Wrap the Stream in a using when setting it into image.
Depending on what you are trying to do, you may want to use image.CreateOptions to make the app more responsive (but then you need to figure out how to handle the stream needing to be kept opened)
Finally, the image that will be loaded will be at full resolution. You may want to look into PictureDecoder.DecodeJpeg() to load a thumbnail of the image instead (or look at the thumbnail provided by the camera object)
Related
my application is basically taking one WPF Canvas containing other controls and serialize it to an XML file and then deserialize it to display the serialized data or a previously saved one. The serialization/deserialization is working fine everything is saved and restored back. The issue is that after deserialization if I try to change an image source with the bellow code it doesn't work:
testLogo.Source = new BitmapImage(new Uri(file.FileName));
The Image is referrenced in the XAML as bellow:
<Canvas Name="mainCanva" Margin="0,0,12,0" Width="1729" Height="150" VerticalAlignment="Top">
<Border BorderThickness="3" BorderBrush="#FF009B80" FlowDirection="LeftToRight" VerticalAlignment="Top" HorizontalAlignment="Left" Width="1729" Height="150">
<Grid Margin="0" Background="White" Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Uid="">
<Grid HorizontalAlignment="Left" Margin="3,28,0,57">
<Image HorizontalAlignment="Left" Margin="0,0,0,0" x:Name="testLogo" Stretch="UniformToFill" Width="317" Source="file:///C:/Users/logo.jpg" />
</Grid>
</Grid>
</Border>
</Canvas>
The Deserialization code is as bellow:
Canvas canvas = DeSerializeXAML(appPath + "\\tmp\\mainCanva.xml") as Canvas;
mainCanva.Children.Clear();
while (canvas.Children.Count > 0)
{
UIElement obj = canvas.Children[0];
canvas.Children.Remove(obj);
mainCanva.Children.Add(obj); // Add to canvas
}
Another point to note is that I tried to find out what was happening using Snoop, after Deserialization Snoop is also unable to change the image source although if I reconnect Snoop to the app by drag and dropping the crosshair Snoop is now able to change the Image source. The 'old' Snoop window can see the image source being updated from the testLogo.Source = command. WPF inspector doesn't have this issue it is immediately updating itself when the deserialization is happening. My guess is that there is something wrong with the visual tree ... and as WPF can do it I think it can be sorted.
Thanks for the help guys.
As requested the Serialize/Deserialize functions:
public static void SerializeToXAML(UIElement element, string filename)
{
string strXAML = System.Windows.Markup.XamlWriter.Save(element);
using (System.IO.FileStream fs = System.IO.File.Create(filename))
{
using (System.IO.StreamWriter streamwriter = new System.IO.StreamWriter(fs))
{
streamwriter.Write(strXAML);
}
}
}
public static UIElement DeSerializeXAML(string filename)
{
using (System.IO.FileStream fs = System.IO.File.Open(filename, System.IO.FileMode.Open, System.IO.FileAccess.Read))
{
return System.Windows.Markup.XamlReader.Load(fs) as UIElement;
}
}
You need to update your variable reference.
When you call mainCanva.Children.Clear(), it removes all the children including testLogo. Your variable testLogo will still be pointing at the original testLogo object even though it's not part of the UI anymore.
Try this:
Canvas canvas = DeSerializeXAML(appPath + "\\tmp\\mainCanva.xml") as Canvas;
mainCanva.Children.Clear();
while (canvas.Children.Count > 0)
{
UIElement obj = canvas.Children[0];
canvas.Children.Remove(obj);
mainCanva.Children.Add(obj); // Add to canvas
}
testLogo = mainCanva.FindName("testLogo") as Image;
I ended up using Application resources:
<Application.Resources>
<BitmapImage x:Key="testLogo" >file:///C:/Users/test_B&W.png</BitmapImage>
</Application.Resources>
then in the code:
Resources["AVItestLogoic"] = ...
This way no matter what happens to the Visual Tree, the application resource always point to the right item
I have the following XAML:
<Image Visibility="Visible"
Source="{Binding ElementName=inkCanvas,
Converter={StaticResource InkCanvasToImageSource},
UpdateSourceTrigger=PropertyChanged}">
</Image>
<InkCanvas x:Name="inkCanvas" />
What I'm trying to do is to convert the InkCanvas Stroke Collection into a BitmapImage. I'm using MVVM, and want to do this on a command. The problem that I have is that the above code will not trigger the converter to fire. I'm using UWP, so I can only pass one of the controls as a command parameter.
I need a method to convert from one to the other, but I'd like to do it inside the ViewModel.
An InkCanvas control is associated with an instance of an InkPresenter object (exposed through the InkPresenter property). The InkPresenter provides properties, methods, and events for managing the input, processing, and rendering of ink data for an InkCanvas control. So binding to InkCanvas won't trigger your converter to fire as the ink input is managed entirely by the InkPresenter. And InkCanvas.InkPresenter property is not a dependency property, we can't bind to this property. So we can't force the Image update with bingding to InkCanvas. We have to do it in code-behind and this may break the MVVM design.
To update the Image, we can use StrokesCollected and StrokesErased event to detect ink input and in these event save all InkStroke objects to a BitmapImage. For example:
In the XAML
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Image x:Name="MyImage" />
<Border Grid.Row="1" BorderBrush="Red" BorderThickness="2">
<InkCanvas x:Name="inkCanvas" />
</Border>
</Grid>
And in the code-behind:
public MainPage()
{
this.InitializeComponent();
...
inkCanvas.InkPresenter.StrokesCollected += InkPresenter_StrokesCollected;
inkCanvas.InkPresenter.StrokesErased += InkPresenter_StrokesErased;
}
private async void InkPresenter_StrokesErased(InkPresenter sender, InkStrokesErasedEventArgs args)
{
var image = await SaveAsync();
MyImage.Source = image;
}
private async void InkPresenter_StrokesCollected(InkPresenter sender, InkStrokesCollectedEventArgs args)
{
var image = await SaveAsync();
MyImage.Source = image;
}
private async Task<BitmapImage> SaveAsync()
{
var bitmap = new BitmapImage();
if (inkCanvas.InkPresenter.StrokeContainer.GetStrokes().Count > 0)
{
try
{
using (InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream())
{
await inkCanvas.InkPresenter.StrokeContainer.SaveAsync(stream);
stream.Seek(0);
bitmap.SetSource(stream);
}
}
catch (Exception ex)
{
System.Diagnostics.Debug.WriteLine(ex);
}
}
return bitmap;
}
Here I just set the image to MyImage, you can also set it to your ViewModel and use Binding in the Image.
I have a problem where im trying to use a Telerik Jump List with DataVirtualizationMode.Automatic, but i can't get it to work. The reason why i want to use this, is because i want my app to only download the data(games) which is in the current view of the Jump List control and not the whole data everytime. For example if i have searched for "Batman", and its returning 50 games, i don't want it to download and load all the games, only those i can see in the Jump List control.
Here is a sample of using DataVirtualizationMode.Automatic from Telerik, but i couldn't get it to work with my app: http://www.telerik.com/help/windows-phone/raddataboundlistbox-features-datavirtualization-automatic.html
Below is my Jump List control which i want to use with data virtualization.
MainPage.xaml:
<phone:PivotItem Header="Browse">
<Grid>
<telerikPrimitives:RadTextBox Name="txtSearch" HorizontalAlignment="Left" VerticalAlignment="Top" Height="80" Width="390"/>
<telerikPrimitives:RadImageButton Name="imgBtnSeachGame" VerticalAlignment="Top" HorizontalAlignment="Right" ButtonShape="Ellipse" BorderThickness="2" Margin="0,8,0,0" Click="imgBtnSeachGame_Click"></telerikPrimitives:RadImageButton>
<Controls:RadJumpList Name="jlGameList" ItemsSource="{Binding}" Tap="jlGameList_Tap" Margin="0,90,0,0" DataVirtualizationMode="Automatic">
<Controls:RadJumpList.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="{StaticResource PhoneAccentBrush}"
Padding="{StaticResource PhoneTouchTargetOverhang}"
Margin="0,0,0,0">
<TextBlock Name="tblGameTitle" Style="{StaticResource PhoneTextGroupHeaderStyle}" ManipulationStarted="tblGameTitle_ManipulationStarted" ManipulationCompleted="tblGameTitle_ManipulationCompleted">
<Run Text="{Binding GameTitle}"></Run>
</TextBlock>
</Border>
<Grid Background="#242424" Grid.Row="1">
<Image Name="imgGameList" Margin="0,0,0,0" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top" Height="96" Width="96">
<Image.Source>
<BitmapImage UriSource="{Binding BoxArtFrontThumb}"
CreateOptions="BackgroundCreation" DecodePixelHeight="96" DecodePixelWidth="96" />
</Image.Source>
</Image>
<TextBlock Margin="110,0,0,0" Text="Platform" FontWeight="Bold" TextWrapping="Wrap" Foreground="YellowGreen" FontSize="{StaticResource PhoneFontSizeNormal}"/>
<TextBlock Name="txtPlatform" Margin="110,20,0,0" Text="{Binding Platform}"></TextBlock>
<TextBlock Text="Release Date" FontWeight="Bold" Margin="110,46,0,0" Foreground="YellowGreen" FontSize="{StaticResource PhoneFontSizeNormal}"/>
<TextBlock Name="txtReleaseDate" Margin="110,66,0,0" Text="{Binding ReleaseDate}"></TextBlock>
<!--</StackPanel>-->
</Grid>
<Grid Grid.Row="2"></Grid>
</Grid>
</DataTemplate>
</Controls:RadJumpList.ItemTemplate>
</Controls:RadJumpList>
</Grid>
</phone:PivotItem>
Below is where i bind my DataContext to my GetGamesListItems ObservableCollection in my GameData class. The imgBtnSearchGame_Click event method is being called when a user have typed for example "Batman" in my textbox txtSearch and tapped the button, it will then send the text to my GetGamesListData method.
MainPage.cs:
GameData gd = new GameData();
public MainPage()
{
InitializeComponent();
jlGameList.DataContext = gd.GetGamesListItems;
}
private void imgBtnSeachGame_Click(object sender, RoutedEventArgs e)
{
if (!string.IsNullOrEmpty(txtSearch.Text))
{
gd.GetGamesListData(txtSearch.Text, "", "");
}
}
Below is where i download the data in XML for the game name searched for. For example if it is "Batman" it will find and return all games with "Batman". The "BoxArtFrontThumb" Property is where im storing all the images for each game and is using async, because sometimes there can be quite alot of images it has to download and show.
GameData.cs
public void GetGamesListData(string name, string platform, string genre)
{
var webClient = new WebClient();
webClient.DownloadStringCompleted += GetGamesListRequestCompleted;
webClient.DownloadStringAsync(new Uri("http://thegamesdb.net/api/GetGamesList.php?name=" + name));
}
private async void GetGamesListRequestCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error == null)
{
GetGamesListItems.Clear();
var feedXml = XDocument.Parse(e.Result);
var gameDataTasks = feedXml.Root.Descendants("Game").Select(
async x => new GetGamesList
{
ID = (int)x.Element("id"),
GameTitle = (string)x.Element("GameTitle"),
ReleaseDate = (string)x.Element("ReleaseDate") ?? "N/A",
Platform = (string)x.Element("Platform") ?? "N/A",
BoxArtFrontThumb = new Uri(await GetBoxArtFrontThumbAsync((int)x.Element("id")), UriKind.RelativeOrAbsolute),
}).ToList();
var gameData = await Task.WhenAll(gameDataTasks);
foreach (var item in gameData)
{
GetGamesListItems.Add(item);
}
}
}
Below is where its finding and storing the images for the games.
public async Task<string> GetBoxArtFrontThumbAsync(int id)
{
var client = new HttpClient();
var result = await client.GetStringAsync("http://thegamesdb.net/api/GetArt.php?id=" + id);
var feedXml = XDocument.Parse(result);
var gameData = feedXml.Root.Descendants("Images").Select(x => new GetArt
{
BoxArtFrontThumb = new Uri(GetBoxArtFrontThumb(x), UriKind.RelativeOrAbsolute),
}).ToList();
return gameData.Single().BoxArtFrontThumb.ToString();
}
private static string GetBoxArtFrontThumb(XElement gameNode)
{
string data = "http://thegamesdb.net/banners/" + (string)gameNode.Descendants("boxart")
.FirstOrDefault(b => (string)b.Attribute("side") == "front");
if (data == "http://thegamesdb.net/banners/")
{
data = "/NoImage.jpg";
}
return data;
}
I really hope i explained this well enough and hope that there is someone that can help me solve this problem. Thanks.
Although you are using JumpList, the mechanism for Virtualizing the data is the same as the DataBoundListBox. (You can find more information here in the DataBoundListBox docs. There is a good tutorial using an OData service.)
In order for the Automatic mode to work properly, you need to be using Telerik's VirtualizingDataCollection object and initialize it with the proper arguments (count and page size).
I don't see this in the code you have provided above, can you please open a support ticket so that I can investigate further? See my comment above for the link. Let me know the ticket number and I'll provide further assistance.
In my WP8 app, i have a page with lisbox where i am binding list of images to in the ItemTemplate with other data. As soon as I leave the page, i feel these images are not freeing up from the memory.
Below are code details:
XAML
<ListBox x:Name="userList" ItemTemplate="{StaticResource DataTemplate1}" Tap="userList_Tap" Loaded="userList_Loaded">
<StackPanel Orientation="Horizontal" Width="220" Height="220" HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image x:Name="episodeImage" HorizontalAlignment="Right" Height="120" Margin="0" VerticalAlignment="Top" Width="120" Source="{Binding DefaultImagePath}" />
<TextBlock x:Name="episodeName" HorizontalAlignment="Left" Margin="4,0,0,36" TextWrapping="Wrap" Width="Auto" Foreground="White" FontFamily="Segoe WP" Text="{Binding ImageName}" VerticalAlignment="Bottom"/>
</StackPanel>
</ListBox>
C# data behind:
public class ImageHolder{
public BitmapImage DefaultImagePath { get; set; }
public string ImageName { get; set; }
}
// list binding
List<ImageHolder> images=Utils.GetLargeImages();
userList.ItemSource=images;
public static List<ImageHolder> GetLargeImages(){
List<ImageHolder> images= new List<ImageHolder>();
for (int i = 0; i < 10; i++)
{
ImageHolder hold=new ImageHolder();
hold.ImageName=i+"";
hold.DefaultImagePath = new BitmapImage
{
DecodePixelWidth = 120,
DecodePixelHeight = 120,
UriSource = new Uri("Image_"+i+".png", UriKind.RelativeOrAbsolute) // this image is in 400x400 size
};
images.Add(hold);
}
return images;
}
I am using DecodePixelWidth and DecodePixelHeight during image fetching in (GetLargeImages() method).
onnavigatedfrom method i am setting null to the Listbox. But doesn't helping it, after couple of times going in and out of pages my app is crashing with OutofMemoryException.
protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
{
userList.ItemsSource = null;
}
Try something that normally should not be done. By calling the Garbage collector.
GC.Collect();
You cann also try when you navigate away to another page to remove navigation backstack which should remove all knowledge of your page and thereby force a reinstantiation of the list and page when going back.
I need you to help me with a problem I am experiencing with. I have a single listbox that is supposed to display a Car Detials (right side) and Car Image (left side) after retrieving them from the database. Note: convert byte into images from database which is working fine. Problem is that the images dont display in the listbox (left side) but only Car Details displayed. Missing Images! I make sure Car and CarImage in WPF style to binding. No idea what I have done wrong in my code or wpf style. I would much aprreciate if you are willing to take a look at my codes what is problem. Your help much appreciated. Thanks!
WPF:
<ListBox Style="{DynamicResource ListBoxStyle1}" DisplayMemberPath="Car" X:Name="listboxCars" />
WPF Style - Car Information (right side) and Car Image (left side):
<DataTemplate x:Key="templateListBoxItem">
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2"
Margin="0,0,10,0">
<!-- binding it to Car Image from database -->
<Image Source="{Binding Path=CarImage}"
Stretch="Fill"
Height="40"
Width="40"></Image>
</Border>
<!-- same here to binding to Car -->
<TextBlock Text="{Binding Path=Car}"
FontWeight="Bold"
Grid.Column="1"
Grid.Row="0"></TextBlock>
</Grid>
</DataTemplate>
<Style x:Key="ListBoxStyle1" TargetType="{x:Type ListBox}">
<Setter Property="ItemTemplate" Value="{StaticResource ResourceKey=templateListBoxItem}"></Setter>
</Style>
This method to retrieve a list of Car Informations with its own Images from database
public List<CarInfo> GetCarImagesList (int days)
{
Cars = new List<CarInfo>();
const string sqlQuery = "select Car, CarImage from CarTemplates where Days = #days order by Car asc";
using (var command = new SqlCommand(sqlQuery, sqlConn))
{
try
{
command.CommandType = CommandType.Text;
command.Parameters.AddWithValue("#days", days);
using (var reader = command.ExecuteReader())
{
while (reader.Read())
{
byte[] buffer = new byte[10000];
var car = new CarInfo
{
Car = reader["Car"].ToString()
};
if (!reader.IsDBNull(reader.GetOrdinal("CarImage")))
{
long size = reader.GetBytes(reader.GetOrdinal("CarImage"), 0, buffer, 0, 10000);
using (MemoryStream strm = new MemoryStream())
{
strm.Write(buffer, 0, (int) size);
strm.Position = 0;
System.Drawing.Image img = System.Drawing.Image.FromStream(strm);
car.CarImage = img;
}
}
Cars.Add(car);
}
}
.
.
.
return Cars;
}
Last thing: when you click the button, the listbox will display CarInformation (right side) and CarImage (left side). In runtime I check that there is a list of CarInformations and CarImages in _databaseCarList. There is even value (byte) of Images (list.CarImage) but why dont images display?
private void Button1_Click(object sender, SelectionChangedEventArgs e)
{
_carImageList = new CarImageExtractor();
const int oneDay = 1;
var lstCar = new List<CarInfo>();
_databaseCarList = new ObservableCollection<CarInfo>(_carImageList.GetCarImagesList(oneDay));
if (_databaseCarList != null)
{
foreach (var list in _databaseCarList)
{
lstCar.Add(new CarInfo{Car = list.Car, CarImage = list.CarImage});
}
listboxCars.ItemsSource = lstCar;
}
}
You are using a WindowsForms image (System.Drawing.Image) that is not support by WPF as ImageSource for the Image. (When debugging in VisualStudio you should get binding errors from ImageSourceConverter)
For WPF you need to use BitmapImage.
Change your property CarImage to type System.Windows.Media.Imaging.BitmapImage and change the initialization code of your image to the following.
strm.Write(buffer, 0, (int) size);
strm.Position = 0;
BitmapImage img = new BitmapImage();
img.BeginInit();
img.StreamSource= strm;
img.EndInit();
car.CarImage = img;