because of image flickering I've used WriteableBitmap. I have images with 3 scaling factors. But GetFileFromApplicationUriAsync always reads the image with highest scaling factor and images are too big on mobile device.
Here is my code:
private async Task<WriteableBitmap> CreateBitmapImage(Uri uri)
{
var file = await StorageFile.GetFileFromApplicationUriAsync(uri);
BitmapImage bitmapImage;
WriteableBitmap writeableBitmap;
using (IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read))
{
bitmapImage = new BitmapImage();
await bitmapImage.SetSourceAsync(fileStream);
writeableBitmap = new WriteableBitmap(bitmapImage.PixelHeight, bitmapImage.PixelWidth);
fileStream.Seek(0);
await writeableBitmap.SetSourceAsync(fileStream);
}
return writeableBitmap;
}
I use BitmapImage because WriteableBitmap needs pixel height and width as input parameters in constructor. Uri is e.g.: ms-appx:///Images/contact.png
I've solved it this way:
<Image Grid.Column="0" x:Name="StatusImage" Margin="0,8,12,8" Source="{x:Bind ImageStatusUri, Mode=OneWay}">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="ImageOpened">
<core:ChangePropertyAction PropertyName="Source" Value="{Binding ElementName=StatusImage, Path=Source}" TargetObject="{Binding ElementName=CopyOfStatusImage}"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
<Image Grid.Column="0" Margin="0,8,12,8" x:Name="CopyOfStatusImage"/>
So I don't need to use WriteableBitmap and GetFileFromApplicationUriAsync
Related
Until recently I have been stuck on how to achieve the goal of "exporting" a report from a StackLayout into a PDF in a project I somehow pulled out of Dev Limbo.
--BackStory--
Previously I have tried to continue the use of the already placed (in the project) PDFSharp package to convert the data presented in the XAML to a PDF for a client. Long story short, I was unable to get PDFSharp to do what I needed it to do and turned to Syncfusion. They seemed to have the features I needed to make this happen. Going based off the code samples they had, I was able to get close to my goal, but not quite. They have the capture portion and they have the pagination portion, but not a combination of the two. I essentially needed to paginate the screenshot that CaptureAsync() saves to make a pdf of the entire report.
--How was this resolved?--
After doing some digging, I came across an answer in this article (I am forever grateful) and forged a solution using it.
Here's a sample of my XAML content page for context:
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:ReportTool.Controls"
x:Class="ReportTool.ReportViewer">
<ContentPage.Content>
<StackLayout Style="{StaticResource TopLevelStackLayout}">
<!-- Body Block -->
<Grid x:Name="MainGrid" Style="{StaticResource MainContainingGrid}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<ScrollView x:Name="MainScrollLayout" VerticalOptions="Fill" HorizontalOptions="Fill" Grid.Row="0" Grid.Column="0" BackgroundColor="#FFFFFF" MinimumWidthRequest="700">
<StackLayout x:Name="MainStackLayout" Style="{StaticResource MainBkg}">
<Button x:Name="DownloadPdfBtn" Text="Export to PDF" Clicked="DownloadPdfBtn_OnClicked" TextColor="White" BackgroundColor="DodgerBlue" VerticalOptions="Start" HorizontalOptions="Start" />
<Image Source="~\..\Assets\Logos\CompanyLogo.png" Margin="0,60,0,10" HorizontalOptions="Center" />
<Label x:Name="TitlePageTitleText" Style="{StaticResource ReportViewerTitleTextMain}" Text="{StaticResource CompanyAnalysisReport}" />
<Label x:Name="TitlePagePreparedFor" Style="{StaticResource ReportViewerTitleTextMiddle}" Text="{StaticResource PreparedFor}" />
<Label x:Name="TitlePageOrganizationName" Style="{StaticResource ReportViewerTitleTextMiddle}" />
<Label x:Name="TitlePageOrganizationAddress1" Style="{StaticResource ReportViewerTitleTextMiddle}" />
<Label x:Name="TitlePageOrganizationAddress2" Style="{StaticResource ReportViewerTitleTextMiddle}" />
<Label x:Name="TitlePageOrganizationCityStateZip" Style="{StaticResource ReportViewerTitleTextLast}" />
<Grid x:Name="ReportGrid" Style="{StaticResource ReportGridBody}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="125"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
</Grid>
</StackLayout>
</ScrollView>
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Here is the code for the star of the show, the ExportToPdf button:
using Syncfusion.Drawing;
using Syncfusion.Pdf;
using Syncfusion.Pdf.Graphics;
private async void DownloadPdfBtn_OnClicked(object sender, EventArgs e)
{
try
{
var filename = "SurveyReport_" + ((App)Application.Current).CurrentUser.UserName + "_" + DateTime.UtcNow.ToString("MMddyy") + ".pdf";
// Init Memory Stream.
var stream = new MemoryStream();
//Create a new PDF document
using (var document = new PdfDocument())
{
// Add page to the PDF document.
var page = document.Pages.Add();
// Get the scroll view height.
var xamlPageHeight = MainScrollLayout.ContentSize.Height;
// Get the page dimensions.
var pageWidth = page.GetClientSize().Width;
var pageHeight = page.GetClientSize().Height;
// Capture the number of pages.
var numberOfPages = (int)Math.Ceiling(xamlPageHeight / pageHeight);
for (var i = 0; i < numberOfPages; i++)
{
// Find beginning of page.
await MainScrollLayout.ScrollToAsync(0, i * pageHeight, false).ConfigureAwait(false);
// Capture the XAML page as an image and returns the image in memory stream.
var byteData = await DependencyService.Get<IExportPdf>().CaptureAsync();
var imageStream = new MemoryStream(byteData);
// Load the image in PdfBitmap.
var pdfBitmapImage = new PdfBitmap(imageStream);
// Set the pdf page settings.
document.PageSettings.Margins.All = 0;
document.PageSettings.Orientation = PdfPageOrientation.Portrait;
document.PageSettings.Size = new SizeF(pageWidth, pageHeight);
// Add new page for graphics (otherwise graphics won't know where to draw the rest of the image)
page = document.Pages.Add();
// Graphics for drawing image to pdf.
var graphics = page.Graphics;
// Draw the image to the page.
graphics.DrawImage(pdfBitmapImage,0,0, pageWidth, pageHeight);
// Insert page at i position.
document.Pages.Insert(i, page);
// Save the document into memory stream.
document.Save(stream);
}
}
stream.Position = 0;
// Save the stream as a file in the device and invoke it for viewing.
await Xamarin.Forms.DependencyService.Get<IExportPdf>().Save(filename, "application/pdf", stream);
}
catch (Exception ex)
{
DisplayErrorAlert("DownloadPdfBtn_OnClicked", ex.StackTrace);
}
}
It is important to note that you will need a dependency in order to save anywhere other than local memory. Thankfully, Syncfusion provides a snippet for you to use. For the sake of your time, I will share the snippets. You will need to add two .cs files, one class file with the capture/save functionality and one interface file for your app.
Capture/Save class:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using System.Threading.Tasks;
using Windows.Graphics.Display;
using Windows.Graphics.Imaging;
using Windows.Storage;
using Windows.Storage.Pickers;
using Windows.Storage.Streams;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Media.Imaging;
using Xamarin.Forms;
public class ExportPdf : IExportPdf
{
public async Task<byte[]> CaptureAsync()
{
var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(Window.Current.Content);
var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();
var pixels = pixelBuffer.ToArray();
var displayInformation = DisplayInformation.GetForCurrentView().LogicalDpi;
var stream = new InMemoryRandomAccessStream();
var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream);
encoder.SetPixelData(
BitmapPixelFormat.Bgra8,
BitmapAlphaMode.Ignore,
(uint)renderTargetBitmap.PixelWidth,
(uint)renderTargetBitmap.PixelHeight,
displayInformation,
displayInformation,
pixels);
await encoder.FlushAsync();
stream.Seek(0);
var readStream = stream.AsStreamForRead();
var bytes = new byte[readStream.Length];
await readStream.ReadAsync(bytes, 0, bytes.Length);
return bytes;
}
public async Task Save(string filename, string contentType, MemoryStream stream)
{
if (Device.Idiom != TargetIdiom.Desktop)
{
var local = ApplicationData.Current.LocalFolder;
var outFile = await local.CreateFileAsync(filename, CreationCollisionOption.ReplaceExisting);
using (var outStream = await outFile.OpenStreamForWriteAsync()) { await outStream.WriteAsync(stream.ToArray(), 0, (int)stream.Length); }
if (contentType != "application/html") await Windows.System.Launcher.LaunchFileAsync(outFile);
}
else
{
StorageFile storageFile = null;
var savePicker = new FileSavePicker
{
SuggestedStartLocation = PickerLocationId.Desktop,
SuggestedFileName = filename
};
switch (contentType)
{
case "application/vnd.openxmlformats-officedocument.presentationml.presentation":
savePicker.FileTypeChoices.Add("PowerPoint Presentation", new List<string> { ".pptx" });
break;
case "application/msexcel":
savePicker.FileTypeChoices.Add("Excel Files", new List<string> { ".xlsx" });
break;
case "application/msword":
savePicker.FileTypeChoices.Add("Word Document", new List<string> { ".docx" });
break;
case "application/pdf":
savePicker.FileTypeChoices.Add("Adobe PDF Document", new List<string> { ".pdf" });
break;
case "application/html":
savePicker.FileTypeChoices.Add("HTML Files", new List<string> { ".html" });
break;
}
storageFile = await savePicker.PickSaveFileAsync();
using (var outStream = await storageFile.OpenStreamForWriteAsync())
{
await outStream.WriteAsync(stream.ToArray(), 0, (int)stream.Length);
await outStream.FlushAsync();
outStream.Dispose();
}
stream.Flush();
stream.Dispose();
await Windows.System.Launcher.LaunchFileAsync(storageFile);
}
}
}
Interface:
using System.IO;
using System.Threading.Tasks;
public interface IExportPdf
{
Task Save(string filename, string contentType, MemoryStream stream);
Task<byte[]> CaptureAsync();
}
And that should do it! I hope this helps anyone that has been tasked with something similar!
I’m working on an application where you should be able to open and save files, similar to “Notepad”. It’s a universal application that should work both on computers and mobiles.
The application works fine on computers. It also works fine on mobile if I save or open files locally or on Dropbox.
But if I open a file on OneDrive (via the file picker), and then try to save an exception is thrown: Access is denied. (Exception from HRESULT: 0x80070005 (E_ACCESSDENIED))
If I select “Save as” on OneDrive it works. But every time I select Save after this a new instance of the file is created (I get “file 1”, “file 2”, “file 3” and so on).
I have only tested this on my phone. I might have a bug on my application, but since it works on DropBox I don’t think so. Is this a known issue with OneDrive? Or might I just have some local issues? I’m using Windows 10 Mobile 10.10586.420 and OneDrive 17.11.
Here is some code to illustrate the problem:
<Page
x:Class="BasicEditor.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BasicEditor"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="40">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Button Content="Open"
Click="OpenButton_Click" />
<Button Content="Save"
Click="SaveButton_Click" />
<Button Content="Save as"
Click="SaveAsButton_Click" />
</StackPanel>
<TextBox Grid.Row="1" x:Name="TextEditor"
TextWrapping="Wrap" />
</Grid>
</Page>
using System;
using System.Collections.Generic;
using Windows.Storage;
using Windows.Storage.AccessCache;
using Windows.Storage.Pickers;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace BasicEditor
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
string MruToken;
private async void OpenButton_Click(object sender, RoutedEventArgs e)
{
FileOpenPicker openPicker = new FileOpenPicker();
openPicker.ViewMode = PickerViewMode.List;
openPicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
openPicker.FileTypeFilter.Add(".txt");
StorageFile file = await openPicker.PickSingleFileAsync();
if (file != null)
{
try
{
string fileContent = await FileIO.ReadTextAsync(file);
TextEditor.Text = fileContent;
string token = Windows.Storage.AccessCache.StorageApplicationPermissions.MostRecentlyUsedList.Add(file, "");
MruToken = token;
}
catch (Exception ex)
{
System.Diagnostics.Debug.Write($"Open-Error: {ex.Message}");
var dialog = new MessageDialog($"Open-Error: {ex.Message}");
await dialog.ShowAsync();
}
}
}
private async void SaveButton_Click(object sender, RoutedEventArgs e)
{
try
{
var file = await StorageApplicationPermissions.MostRecentlyUsedList.GetFileAsync(MruToken);
string fileContent = await FileIO.ReadTextAsync(file);
await FileIO.WriteTextAsync(file, TextEditor.Text);
var dialog = new MessageDialog($"Saved successfully");
await dialog.ShowAsync();
}
catch (Exception ex)
{
System.Diagnostics.Debug.Write($"Save-Error: {ex.Message}");
var dialog = new MessageDialog($"Save-Error: {ex.Message}");
await dialog.ShowAsync();
}
}
private async void SaveAsButton_Click(object sender, RoutedEventArgs e)
{
FileSavePicker savePicker = new FileSavePicker();
savePicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
savePicker.FileTypeChoices.Add("Plain Text", new List<string>() { ".txt" });
savePicker.SuggestedFileName = "New Document";
StorageFile file = await savePicker.PickSaveFileAsync();
if (file != null)
{
try
{
await FileIO.WriteTextAsync(file, TextEditor.Text);
string token = Windows.Storage.AccessCache.StorageApplicationPermissions.MostRecentlyUsedList.Add(file, "");
MruToken = token;
}
catch (Exception ex)
{
System.Diagnostics.Debug.Write($"SaveAs-Error: {ex.Message}");
var dialog = new MessageDialog($"SaveAs-Error: {ex.Message}");
await dialog.ShowAsync();
}
}
}
}
}
A beta of my app is available here: https://www.microsoft.com/store/apps/9NBLGGH3MFM3
Another app with exactly the behavior when OneDrive is used is NotepadX.
I am very new to Windows 8 application development. I am developing an application which requires to save a grid as Bitmap Image in local storage.
I have tried by using writable bitmap but i didn't get the solution.
Then I searched for the samples but I got the answer as a 'Not possible'. But in some answers I found that By using 'WriteableBitmapEx' we can do that. But I do not know how to implement this by using this library. If any one knows about that please reply me.
Thanks in advance.
EDITED.
<Canvas Background="Cyan" Name="panelcanvas" Margin="47.5,57,327.5,153"
Width="200"
Height="400">
<Image Name="maskimg"
Height="100" Width="220"/>
<ScrollViewer ZoomMode="Enabled" Name="scroll">
<Image Name="img" Stretch="Fill" Canvas.Top="15"
Height="400" Width="200" Source="mask_image.png">
<Image.RenderTransform>
<CompositeTransform x:Name="Composite_Transform"></CompositeTransform>
</Image.RenderTransform>
</Image>
</ScrollViewer>
</Canvas>
<Image Name="maskimg2" HorizontalAlignment="left" Width="200"
Height="400"/>
<Image Name="maskimg3" HorizontalAlignment="Right" Width="200"
Height="400"/>
C# code.
var destBmp = BitmapFactory.New((int)panelcanvas.ActualWidth, (int)panelcanvas.ActualHeight);
foreach (var child in panelcanvas.Children)
{
var img = child as Image;
if (img != null)
{
var sourceMask = ((BitmapImage)img.Source);
var sourceUriMask = sourceMask.UriSource;
Uri imageUri = new Uri(strMask.ToString());
var srcBmp = await new WriteableBitmap(1, 1).FromContent(imageUri);
if (srcBmp != null)
{
var x = Canvas.GetLeft(img);
var y = Canvas.GetTop(img);
destBmp.Blit(new Rect(x, y, srcBmp.PixelWidth, srcBmp.PixelHeight), srcBmp, new Rect(0, 0, srcBmp.PixelWidth, srcBmp.PixelHeight));
}
}
await WriteableBitmapToStorageFile(destBmp, FileFormat.Jpeg);
private async Task<StorageFile> WriteableBitmapToStorageFile(WriteableBitmap WB, FileFormat fileFormat)
{
string FileName = "MyFile.jpeg";
StorageFolder localFolder = ApplicationData.Current.LocalFolder;
var file = await localFolder.CreateFileAsync(FileName, CreationCollisionOption.ReplaceExisting);
using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite))
{
BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoderGuid, stream);
Stream pixelStream = WB.PixelBuffer.AsStream();
byte[] pixels = new byte[pixelStream.Length];
await pixelStream.ReadAsync(pixels, 0, pixels.Length);
encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore,
200,
200,
0,
0,
pixels);
await encoder.FlushAsync();
}
return file;
}
This blog posts point out what you need to do using the WriteableBitmapEx lib. Note the required RenderTargetBitmap was introduced with Windows 8.1! For Windows 8.0 this is not possible at all.
http://kodierer.blogspot.de/2013/12/easy-render-writeablebitmapex-with.html
http://kodierer.blogspot.de/2013/12/how-to-encode-and-save-writeablebitmap.html
Here's a code snippet:
// Render some UI to a RenderTargetBitmap
var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(MyGrid);
// Get the pixel buffer and copy it into a WriteableBitmap
var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();
var width = renderTargetBitmap.PixelWidth;
var height = renderTargetBitmap.PixelHeight;
WriteableBitmap wbmp = await new WriteableBitmap(1, 1).FromPixelBuffer(pixelBuffer, width, height);
SaveWriteableBitmapAsJpeg(wbmp, "mygrid.jpg");
private static async Task SaveWriteableBitmapAsJpeg(WriteableBitmap bmp, string fileName)
{
// Create file in Pictures library and write jpeg to it
var outputFile = await KnownFolders.PicturesLibrary.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
using (var writeStream = await outputFile.OpenAsync(FileAccessMode.ReadWrite))
{
await EncodeWriteableBitmap(bmp, writeStream, BitmapEncoder.JpegEncoderId);
}
return outputFile;
}
private static async Task EncodeWriteableBitmap(WriteableBitmap bmp, IRandomAccessStream writeStream, Guid encoderId)
{
// Copy buffer to pixels
byte[] pixels;
using (var stream = bmp.PixelBuffer.AsStream())
{
pixels = new byte[(uint) stream.Length];
await stream.ReadAsync(pixels, 0, pixels.Length);
}
// Encode pixels into stream
var encoder = await BitmapEncoder.CreateAsync(encoderId, writeStream);
encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied,
(uint) bmp.PixelWidth, (uint) bmp.PixelHeight,
96, 96, pixels);
await encoder.FlushAsync();
}
does anyone know how to put a pushpin on Windows Phone 8 maps API?
I find only code to add a pushpin to a bing map..
I prefer only XAML code, if possible.
Thanks
This is what I use.. the commented out code will give you a round marker, the default pushpin is squarish..
<Grid x:Name="ContentPanel" Margin="12,0,12,0">
<maps:Map x:Name="MapControl">
</maps:Map>
</Grid>
private void DisplayMapPoint()
{
MapControl.Layers.Clear();
var MyGeo = new GeoCoordinate(_Latitude, _Longitude);
MapControl.Center = MyGeo;
MapControl.ZoomLevel = 14;
DrawMapMarker();
}
private void DrawMapMarker()
{
var Overlay = new MapOverlay
{
GeoCoordinate = MapControl.Center,
//Content = new Ellipse
//{
// Fill = new SolidColorBrush(Colors.Red),
// Width = 40,
// Height = 40
//}
Content = new Pushpin
{
GeoCoordinate = MapControl.Center,
Background = new SolidColorBrush(Colors.Red),
Content = _SiteName
}
};
var Layer = new MapLayer {Overlay};
MapControl.Layers.Add(Layer);
}
This link may also help:
http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj207037(v=vs.105).aspx
I am working on silverlight application and I want to panning image like top, bottom, left, right how I can panning the image.
I had use the pixel shadering but I am not success of this.
thanks..
Have a look at this sample
You could also look at the Blend behavior for dragging.
This worked for me. User can preview an enlarged image using this window, and pan the image to the sections that is more relevant, e.g. the bottom part of the image.
To use the window:
BitmapImage BMP = /* resolve the bitmap */;
PreviewImageWindow.Execute(BMP);
The code (behind) for the window is shown below.
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media.Imaging;
namespace ITIS.Controls.LinearViewer.Windows {
public partial class PreviewImageWindow : ChildWindow {
/// <summary>See Execute</summary>
PreviewImageWindow() {
InitializeComponent();
}
private void OKButton_Click(object sender, RoutedEventArgs e) {
this.DialogResult = true;
}
private void CancelButton_Click(object sender, RoutedEventArgs e) {
this.DialogResult = false;
}
static public void Execute(BitmapImage imageSource) {
PreviewImageWindow Window = new PreviewImageWindow();
Window.Image.Source = imageSource;
/* don't allow the window to grow larger than the image */
Window.MaxWidth = imageSource.PixelWidth;
Window.MaxHeight = imageSource.PixelHeight;
Window.Show();
}
private void ChildWindow_KeyDown(object sender, KeyEventArgs e) {
if (e.Key == Key.Escape) {
DialogResult = false;
}
}
Point? _lastPoint;
bool _isMouseDown;
private void image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
((Image)sender).CaptureMouse();
_isMouseDown = true;
ShowCursor(e.GetPosition(Canvas));
_lastPoint = e.GetPosition((Image)sender);
}
private void image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) {
((Image)sender).ReleaseMouseCapture();
_isMouseDown = false;
ShowCursor(e.GetPosition(Canvas));
_lastPoint = null;
}
private void image_MouseMove(object sender, MouseEventArgs e) {
if (_lastPoint != null) {
Image Image = (Image)sender;
Point CurrentPoint = e.GetPosition(Image);
double
XDelta = CurrentPoint.X - _lastPoint.Value.X,
YDelta = CurrentPoint.Y - _lastPoint.Value.Y;
_lastPoint = null;
if (XDelta != 0) {
double NewLeft = Canvas.GetLeft(Image) + XDelta;
if (NewLeft <= 0 && NewLeft + Image.ActualWidth >= Canvas.ActualWidth) {
Canvas.SetLeft(Image, NewLeft);
}
}
if (YDelta != 0) {
double NewTop = Canvas.GetTop(Image) + YDelta;
if (NewTop <= 0 && NewTop + Image.ActualHeight >= Canvas.ActualHeight) {
Canvas.SetTop(Image, NewTop);
}
}
_lastPoint = e.GetPosition(Image);
}
Point CanvasPoint = e.GetPosition(Canvas);
ShowCursor(CanvasPoint);
}
private void Canvas_Loaded(object sender, RoutedEventArgs e) {
TryDefaultImageToTop();
}
void TryDefaultImageToTop() {
if (Image == null || Canvas == null) { return; }
/* move the image up so we can focus on the road? user-friendly since we are most-likely going to look at the road, not the horizon or top - half */
if (!_initialized) {
_initialized = true;
Canvas.SetTop(Image, Canvas.ActualHeight - Image.ActualHeight);
Canvas.SetLeft(Image, (Canvas.ActualWidth - Image.ActualWidth) / 2);
}
}
bool _initialized;
private void image_Loaded(object sender, RoutedEventArgs e) {
TryDefaultImageToTop();
}
private void image_MouseEnter(object sender, MouseEventArgs e) {
imgOpenHand.Visibility = Visibility.Visible;
imgClosedHand.Visibility = Visibility.Collapsed;
ShowCursor(e.GetPosition(Canvas));
}
void ShowCursor(Point point) {
if (_isMouseDown) {
imgClosedHand.Visibility = Visibility.Visible;
imgOpenHand.Visibility = Visibility.Collapsed;
Canvas.SetLeft(imgClosedHand, point.X);
Canvas.SetTop(imgClosedHand, point.Y);
}
else {
imgClosedHand.Visibility = Visibility.Collapsed;
imgOpenHand.Visibility = Visibility.Visible;
Canvas.SetLeft(imgOpenHand, point.X);
Canvas.SetTop(imgOpenHand, point.Y);
}
}
private void image_MouseLeave(object sender, MouseEventArgs e) {
imgOpenHand.Visibility = Visibility.Collapsed;
imgClosedHand.Visibility = Visibility.Collapsed;
}
}
}
The XAML for the window is shown below:
<controls:ChildWindow
x:Class="ITIS.Controls.LinearViewer.Windows.PreviewImageWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
Background="#383838" Foreground="WhiteSmoke"
Title="Preview" Margin="50"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
KeyDown="ChildWindow_KeyDown"
>
<Grid x:Name="LayoutRoot" Margin="0" Cursor="None" IsHitTestVisible="True">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Canvas Cursor="None" IsHitTestVisible="True" x:Name="Canvas" Loaded="Canvas_Loaded">
<Image Source="{Binding ImageSource}" x:Name="Image"
Cursor="None" Loaded="image_Loaded"
MouseLeftButtonDown="image_MouseLeftButtonDown"
MouseLeftButtonUp="image_MouseLeftButtonUp"
MouseMove="image_MouseMove"
MouseEnter="image_MouseEnter"
MouseLeave="image_MouseLeave"
IsHitTestVisible="True"
/>
<Image Style="{StaticResource HandOpenImage}" x:Name="imgOpenHand"
Visibility="Collapsed" IsHitTestVisible="False"
/>
<Image Style="{StaticResource HandClosedImage}" x:Name="imgClosedHand"
Visibility="Collapsed" IsHitTestVisible="False"
/>
</Canvas>
</Grid>
A few CATCHES / COMMENTS about this code:
The namespace for this window is "ITIS.Controls.LinearViewer.Windows", please change the namespace to something more relevant in your system.
The normal cursor image is and when the mouse button is down, the image changes to
The styles for the images, which I have in a global application wide resource dictionary:
(OPEN image style)
<Style TargetType="Image" x:Key="HandOpenImage">
<Setter Property="Source" Value="/ITIS.Controls.LinearViewer.Silverlight;component/Images/HandOpen.png" />
<Setter Property="Width" Value="16" />
<Setter Property="Height" Value="16" />
</Style>
(CLOSED image style)
<Style TargetType="Image" x:Key="HandClosedImage">
<Setter Property="Source" Value="/ITIS.Controls.LinearViewer.Silverlight;component/Images/HandClosed.png" />
<Setter Property="Width" Value="13" />
<Setter Property="Height" Value="11" />
</Style>
This preview tries to START with focus on the bottom half of the image, NOT the top half.
Hope this helps. It took me a while to iron out a few irritations.