Develop Reference

Binding an image to ImageBrush

i am having an issue while trying to bind an image to an ImageSource. I have tried some of the other fix on stackoverflow but none of them works.
I seem to get an error on this line saying that collection "Items" must be empty.
ImageList.ItemsSource = List;
The bind works well while using the "url" member of the FlickrData class.
MainWindow.xaml
<ScrollViewer>
<ListView x:Name="ImageList" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<Rectangle Margin="5" Width="100" Height="100">
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding imageBinding}"/>
</Rectangle.Fill>
</Rectangle>
</ListView>
</ScrollViewer>
FlickrData Class:
public class FlickrData
{
public String url { get; set;}
public FlickrData(Photo photo)
{
url = photo.SmallUrl;
}
public ImageBrush imageBinding
{
get
{
ImageBrush brush = new ImageBrush();
brush.ImageSource = new BitmapImage(new Uri(url));
return brush;
}
}
}
MainWindow class:
public partial class MainWindow : Window
{
public ObservableCollection<FlickrData> List = new ObservableCollection<FlickrData>();
public static Flickr flickr = new Flickr("XXXXXXXXXXXXXX");
public MainWindow()
{
InitializeComponent();
}
public void SearchWithInput(object sender, RoutedEventArgs e)
{
var options = new PhotoSearchOptions { Tags = SearchInput.Text, PerPage = 20, Page = 1 };
PhotoCollection photos = flickr.PhotosSearch(options);
List.Clear();
foreach (Photo photo in photos)
{
String flickrUrl = photo.WebUrl;
Console.WriteLine("Photo {0} has title {1} with url {2}", photo.PhotoId, photo.Title, photo.WebUrl);
List.Add(new FlickrData(photo));
}
ImageList.ItemsSource = List;
}
}

Do this to clean up the process
Change your XAML's ListView to ItemsSource="{Binding List}" which only needs to be done once.
Remove the now redundant ImageList.ItemsSource = List;
The list control will update itself accordingly because an ObservableCollection sends notifications of the change which are subscribed to by the list control.

Image edit exceptions

I'm working in WPF application with MVVM. Loading and Editing a image in imageSlider gives me error and exceptions.
Loading Image: Insufficient memory to handle
Editing Image: Sharing violation
ViewModel:
public class ImageList : INotifyPropertyChanged
{
#region Fields
private ObservableCollection<ImageItem> images = new ObservableCollection<ImageItem>();
private int selectedIndex;
private ImageItem currentImage;
#endregion Fields
#region Properties
public ObservableCollection<ImageItem> Images
{
get { return images; }
set { images = value; }
}
public int SelectedIndex
{
get { return selectedIndex; }
set
{
if(value < Images.Count && value > -1)
{
selectedIndex = value; OnPropertyChanged();
CurrentImage = Images[selectedIndex];
}
}
}
public ImageItem CurrentImage
{
get { return currentImage; }
set { currentImage = value; OnPropertyChanged(); }
}
#endregion Properties
#region Public Methods
public void Next()
{
SelectedIndex ++;
}
public void Back()
{
SelectedIndex--;
}
#endregion Public Methods
#region Methods
public void AddNewImage()
{
OpenFileDialog dlg = new OpenFileDialog();
dlg.Filter = "Image files (*.jpg, *.jpeg, *.jpe, *.gif, *.png, *.bmp, *.tif) | *.jpg; *.jpeg; *.jpe; *.gif; *.png, *.bmp, *.tif";
dlg.ShowDialog();
if(dlg.FileName != "")
{
Images.Add(new ImageItem() { URI = new Uri(dlg.FileName) });
SelectedIndex = Images.Count - 1;
}
}
#endregion Methods
#region Constructors
public ImageList()
{
_canExecute = true;
}
#endregion Constructors
#region Commands
private ICommand _clickCommand;
public ICommand ClickCommand
{
get
{
return _clickCommand ?? (_clickCommand = new CommandHandler(() => AddNewImage(), _canExecute));
}
}
private bool _canExecute;
private ICommand nextCommand;
public ICommand NextCommand
{
get
{
if (nextCommand == null)
{
nextCommand = new CommandHandler(()=> OnNextCommand(), true);
}
return nextCommand;
}
set { nextCommand = value; }
}
private void OnNextCommand()
{
Next();
}
private ICommand backCommand;
public ICommand BackCommand
{
get
{
if(backCommand == null)
{
backCommand = new CommandHandler(() => OnBackCommand(), true);
}
return backCommand;
}
set { backCommand = value; }
}
private void OnBackCommand()
{
Back();
}
private ICommand _clickCommand;
public ICommand ClickCommand
{
get
{
return _clickCommand ?? (_clickCommand = new CommandHandler(() => AddNewImage(), _canExecute));
}
}
private ICommand _EditImageCommand;
public ICommand EditImageCommand
{
get
{
return _EditImageCommand ?? (_EditImageCommand = new CommandHandler(obj => EditImage(obj), _canExecute));
}
}
#endregion Commands
public void EditImage(object obj)
{
string ss = ((ImageItem)obj).URI.AbsolutePath;
Process proc = Process.Start(ss);
if (proc != null)
{
proc.EnableRaisingEvents = true;
ProcessStartInfo startInfo = new ProcessStartInfo();
//startInfo.Verb = "edit";
startInfo.FileName = ("mspaint.exe");
proc.StartInfo = startInfo;
}
}
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
#endregion INotifyPropertyChanged
}`
Model:
public class ImageItem
{
public Uri URI { get; set; }
private BitmapSource _Source;
public BitmapSource Source
{
get
{
try
{
if (_Source == null) _Source = new BitmapImage(URI);//lazy loading
}
catch (Exception)
{
_Source = null;
}
return _Source;
}
}
public void Save(string filename)
{
var img = BitmapFrame.Create(Source);
var encoder = new JpegBitmapEncoder();
encoder.Frames.Add(img);
using (var saveStream = System.IO.File.OpenWrite(filename))
encoder.Save(saveStream);
}
}
XAML
<DockPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="200"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="30"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="<" Command="{Binding BackCommand}" Width="25" Grid.Row="0" Grid.Column="0"/>
<Button DockPanel.Dock="Right" Content=">" Command="{Binding NextCommand}" Width="25" Grid.Row="0" Grid.Column="2"/>
<Image Source="{Binding CurrentImage.Source, Mode=OneWay}" Grid.Row="0" Grid.Column="1">
<Image.ContextMenu>
<ContextMenu>
<MenuItem Header="Edit Image" Command="{Binding EditImageCommand, Source={StaticResource SliderViewModel}}" CommandParameter="{Binding CurrentImage}"></MenuItem>
</ContextMenu>
</Image.ContextMenu>
</Image>
<Button Content="Add" Command="{Binding ClickCommand}" Height="30" Width="50" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4"></Button>
<!--<Image Source="{Binding CurrentImage.Source, Mode=OneWay}" Grid.Row="2" Grid.Column="1"/>-->
</Grid>
</DockPanel>
The code above works fine with the imageSlider(Next and Back). But during edit it opens in mspaint and when i save it throws me Sharing violation error. Tired few solutions posted in SO here and here . When trying these i can able to edit the image and save without any error. But when using the Slider control (Next and Back) and when it loads heavier images, frequently it throws me Insufficient memory to handle exception.
So now i need to eliminate both these issues. Kindly help.

You need to do things a little differently for an editor to a viewer
your Model needs to be updated to a ViewModel as it will be changing ( you can use the model to build the ViewModel, however in this case there is so little functionality in the Model that you might as well use the FIleInfo class as your model)
public class ImageEditor: IDisposable,INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private List<FileInfo> images = new List<FileInfo>();
private FileInfo _ImageFile;
public static readonly PropertyChangedEventArgs FilenameProperty = new PropertyChangedEventArgs(nameof(ImageFile));
public FileInfo ImageFile
{
get { return _ImageFile; }
set
{
_ImageFile = value;
Strokes.Clear();
PropertyChanged?.Invoke(this, ImageFrameProperty);
}
}
private int selectedIndex;
public static readonly PropertyChangedEventArgs SelectedIndexProperty = new PropertyChangedEventArgs(nameof(SelectedIndex));
public int SelectedIndex
{
get { return selectedIndex; }
private set
{
if (value < images.Count && value > -1)
{
selectedIndex = value;
PropertyChanged?.Invoke(this, SelectedIndexProperty);
ImageFile = images[selectedIndex];
Load();
}
}
}
MemoryStream mem;
private BitmapSource _ImageFrame;
public static readonly PropertyChangedEventArgs ImageFrameProperty = new PropertyChangedEventArgs(nameof(ImageFrame));
public BitmapSource ImageFrame
{
get { return _ImageFrame; }
set
{
_ImageFrame = value;
PropertyChanged?.Invoke(this, ImageFrameProperty);
}
}
public StrokeCollection Strokes { get; } = new StrokeCollection();
public void Open(FileInfo file)
{
images.Add(file);
SelectedIndex = images.Count - 1;
}
public void Next()
{
SelectedIndex++;
}
public void Back()
{
SelectedIndex--;
}
public void Load()
{
ImageFile.Refresh();
if (ImageFile.Exists)
{
if (mem != null)
{
mem.Dispose();
}
using (var stream = ImageFile.OpenRead())
{
mem = new MemoryStream();
stream.CopyTo(mem);
}
ImageFrame = BitmapFrame.Create(mem);
}
}
public void Dispose()
{
if (mem != null)
{
mem.Dispose();
}
ImageFrame = null;
}
public void Save()
{
DrawingVisual drawingVisual = new DrawingVisual();
using (DrawingContext drawingContext = drawingVisual.RenderOpen())
{
drawingContext.DrawImage(ImageFrame, new Rect(0, 0, ImageFrame.Width, ImageFrame.Height));
foreach (var item in Strokes)
{
item.Draw(drawingContext);
}
drawingContext.Close();
Strokes.Clear();
var width = ImageFrame.Width;
var height = ImageFrame.Height;
var bitmap = new RenderTargetBitmap((int)width, (int)height, 96, 96, PixelFormats.Pbgra32);
bitmap.Render(drawingVisual);
ImageFrame = bitmap;
var encoder = new PngBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(ImageFrame));
using (var stream = ImageFile.OpenWrite())
{
encoder.Save(stream);
}
}
}
}
note: as we are using a memory stream with out the using statement then its a good idea to us the IDisposable interface for clean up
what this is doing is creating a memory resident bitmap then using that as a Frame, this removes the openRead lock on on the file that you get with a normal bitmap with a URI
next we have the Editor itself
<Window x:Class="ImageDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ImageDemo"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525" Closing="Window_Closing" >
<Window.DataContext>
<local:ImageEditor x:Name="editor" />
</Window.DataContext>
<DockPanel>
<Menu DockPanel.Dock="Top" >
<MenuItem Header="File" >
<MenuItem Command="ApplicationCommands.Open" />
<MenuItem Command="ApplicationCommands.Save" />
</MenuItem>
<MenuItem Command="ApplicationCommands.Undo" />
<ComboBox SelectedValue="{Binding DefaultDrawingAttributes.Color, ElementName=inkCanvas}">
<Color>White</Color>
<Color>Black</Color>
<Color>Yellow</Color>
<Color>Red</Color>
<Color>Cyan</Color>
<Color>SpringGreen</Color>
<ComboBox.ItemTemplate>
<DataTemplate>
<Rectangle Width="15" Height="15">
<Rectangle.Fill>
<SolidColorBrush Color="{Binding Mode=OneWay}" />
</Rectangle.Fill>
</Rectangle>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</Menu>
<Button Content="<" Click="Back_Click"/>
<Button Content=">" DockPanel.Dock="Right" Click="Next_Click"/>
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Image Source="{Binding ImageFrame}" Stretch="None"/>
<InkCanvas x:Name="inkCanvas" Background="Transparent" Strokes="{Binding Strokes}" >
<InkCanvas.DefaultDrawingAttributes>
<DrawingAttributes x:Name="DrawSetting" />
</InkCanvas.DefaultDrawingAttributes>
</InkCanvas>
</Grid>
</DockPanel>
</Window>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
CommandBindings.Add(new CommandBinding(ApplicationCommands.Save, execSave, hasChanged));
CommandBindings.Add(new CommandBinding(ApplicationCommands.Open, execOpen));
CommandBindings.Add(new CommandBinding(ApplicationCommands.Undo, execUndo, hasChanged));
}
private void execOpen(object sender, ExecutedRoutedEventArgs e)
{
OpenFileDialog dlg = new OpenFileDialog();
if(dlg.ShowDialog() ?? false)
{
editor.Open(new System.IO.FileInfo(dlg.FileName));
}
e.Handled = true;
}
private void hasChanged(object sender, CanExecuteRoutedEventArgs e)
{
e.CanExecute = editor.Strokes.Count > 0;
e.Handled = true;
}
private void execUndo(object sender, ExecutedRoutedEventArgs e)
{
editor.Strokes.Remove(editor.Strokes.Last());
e.Handled = true;
}
private void execSave(object sender, ExecutedRoutedEventArgs e)
{
editor.Save();
e.Handled = true;
}
private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
{
editor.Dispose();
}
private void Next_Click(object sender, RoutedEventArgs e)
{
editor.Next();
}
private void Back_Click(object sender, RoutedEventArgs e)
{
editor.Back();
}
}
Note if you are doing any scaling/stretching on the image then you need to reverse the operation on the Strokes before rendering them or or the edits will be in relation to the screen not the image

Infragistics multiple series with different XAxis (DateTime) areas

I need show two line series on single area. They are have share X-axis (DateTime) and different Y-axis.
Use CategoryXAxis
If I used CategoryXAxis type for X-axis than I see two series, but they are not synchronized by X-axis (you can see it on tooltip).
_categoryXAxis = new CategoryXAxis()
{
ItemsSource = enumerable,
FontSize = 10,
};
Use CategoryDateTimeXAxis
If I using CategoryDateTimeXAxis type for X-axis than I see SINGLE series, and I see two tooltip, but they are not synchronized by X-axis (you can see it on tooltip).
_categoryXAxis = new CategoryDateTimeXAxis()
{
ItemsSource = enumerable,
DateTimeMemberPath = "DateTime",
DisplayType = TimeAxisDisplayType.Continuous,
FontSize = 10,
MinimumValue = new DateTime(2000, 1, 1),
MaximumValue = new DateTime(2017, 1, 1),
};
What can I do?

The example below demonstrates how to synchronize the DateTime axis for two series:
MainWindow.xaml
<Window x:Class="xamDataChartMultipleSeries.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ig="http://schemas.infragistics.com/xaml"
Title="XamDataChart" Height="350" Width="525" >
<Grid>
<Grid.Resources>
<DataTemplate x:Key="DataTrackerTemplate">
<Ellipse Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
MinWidth="15" MinHeight="15" StrokeThickness="0.5"
Fill="{Binding Path=ActualItemBrush}" Stroke="{Binding Path=Series.ActualMarkerOutline}" >
</Ellipse>
</DataTemplate>
</Grid.Resources>
<ig:XamDataChart Name="MultipleSeriesChart" Padding="5"
OverviewPlusDetailPaneVisibility="Collapsed"
OverviewPlusDetailPaneHorizontalAlignment="Left"
OverviewPlusDetailPaneVerticalAlignment="Bottom" >
<ig:XamDataChart.Axes>
<ig:CategoryDateTimeXAxis x:Name="xAxis" Title="TIME (min)" Label="{}{DateTime:MM/dd/yyyy}" DateTimeMemberPath="DateTime" DisplayType="Discrete" >
<ig:CategoryDateTimeXAxis.LabelSettings>
<ig:AxisLabelSettings Location="OutsideBottom" Angle="40" />
</ig:CategoryDateTimeXAxis.LabelSettings>
</ig:CategoryDateTimeXAxis>
<ig:NumericYAxis x:Name="yAxis" Title="" Label="{}{0:0.##}" Interval="0.25" />
</ig:XamDataChart.Axes>
<ig:XamDataChart.Series>
<ig:LineSeries x:Name="Series1" XAxis="{Binding ElementName=xAxis}" YAxis="{Binding ElementName=yAxis}" ValueMemberPath="Series1"
MarkerType="None" Thickness="2" IsTransitionInEnabled="True" IsHighlightingEnabled="True" Brush="Blue" >
<ig:LineSeries.ToolTip>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="X= " />
<TextBlock Text="{Binding Item.DateTime}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,4,0,0">
<TextBlock Text="Y= " />
<TextBlock Text="{Binding Item.Series1, StringFormat={}{0:#,0.000}}" />
</StackPanel>
</StackPanel>
</ig:LineSeries.ToolTip>
</ig:LineSeries>
<ig:LineSeries x:Name="Series2" XAxis="{Binding ElementName=xAxis}" YAxis="{Binding ElementName=yAxis}" ValueMemberPath="Series2"
MarkerType="None" Thickness="2" IsTransitionInEnabled="True" IsHighlightingEnabled="True" Brush="Green">
<ig:LineSeries.ToolTip>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="X= " />
<TextBlock Text="{Binding Item.DateTime}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,4,0,0">
<TextBlock Text="Y= " />
<TextBlock Text="{Binding Item.Series2, StringFormat={}{0:#,0.000}}" />
</StackPanel>
</StackPanel>
</ig:LineSeries.ToolTip>
</ig:LineSeries>
<ig:CategoryItemHighlightLayer x:Name="TackingLayer" Opacity="1" MarkerTemplate="{StaticResource DataTrackerTemplate}" UseInterpolation="True"
TransitionDuration="0:00:00.1" Canvas.ZIndex="11" />
<ig:ItemToolTipLayer x:Name="ToolTipLayer" Canvas.ZIndex="12" UseInterpolation="True" TransitionDuration="0:00:00.1" />
<ig:CrosshairLayer x:Name="CrosshairLayer" Opacity="1" Thickness="1" Canvas.ZIndex="15" UseInterpolation="True" TransitionDuration="0:00:00.1"/>
</ig:XamDataChart.Series>
</ig:XamDataChart>
</Grid>
</Window>
MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Windows;
using System.ComponentModel;
namespace xamDataChartMultipleSeries
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
int points = 20;
List<Point> data = new List<Point>();
public MainWindow()
{
InitializeComponent();
double x = 0;
var step = 2 * Math.PI / points;
var now = DateTime.Now;
xAxis.MinimumValue = now;
xAxis.MaximumValue = now.AddDays(points);
xAxis.Interval = new TimeSpan(0,6,0,0);
var next = now;
for (var i = 0; i < points; i++, x += step)
{
next = next.AddDays(1);
Data.Add(new ChartDataItem() { DateTime=next, Series1 = Math.Sin(x), Series2 = Math.Cos(x) });
}
if (!DesignerProperties.GetIsInDesignMode(this))
{
xAxis.ItemsSource = Series1.ItemsSource = Series2.ItemsSource = Data;
}
}
// ChartDataCollection
public ChartDataCollection Data = new ChartDataCollection();
}
}
ChartData.cs
using System;
using System.Collections.ObjectModel;
using Infragistics.Samples.Shared.Models;
namespace xamDataChartMultipleSeries
{
public class ChartDataCollection : ObservableCollection<ChartDataItem>
{
public ChartDataCollection() { }
}
public class ChartDataItem : ObservableModel
{
public ChartDataItem() { }
public ChartDataItem(ChartDataItem dataPoint)
{
this.DateTime = dataPoint.DateTime;
this.Series1 = dataPoint.Series1;
this.Series2 = dataPoint.Series2;
}
private DateTime _dt;
public DateTime DateTime
{
get { return _dt; }
set { if (_dt == value) return; _dt = value; }
}
private double _series1;
public double Series1
{
get { return _series1; }
set { if (_series1 == value) return; _series1 = value; OnPropertyChanged("Series1"); }
}
private double _series2;
public double Series2
{
get { return _series2; }
set { if (_series2 == value) return; _series2 = value; OnPropertyChanged("Series2"); }
}
public new string ToString()
{
return base.ToString();
}
}
}
The helper class included to the Infragistics examples:
ObservableModel.cs
using System.ComponentModel;
using System.Runtime.Serialization;
namespace Infragistics.Samples.Shared.Models
{
[DataContract]
public abstract class ObservableModel : INotifyPropertyChanged
{
protected ObservableModel()
{
IsPropertyNotifyActive = true;
}
#region INotifyPropertyChanged
public bool IsPropertyNotifyActive { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
protected bool HasPropertyChangedHandler()
{
PropertyChangedEventHandler handler = this.PropertyChanged;
return handler != null;
}
protected void OnPropertyChanged(object sender, PropertyChangedEventArgs e)
{
PropertyChangedEventHandler handler = this.PropertyChanged;
if (handler != null && IsPropertyNotifyActive)
handler(sender, e);
}
protected void OnPropertyChanged(PropertyChangedEventArgs e)
{
OnPropertyChanged(this, e);
}
protected void OnPropertyChanged(object sender, string propertyName)
{
OnPropertyChanged(sender, new PropertyChangedEventArgs(propertyName));
}
protected virtual void OnPropertyChanged(string propertyName)
{
OnPropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
protected delegate void PropertyChangedDelegate(object sender, string propertyName);
#endregion
}
}

Why are my BitmapImages not displaying?

Ad[a,o]pting Brundritt's example here, which he referenced in responding to my earlier BingMaps question, I have been able to display certain data in an "infobox" like so:
...but am not getting the BitmapImage that is part of the data I intend to display.
My question is why are the images not displaying, and what do I need to go in order to display them?
It's not the data - I've saved the thumbnail image to a SQLite database, where it is stored as an array of bytes, but which can be seen as images in SQLiteToolbox:
:
So as you can see, the String data is displaying fine, but not the image. Here is the pertinent code I've got for retrieving the data and displaying it:
// The class used to create the SQLite table
public class PhotraxBaseData
{
[SQLite.PrimaryKey]
[SQLite.AutoIncrement]
public int Id { get; set; }
. . .
public DateTime dateTimeTaken { get; set; }
public String filePath { get; set; }
public Byte[] thumbnail { get; set; }
}
private async void Gener8MapMarkers(List<PhotraxBaseData> _pbd)
{
foreach (PhotraxBaseData pbd in _pbd)
{
String descAndFilename = Path.GetFileName(pbd.filePath);
if (null != pbd.imgDescription)
{
descAndFilename = String.Format("{0} - {1}", pbd.imgDescription, descAndFilename);
}
BitmapImage bmi = await PhotraxUtils.ByteArrayToBitmapImage(pbd.thumbnail);
if (PhotraxUtils.ValidLatAndLong(pbd.latitude, pbd.longitude))
{
Location loc = new Location(pbd.latitude, pbd.longitude);
AddPushpin(loc, descAndFilename, pbd.dateTimeTaken, null, DataLayer);
}
}
}
public static async Task<BitmapImage> ByteArrayToBitmapImage(this byte[] byteArray)
{
// from http://dotnetspeak.com/2013/04/convert-byte-array-to-an-image-in-winrt
if (byteArray != null)
{
using (var stream = new InMemoryRandomAccessStream())
{
await stream.WriteAsync(byteArray.AsBuffer());
var image = new BitmapImage();
stream.Seek(0);
image.SetSource(stream);
return image;
}
}
return null;
}
public class PushpinMetadata
{
public string DescAndFileName { get; set; }
public DateTime DateTimeTaken { get; set; }
public BitmapImage Thumbnail { get; set; }
}
public void AddPushpin(Location latlong, string descAndFileName, DateTime dateTimeTaken, BitmapImage thumbnail, MapLayer layer)
{
Pushpin p = new Pushpin()
{
Tag = new PushpinMetadata()
{
DescAndFileName = descAndFileName,
DateTimeTaken = dateTimeTaken,
Thumbnail = thumbnail
}
};
MapLayer.SetPosition(p, latlong);
p.Tapped += PinTapped;
layer.Children.Add(p);
}
private void PinTapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
Pushpin p = sender as Pushpin;
PushpinMetadata m = (PushpinMetadata)p.Tag;
//Ensure there is content to be displayed
if (!String.IsNullOrEmpty(m.DescAndFileName))
{
Infobox.DataContext = m;
Infobox.Visibility = Visibility.Visible;
MapLayer.SetPosition(Infobox, MapLayer.GetPosition(p));
}
else
{
Infobox.Visibility = Visibility.Collapsed;
}
}
The XAML:
<bm:Map.Children>
<!-- Data Layer-->
<bm:MapLayer Name="DataLayer"/>
<!--Common Infobox-->
<bm:MapLayer>
<Grid x:Name="Infobox" Visibility="Collapsed" Margin="0,-115,-15,0">
<Border Width="300" Height="110" Background="Black" Opacity="0.8" BorderBrush="White" BorderThickness="2" CornerRadius="5"/>
<StackPanel Height="100" Margin="5">
<Grid Height="40">
<TextBlock Text="{Binding DescAndFileName}" FontSize="20" Width="250" TextWrapping="Wrap" HorizontalAlignment="Left" />
<Button Content="X" Tapped="CloseInfobox_Tapped" HorizontalAlignment="Right" VerticalAlignment="Top"/>
</Grid>
<Grid Height="40">
<Viewbox Height="200" Stretch="Uniform" StretchDirection="Both">
<Image Source="{Binding Thumbnail}" Width="Auto" Height="Auto" Margin="2"/>
</Viewbox>
</Grid>
<Grid Height="40">
<TextBlock Text="{Binding DateTimeTaken}" FontSize="16" Width="290" TextWrapping="Wrap" Height="Auto"/>
</Grid>
</StackPanel>
</Grid>
</bm:MapLayer>
<callisto:CustomDialog Content="CustomDialog" Height="100" Width="100"/>
</bm:Map.Children>
My guess is that the Image's Source property doesn't quite know what to do with the BitmapImage it's bound to via "Thumbnail"; but I don't know how to unbabelize the mismatch (presuming that's where the problem lies).
UPDATE
To answer Faye's brother Chris, here is the "database" (SQLite class) declaration:
public Byte[] thumbnail { get; set; }
Here is where I was calling the converter method, passing the appropriate member of the class instance, and then adding a pushpin:
BitmapImage bmi = await PhotraxUtils.ByteArrayToBitmapImage(pbd.thumbnail);
if (PhotraxUtils.ValidLatAndLong(pbd.latitude, pbd.longitude))
{
Location loc = new Location(pbd.latitude, pbd.longitude);
//AddPushpin(loc, descAndFilename, pbd.dateTimeTaken, null, DataLayer);
AddPushpin(loc, descAndFilename, pbd.dateTimeTaken, bmi, DataLayer);
}
However: MY BAD, PEOPLES!!!
I had neglected to replace my placeholder "null" arg with "bmi" (you can see my previous code commented out above, and my new working call to AddPushpin() below it). The image's size/scale is all wrong, but that can be fixed easily enough, I reckon.
I don't know whether to jump for joy or kick myself in the keister, so I think I'll do both simultaneously.
Thanks to Mr. Dunaway for making me look closer at my code - something I obviously should have done before posting.

DataTemplate binding doesn't work?

I'm write the following code for binding some properties
<StackPanel x:Name="channelsRecordTimeData" Orientation="Vertical">
<ItemsControl x:Name="channelRecordTimeItems" ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="gridChannelRecordTimeItem" Width="{Binding Path=ChannelRecordTimeItemWidth}"
Height="{Binding Path=ChannelRecordTimeItemHeight}" Margin="{Binding Path=ChannelRecordTimeItemsMargin}"
HorizontalAlignment="Left" DataContext="{Binding Path=ListRecordTime}">
<Grid.Background>
<ImageBrush x:Name="gridChannelRecordTimeItemBgr" ImageSource="..\Resources\playback_grid_channel_record_time_item_bgr_normal.png"/>
</Grid.Background>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
public class DATA
{
public double ChannelRecordTimeItemWidth { set; get; }
public double ChannelRecordTimeItemHeight { set; get; }
public Thickness ChannelRecordTimeItemsMargin { set; get; }
public List<RecordTime> ListRecordTime { set; get; }
public DATA()
{
ChannelRecordTimeItemWidth = 1000;
ChannelRecordTimeItemHeight = 20;
ChannelRecordTimeItemsMargin = new System.Windows.Thickness(0, 0, 0, 0);
ListRecordTime = null;
}
}
public static List<DATA> listDATA = new List<DATA>();
for(int i = 0 ; i < 10 ; i++)
{
DATA data = new DATA();
listDATA.Add(data);
}
channelRecordTimeItems.ItemsSource = listDATA;
channelRecordTimeItems.Items.Refresh();
At above code, I have added 10 items in StackPanel, but I don't see any items added when run app.
But when I replace Width="{Binding Path=ChannelRecordTimeItemWidth}" by Width="1000" and replace Height="{Binding Path=ChannelRecordTimeItemHeight}" by Height="20", then it work fine!
I think, this is problem of binding, but I don't know why.
Someone can tell me how to make it work?
Many thanks,
T&T

Update your DATA class to implement INotifyPropertyChanged like so:
public class DATA : : INotifyPropertyChanged
{
private double _channelRecordTimeItemWidth;
private double _channelRecordTimeItemHeight;
private Thickness _channelRecordTimeItemsMargin;
private List<RecordTime> _listRecordTime;
public double ChannelRecordTimeItemWidth
{
get { return _channelRecordTimeItemWidth; }
set
{
_channelRecordTimeItemWidth = value;
OnPropertyChanged("ChannelRecordTimeItemWidth");
}
}
public double ChannelRecordTimeItemHeight
{
get { return _channelRecordTimeItemHeight; }
set
{
_channelRecordTimeItemHeight = value;
OnPropertyChanged("ChannelRecordTimeItemHeight");
}
}
public Thickness ChannelRecordTimeItemsMargin
{
get { return _channelRecordTimeItemsMargin; }
set
{
_channelRecordTimeItemsMargin = value;
OnPropertyChanged("ChannelRecordTimeItemsMargin");
}
}
public List<RecordTime> ListRecordTime
{
get { return _listRecordTime; }
set
{
_listRecordTime = value;
OnPropertyChanged("ListRecordTime");
}
}
public DATA()
{
ChannelRecordTimeItemWidth = 1000;
ChannelRecordTimeItemHeight = 20;
ChannelRecordTimeItemsMargin = new System.Windows.Thickness(0, 0, 0, 0);
ListRecordTime = null;
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
}
This will notify the XAML to update the bounded value.
The DataContext should also be set correctly. First remove the bound DataContext of the Grid:
<DataTemplate>
<Grid x:Name="gridChannelRecordTimeItem" Width="{Binding Path=ChannelRecordTimeItemWidth}"
Height="{Binding Path=ChannelRecordTimeItemHeight}" Margin="{Binding Path=ChannelRecordTimeItemsMargin}"
HorizontalAlignment="Left">
<Grid.Background>
<ImageBrush x:Name="gridChannelRecordTimeItemBgr" ImageSource="..\Resources\playback_grid_channel_record_time_item_bgr_normal.png"/>
</Grid.Background>
</Grid>
</DataTemplate>
and make sure that the DataContext for the XAML (whether it is a UserControl, Window, etc), is set to your DATA class.

Your solution cannot work because of this line
DataContext="{Binding Path=ListRecordTime}"
This line sets datacontext for the grid, then you are trying to get ChannelRecordTimeItemHeight from datacontext - list of recordtimes.
Delete this line and see what happens