I have a Xamarin Forms app and what I want to do is to set the source of an Image View to a specific Image in my disk in UWP.
That is to say, I have the absolute path of my image which is in my disk, and I want to set the source of an Image View programmatically.
I have tried using
image.Source = ImageSource.FromFile(filePath);
But it didn't work in UWP, although it does work in Android.
A good way to do what you want is in your ViewModel to use a method where you put the path based on the OS
View
<Image Source="{Binding ImagePath}" />
ViewModel example
public string ImagePath
{
get
{
return _path;
}
set
{
if (_path != value)
{
_path = value;
OnPropertyChanged("ImagePath");
}
}
}
private string _path;
When you set a path for an image you can use a function like that:
public static class OSHelpers {
/// <summary>
/// Sets the os image path.
/// </summary>
/// <param name="ImageName">Name of the image.</param>
/// <returns>System.String.</returns>
public static string SetOSImagePath(string ImageName) {
string rtn = ImageName;
if (Device.OS == TargetPlatform.Windows || Device.OS == TargetPlatform.WinPhone) {
rtn = "Images/" + ImageName;
}
return rtn;
}
}
Related
How do you allow users to copy and paste from an Xamarin.Forms Label?
Click on the text on any platform the default settings don't allow highlighting and therefore copying and pasting.
Any help would be appreciated.
What you could do is wrap your label in a gesture recogniser:
<Label Text="Test">
<Label.GestureRecognizers>
<TapGestureRecognizer
Tapped="YourFunctionToHandleMadTaps"
NumberOfTapsRequired="1"
/>
</Label.GestureRecognizers>
</Label>
This will trigger your function and in that function you can get to the clipboard and copy and paste. However I haven't been able to find an easy way to access the clipboard in Xamarin.Forms so you have to use the dependency service.
Xamarin.Forms Dependency service documentation
Here is how I did my clipboard data access. Please note that in my project I only needed to nab data from the clipboard so this code just shows you how to access the clipboard data:
Create an interface in you X.F project eg:
public interface IClipBoard
{
String GetTextFromClipBoard();
}
Implement the interface in your mobile projects:
Android:
public string GetTextFromClipBoard ()
{
var clipboardmanager = (ClipboardManager)Forms.Context.GetSystemService (Context.ClipboardService);
var item = clipboardmanager.PrimaryClip.GetItemAt(0);
var text = item.Text;
return text;
}
iOs:
public string GetTextFromClipBoard ()
{
var pb = UIPasteboard.General.GetValue ("public.utf8-plain-text");
return pb.ToString ();
}
Don't forget to add the Assembly bits at the top:
iOs: [assembly: Dependency (typeof (ClipBoard_iOs))]
Android: [assembly: Dependency (typeof (ClipBoard_Droid))]
Call the dependency service from you X.F function
public void YourFunctionToHandleMadTaps(Object sender, EventArgs ea)
{
var clipboardText = DependencyService.Get<IClipBoard> ().GetTextFromClipBoard ();
YourFunctionToHandleMadTaps.Text = clipboardText;
}
Since I_Khanage provided only a half solution, I will post the full solution.
IClipboardService should be implemented for all the targeting platforms, in my case it is Android and iOS:
public interface IClipboardService
{
string GetTextFromClipboard();
void SendTextToClipboard(string text);
}
// iOS
public class ClipboardService : IClipboardService
{
public string GetTextFromClipboard() => UIPasteboard.General.String;
public void SendTextToClipboard(string text) => UIPasteboard.General.String = text;
}
// Android
public class ClipboardService : IClipboardService
{
public string GetTextFromClipboard()
{
var clipboardmanager = (ClipboardManager)Forms.Context.GetSystemService(Context.ClipboardService);
var item = clipboardmanager.PrimaryClip.GetItemAt(0);
var text = item.Text;
return text;
}
public void SendTextToClipboard(string text)
{
// Get the Clipboard Manager
var clipboardManager = (ClipboardManager)Forms.Context.GetSystemService(Context.ClipboardService);
// Create a new Clip
var clip = ClipData.NewPlainText("YOUR_TITLE_HERE", text);
// Copy the text
clipboardManager.PrimaryClip = clip;
}
}
The code is available on github.
Now just add a GestureRecognizer in order to trigger the tap event.
P.S.: Clipboard service is now available as a part of Xamarin.Essentials package, so there is no need to write one yourself.
I'm building an app that should- among other things, let the user capture a picture and then save the picture and other info (like location of where this picture was taken -using GPS of the phone and etc...) on a DataBase.
Im using a string to save the pictures to the DataBase. So far so good. My problem is that after the user has captured a picture I can not find the path of the picture anyWhere (in order to display it later to the user )
I know I can display the picture if I use a image and not a string but then I am not able to save it to the DB.
Also I used the picture string (which should be the path of the picture ) to be the primaryKey column in my table and if the string is null this will be a problem for sure.
After checking on the internet I found out that you cannot use the GeoCoordinateWatcher (for GPS) on the emulator so I had to use a random place.
This led me into thinking that a picture taken by the emulator may not have a path??
Part of my code: (the Event of the camera and the bottun that saves everyting to DB)
void c_Completed(object sender, PhotoResult e)
{
if (e.TaskResult == TaskResult.OK)
{
MessageBox.Show(e.ChosenPhoto.Length.ToString());
//Code to display the photo on the page in an image control named myImage.
BitmapImage bmp = new System.Windows.Media.Imaging.BitmapImage();
bmp.SetSource(e.ChosenPhoto);
myImage.Source = bmp;//display the picture right after taking it. before saving to DB
p.UrlImage = bmp.UriSource.AbsolutePath;//Do not Work!
}
}
private void saveToDB_Click(object sender, RoutedEventArgs e)
{
p.Description = DesriptionList.SelectedValue.ToString();//description of the pic
p.Date = DateTime.Today;//date picture taken
GeoCoordinateWatcher myWatcher = new GeoCoordinateWatcher();
var myPosition = myWatcher.Position;
p.Location = myPosition.Location.Altitude+" "+myPosition.Location.Latitude;//do not work with emulator
p.Location = "Some Where Over The Rainbow";
MainPage.m._bl.addPic(p);//add pic to DB
MessageBox.Show("Added Successfully! :)");
NavigationService.Navigate(new Uri(#"/Intro.xaml", UriKind.Relative));//go to another page
}
}
my class:
[Table]
public class Picture
{
public Picture()
{
}
public Picture(string l, string d, string url, DateTime da)
{
Location = l;
Description = d;
UrlImage = url;
Date = da;
}
string location;
[Column]
public string Location
{
get { return location; }
set { location = value; }
}
string urlImage;
[Column (IsPrimaryKey=true)]
public string UrlImage
{
get { return urlImage; }
set { urlImage = value; }
}
DateTime date;
[Column]
public DateTime Date
{
get { return date; }
set { date = value; }
}
string description;
[Column]
public string Description
{
get { return description; }
set { description = value; }
}
}
}
Anyway- I would like to know if I can get the path in some way...
And also- if I cant get the path- does Windows have a "Better" emulator?
this emulator cant do much and this is quite annoying giving the fact I dont have a WP to check my apps on..
Thanks!
You already get the stream of the taken image in e.ChosenPhoto. You just need to save that.
var imageBytes = new byte[e.ChosenPhoto.Length];
e.ChosenPhoto.Read(imageBytes, 0, imageBytes.Length);
using (var isoFile = IsolatedStorageFile.GetUserStoreForApplication()) {
using (var stream = isoFile.CreateFile("myImage.jpg")) {
stream.Write(imageBytes, 0, imageBytes.Length);
}
}
edit:
Regarding emulator, there is nothing wrong or limited about it.
The taken image is stored in a temp file that may vanish later on that's why you need to save it locally in your isolated storage if you want to display that image again.
Regarding GPS, you can use the additional tools (just click on the '>>' button on the right side of the emulator to set various settings that you find on an actual device such as accelerometer, location, network, etc.. For GeoWatcher you can define a set of points on the map that will be played back as if the device's actual GPS location was changing.
Is it possible to bind the image present in the Isolates storage to image control through xaml. I found some implementations like getting the image through the property and binding that into xaml control. But this is not the implementation what I am searching for. My question is like, writing an attach property and helper method to fetch the content from Isolated storage. I found a similar implementation in LowProfileImage class, used in windows phone 7. But I think it is deprecated now. If anyone tried similar implementations please help me to achieve the same. Also if implementation have any performance drains please mention that info too.
Yes, it is possible to use images from isolated storage in the app UI. It requires loading the image from the file into the BitmapImage and then binding ImageSource of your control to that BitmapImage. I'm using the following approach:
First, there's a method to load image asynchronously:
private Task<Stream> LoadImageAsync(string filename)
{
return Task.Factory.StartNew<Stream>(() =>
{
if (filename == null)
{
throw new ArgumentException("one of parameters is null");
}
Stream stream = null;
using (var isoStore = IsolatedStorageFile.GetUserStoreForApplication())
{
if (isoStore.FileExists(filename))
{
stream = isoStore.OpenFile(filename, System.IO.FileMode.Open, FileAccess.Read);
}
}
return stream;
});
}
Then it can be used like this:
public async Task<BitmapSource> FetchImage()
{
BitmapImage image = null;
using (var imageStream = await LoadImageAsync(doc.ImagePath))
{
if (imageStream != null)
{
image = new BitmapImage();
image.SetSource(imageStream);
}
}
return image;
}
And finally you just assign return value of FetchImage() method to some of your view model's property, to which the UI element is bound. Of course, your view model should properly implement INotifyPropertyChanged interface for this approach to work reliably.
If you want to use attached properties approach, here's how you do it:
public class IsoStoreImageSource : DependencyObject
{
public static void SetIsoStoreFileName(UIElement element, string value)
{
element.SetValue(IsoStoreFileNameProperty, value);
}
public static string GetIsoStoreFileName(UIElement element)
{
return (string)element.GetValue(IsoStoreFileNameProperty);
}
// Using a DependencyProperty as the backing store for IsoStoreFileName. This enables animation, styling, binding, etc...
public static readonly DependencyProperty IsoStoreFileNameProperty =
DependencyProperty.RegisterAttached("IsoStoreFileName", typeof(string), typeof(IsoStoreImageSource), new PropertyMetadata("", Changed));
private static void Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
Image img = d as Image;
if (img != null)
{
var path = e.NewValue as string;
SynchronizationContext uiThread = SynchronizationContext.Current;
Task.Factory.StartNew(() =>
{
using (var isoStore = IsolatedStorageFile.GetUserStoreForApplication())
{
if (isoStore.FileExists(path))
{
var stream = isoStore.OpenFile(path, System.IO.FileMode.Open, FileAccess.Read);
uiThread.Post(_ =>
{
var _img = new BitmapImage();
_img.SetSource(stream);
img.Source = _img;
}, null);
}
}
});
}
}
}
And then in XAML:
<Image local:IsoStoreImageSource.IsoStoreFileName="{Binding Path}" />
Some limitations of this approach:
It only works on Image control, though you can change this to a whichever type you want. It's just not very generic.
Performance-wise, it will use a thread from the threadpool every time image source is changed. It's the only way to do asynchronous read from isolated storage on Windows Phone 8 right now. And you definitely don't want to do this synchronously.
But it has one one important advantage:
It works! :)
I like the above approach but there is a simpler more hacky way of doing it if you are interested.
You can go into your xaml and bind the image source to an string property then put the file path into the property dynamically.
<!-- XAML CODE -->
<Image Source="{Binding imagePath}"/>
//Behind property
public String imagePath { get; set; }
load your path into the image path then bind the image source to the image path string. You might have to do an INotifyPropertyChanged but this method should work with proper binding.
I need to show an image in the datagrid, but its showing like below
System.windows.controls.Image
System.windows.controls.Image
The datatable i am adding the column with type as Image, and the row is contrcuted with reading the bytes[] and converting to an image then assigning to the datatable.
//Creating the column type
if (header.ColumnDescription == "ActiveStatus")
{
dc = new DataColumn(header.ColumnDescription, typeof(Image));
dt.Columns.Add(dc);
}
//Filling the data column
foreach (DataColumn col in dt.Columns)
{
dr[col] = GetRowItem(device, col.Caption);
}
dt.Rows.Add(dr);
//Logic for getting the image
Image img=new Image();
BitmapImage logo = new BitmapImage();
logo.BeginInit();
logo.UriSource = new Uri("pack://application:,,,/Resources/Images/cloud_logon_radio_btn_green.png");
logo.EndInit();
img.Source = logo
What is the issue?
Use AutoGeneratingColumn Event of the dataGrid to set the image .
Define Datatemplate in xaml
<DataTemplate x:Key="ActivaStatusColumnTemplate">
<Image DataContext="{Binding}" >
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="red.png" />
<Style.Triggers>
<DataTrigger Value="On" Binding="{Binding}">
<Setter Property="Source" Value="green.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</DataTemplate>
//Code behind
private void dgView_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{
if (e.Column.Header.ToString() == "ActiveStatus")
{
// Create a new template column.
MyDataGridTemplateColumn templateColumn = new MyDataGridTemplateColumn();
templateColumn.CellTemplate = (DataTemplate)Resources["ActivaStatusColumnTemplate"];
templateColumn.ColumnName = e.PropertyName; // so it knows from which column to get binding data
e.Column = templateColumn;
e.Column.Header = "ActiveStatus";
}
}
//Define the class to override the DataGridTemplateColumn
/// <summary>
/// Custom class derieved fromt the DataGridTemplateColumn to set the property name.
/// </summary>
public class MyDataGridTemplateColumn : DataGridTemplateColumn
{
public string ColumnName
{
get;
set;
}
protected override System.Windows.FrameworkElement GenerateElement(DataGridCell cell, object dataItem)
{
// The DataGridTemplateColumn uses ContentPresenter with your DataTemplate.
ContentPresenter cp = (ContentPresenter)base.GenerateElement(cell, dataItem);
// Reset the Binding to the specific column. The default binding is to the DataRowView.
BindingOperations.SetBinding(cp, ContentPresenter.ContentProperty, new Binding(this.ColumnName));
return cp;
}
}
refer
http://social.msdn.microsoft.com/Forums/en/wpf/thread/8b2e94b7-3c44-4642-8acc-851de5285062
if you want to show image into browser you have to generate a url .
you cannot show image directly from binary .
you can try using a handler file (.ashx) put the code form your page_load in that file
and in you handler code like
public void ProcessRequest (HttpContext context) {
//Get the picture id by url
//Query here
byte[] picture = queryoutput;
Response.ContentType = "images/jpeg";
Response.BinaryWrite(picture);
}
public bool IsReusable {
get {
return false;
}
}
First question here, so far I've received great help just reading the answers. This is something I couldn't find any answers on though. So here comes...
We have a Bing Maps map whose MapItemsControl is bound to ObservableCollection<Pushpin> Property. When adding/removing items to the collection the map gets updated correctly.
Now my question is this: how to update/bind the location of a Pushpin inside the collection so it is reflected on the map without redrawing the map by moving/zooming?
Here is the Map.xaml:
<phone:PhoneApplication ...
DataContext="{Binding Source={StaticResource Locator}, Path=Main}">
<maps:Map ...>
<maps:MapItemsControl ItemsSource="{Binding MapItems}"/>
</maps:Map>
</phone:PhoneApplication>
MainViewModel.xaml:
#region MapItems
#region MapItems Property
/// <summary>
/// The <see cref="MapItems" /> property's name.
/// </summary>
public const string MapItemsPropertyName = "MapItems";
private ObservableCollection<Pushpin> _MapItems =
new ObservableCollection<Pushpin>();
/// <summary>
/// Sets and gets the MapItems property.
/// Changes to that property's value raise the PropertyChanged event.
/// </summary>
public ObservableCollection<Pushpin> MapItems
{
get
{
return _MapItems;
}
set
{
if (_MapItems == value)
{
return;
}
_MapItems = value;
RaisePropertyChanged(MapItemsPropertyName);
}
}
#endregion
#region OwnLocation
private Pushpin OwnLocation;
private void InitializeOwnLocation()
{
OwnLocation = new Pushpin()
{
Style = App.Current.Resources["OwnLocationStyle"] as Style
};
Binding b = new Binding {
Path = new PropertyPath("LastKnownLocation")
};
OwnLocation.SetBinding(Pushpin.LocationDependencyProperty, b);
MapItems.Add(OwnLocation);
}
#endregion
...
#endregion
LastKnownLocation is being set in the PositionChanged of the GeoCoordinateWatcher
Update (30.5.2012 20.35). Implementation of LastKnownLocation property.
/// <summary>
/// The <see cref="LastKnownLocation" /> property's name.
/// </summary>
public const string LastKnownLocationPropertyName = "LastKnownLocation";
private GeoCoordinate _LastKnownLocation;
/// <summary>
/// Sets and gets the LastKnownLocation property.
/// Changes to that property's value raise the PropertyChanged event.
/// </summary>
public GeoCoordinate LastKnownLocation
{
get
{
return _LastKnownLocation;
}
private set
{
if (_LastKnownLocation == value)
{
return;
}
var oldValue = _LastKnownLocation;
_LastKnownLocation = value;
Settings["LastKnownLocation"] = _LastKnownLocation;
RaisePropertyChanged(LastKnownLocationPropertyName, oldValue, value, true);
}
}
x:Name= myMap on map Control
When you want to rebind your map pins
set
myMap.Children.Clear()
then re-add your Pins.
you can notify your data change
As I commented earlier after long Googling I finally came to a workaround that doesn't seem to be available anymore. The trick is to call SetView on the map view after changing Pushpin.Location.