I need to load 8 images into Image or BitmapImage elements in my C# Windows Store (Windows RT) app, and need to find their dimensions (even before they are being displayed). I can download the images, but can't really figure out how to get the size (size is always zero). The reason size is zero is that the bitmap image has not loaded, but can't figure out how to wait till the image is loaded, catch the function that indicates image has loaded.
Here is the key code, where the ImageOpened or ImageFailed never get called:
bm.ImageOpened += bm_ImageOpened;
bm.ImageFailed += bm_ImageFailed;
bm = new BitmapImage(new Uri(arbitraryImageUriThatKeepsChanging, UriKind.Absolute));
image.ImageFailed += image_ImageFailed;
image.ImageOpened += image_ImageOpened;
image.Source = new BitmapImage(new Uri(arbitraryImageUriThatKeepsChanging,
UriKind.Absolute));
/* .. at this point the image still has not been loaded,
so can't find the dimensions or if it failed or not, and the functions to catch
image opened and failed are never called..*/
All I need is to load images from external web site, and find the dimensions, before displaying the images.
You could just use a dummy-Imageelement that is invisible to preload the image.
In your Xaml:
<Image Name="DummyImage" Visibility="Collapsed"/>
Code behind:
BitmapImage btm = new BitmapImage(new Uri("http://anyurl.com/foo.jpg"));
btm.DownloadProgress += btm_DownloadProgress;
DummyImage.Source = btm;
private void btm_DownloadProgress(object sender, DownloadProgressEventArgs e)
{
if (e.Progress == 100)
{
int width = ((BitmapImage)sender).PixelWidth;
}
}
You should be able to use either the DownloadProgress or the ImageLoaded event.
Related
I want to convert a pdf file to an image UI control in UWP using c#, xaml.
I've read another way to use the Flip Viewer, but I need each image file of the converted PDF file.
so I modified a bit of the existing sample To open a pdf file.
And my problem is that the quality of the converted image file is extremely bad.
I can not even see the letters.
but this quality problem is same on other pdf sample.
Take a look at my code.
private PdfDocument pdfDocument;
private async void LoadDocument()
{
pdfDocument = null;
//Output means my image UI control (pdf image will be added)
Output.Source = null;
//PageNumberBox shows current page
PageNumberBox.Text = "1";
var picker = new FileOpenPicker();
picker.FileTypeFilter.Add(".pdf");
StorageFile file = await picker.PickSingleFileAsync();
if (file != null)
{
try
{
pdfDocument = await PdfDocument.LoadFromFileAsync(file);
}
catch (Exception ex)
{
}
if (pdfDocument != null)
{ // I use this text to move page.
PageCountText.Text = pdfDocument.PageCount.ToString();
}
}
uint pageNumber;
if (!uint.TryParse(PageNumberBox.Text, out pageNumber) || (pageNumber < 1) || (pageNumber > pdfDocument.PageCount))
{
return;
}
Output.Source = null;
// Convert from 1-based page number to 0-based page index.
uint pageIndex = pageNumber-1 ;
using (PdfPage page = pdfDocument.GetPage(pageIndex))
{
var stream = new InMemoryRandomAccessStream();
await page.RenderToStreamAsync(stream);
BitmapImage src = new BitmapImage();
Output.Source = src;
await src.SetSourceAsync(stream);
}
}
And this is my xaml code.
<Grid>
<ScrollViewer >
<TextBlock Name="ViewPageLabel"VerticalAlignment="center">Now page</TextBlock>
<TextBox x:Name="PageNumberBox" InputScope="Number" Width="30" Text="1" TextAlignment="Right" Margin="5,0,5,0"
AutomationProperties.LabeledBy="{Binding ElementName=ViewPageLabel}"/>
<TextBlock VerticalAlignment="Center">of <Run x:Name="PageCountText"/>.</TextBlock>
</ScrollViewer>
</Grid>
Is there any suggestions?
Please help me.
Thanks for reading this.
Ran into this issue recently, didn't see any definitive answer here, so here it goes:
JosephA is on the right track, but PdfPageRenderOptions does not have anything about image fidelity/quality or anything like that like I had hoped. However, it does allow you to specify image dimensions. All you have to do is scale up the dimensions.
I suspect what's going on is that the PDF has a scale that it would "like" to use, which is smaller than the image you want to draw. Without specifying dimensions, it's drawing the "small" image and then it's getting scaled up, causing the blurriness.
Instead, if you tell it to draw the image at a higher resolution explicitly, it will do PDF magic to make those lines crisper, and the resulting raster image won't have to scale/blur.
PdfPage page = _document.GetPage(pageIndex);
await page.RenderToStreamAsync(stream, new PdfPageRenderOptions {
DestinationWidth = (uint)page.Dimensions.MediaBox.Width * s,
DestinationHeight = (uint)page.Dimensions.MediaBox.Height * s
});
Something like this helps, where "s" is the scale factor to achieve the dimensions you need.
PdfPage.Dimensions has a number of different properties other than just "MediaBox" that you may want to explore as well depending on your use case.
It sounds like you are encountering the common problem where you need to dynamically adjust the resolution the PDF page is rendered at to an image.
I am not familiar with the that PDF library however it appears you need to use the RenderToStreamAsync() overload that takes a PdfPageRenderOptions parameter to accomplish this.
I have a image in a Image control like below:
<Image x:name="myImg" Source="Images/MyImg.png" />
How can I save this image in to the image gallery so that I can see by going to the gallery folder.
I have tried different codes but I am not able to save it. Please help me on this.
EDIT:
I have image in control in List Box. I am binding the list box with the IList that is coming from the web service.
So after Binding the image if user want to save the image he can save the particular which he want to save.
So how can i save the that particular image.
Thanks in advance.
There is an excellent MSDN article that describes this very scenario:
How to: Encode a JPEG for Windows Phone and Save to the Pictures Library
Incidentally , it's also the first search result link when searching for windows phone save image to media library on both Google and Bing.
Have you tried following this guide, and if so what are you having problems with?
The essential code to save it:
private void btnSave_Click(object sender, RoutedEventArgs e)
{
// Create a file name for the JPEG file in isolated storage.
String tempJPEG = "TempJPEG";
// Create a virtual store and file stream. Check for duplicate tempJPEG files.
var myStore = IsolatedStorageFile.GetUserStoreForApplication();
if (myStore.FileExists(tempJPEG))
{
myStore.DeleteFile(tempJPEG);
}
IsolatedStorageFileStream myFileStream = myStore.CreateFile(tempJPEG);
// Create a stream out of the sample JPEG file.
// For [Application Name] in the URI, use the project name that you entered
// in the previous steps. Also, TestImage.jpg is an example;
// you must enter your JPEG file name if it is different.
StreamResourceInfo sri = null;
Uri uri = new Uri("[Application Name];component/TestImage.jpg", UriKind.Relative);
sri = Application.GetResourceStream(uri);
// Create a new WriteableBitmap object and set it to the JPEG stream.
BitmapImage bitmap = new BitmapImage();
bitmap.CreateOptions = BitmapCreateOptions.None;
bitmap.SetSource(sri.Stream);
WriteableBitmap wb = new WriteableBitmap(bitmap);
// Encode the WriteableBitmap object to a JPEG stream.
wb.SaveJpeg(myFileStream, wb.PixelWidth, wb.PixelHeight, 0, 85);
myFileStream.Close();
// Create a new stream from isolated storage, and save the JPEG file to the media library on Windows Phone.
myFileStream = myStore.OpenFile(tempJPEG, FileMode.Open, FileAccess.Read);
// Save the image to the camera roll or saved pictures album.
MediaLibrary library = new MediaLibrary();
if (radioButtonCameraRoll.IsChecked == true)
{
// Save the image to the camera roll album.
Picture pic = library.SavePictureToCameraRoll("SavedPicture.jpg", myFileStream);
MessageBox.Show("Image saved to camera roll album");
}
else
{
// Save the image to the saved pictures album.
Picture pic = library.SavePicture("SavedPicture.jpg", myFileStream);
MessageBox.Show("Image saved to saved pictures album");
}
myFileStream.Close();
}
I'm currently writing a portrait only app, but I have a customer requirement that they'd like to implement a special feature if the phone is turned on its side.
To be clear they don't want the page to change orientation - so keeping the page as portrait works well here - but they do want to be able to detect the sideways change.
Is there anyway of finding this out (e.g. from rootframe or from some other object?) or do I have to access the Accelerometer data and work it out myself?
To be clear on this...
I'm trying to keep the page in portrait at all times.
and if I specify SupportedOrientations="portraitorlandscape" then keeping the page in portrait seems to be hard (correct me if I'm wrong, but it just doesn't seem to want to stay in portrait - the MS SDK is too good at making the page go landscape)
and if I don't specify SupportedOrientations="portraitorlandscape" then I don't get calls to OnOrientationChanged in either the page or the RootFrame
And as the icing on the cake... I need the phone to stay in portrait mode too - I need the SystemTray to stay at the top of the screen (the portrait top).
You can handle the OnOrientationChanged event which will return a PageOrientation enumeration.
Accepting this because of the comments:
#Stuart - You may find the Orientation Helper class in this starter kit useful. It uses the accelerometer, so I guess you'll have to use that, but it might save you time rolling out your own version: http://msdn.microsoft.com/en-us/library/gg442298%28VS.92%29.aspx#Customizing_Behavior
This might help, but for a case when arriving to this particular page, not for the initial page - so only partly answering the question. It trigs the OnOrientationChanged although no change has been done! (Figured out this solution after having tried to find a solution for two days) :
On the particular page, write in . xaml code
Orientation="None"
On the .xaml.cs side, write under
InitializeComponent();
Orientation = this.Orientation;
this.OrientationChanged += new EventHandler<OrientationChangedEventArgs>
(OnOrientationChanged);
and separately
void OnOrientationChanged(object sender, OrientationChangedEventArgs e)
{
if ((e.Orientation & PageOrientation.Landscape) != 0)
{
MyImage.Height = 480; //for example
}
{
MyImage.Width = 480; // for example
}
}
In my case, I placed the image as follows:
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel>
<Image x:Name="MyImage"/>
</StackPanel>
.. followed by other code, still loading during which time picture is shown ...
This decreases the size of the image when in Landscape mode when entering the page!
Got the solution, finally, after having seen Jeff Prosises site
Detect orientation change:
http://alan.beech.me.uk/2011/04/19/detecting-orientation-change-wp7dev/
I had to do a similar thing in one of my apps before where an image that is used as the background doesnt rotate but other items on the page do.
The code looks a bit like this:
protected override void OnOrientationChanged(OrientationChangedEventArgs e)
{
// Keep the image in the same position as in portrait
// But still allows other controls to rotate when orientation changes.
switch (e.Orientation)
{
case PageOrientation.LandscapeRight:
ForegroundImage.RenderTransform = new CompositeTransform { Rotation = 90 };
ForegroundImage.RenderTransformOrigin = new Point(0.5, 0.5);
ForegroundImage.Margin = new Thickness(158.592, -158.792, 158.592, -160.558);
break;
case PageOrientation.LandscapeLeft:
ForegroundImage.RenderTransform = new CompositeTransform { Rotation = 270 };
ForegroundImage.RenderTransformOrigin = new Point(0.5, 0.5);
ForegroundImage.Margin = new Thickness(158.592, -158.792, 158.592, -160.558);
break;
default: // case PageOrientation.PortraitUp:
ForegroundImage.RenderTransform = null;
ForegroundImage.RenderTransformOrigin = new Point(0, 0);
ForegroundImage.Margin = new Thickness();
break;
}
base.OnOrientationChanged(e);
}
Unfortunately there's no real work around for the system tray or app bar. For the system tray you could hide this though and then only show it (for a period of time) when the user taps or swipes near that part of the screen.
I'm looking for a photo gallery for Windows Phone 7. Something that looks and works the same as the built-in photo viewer (slide photo's using a flick action, resize using pinch, drag). When you flick the image you can see it sliding to the next image...and snaps the list to that image.
I already built the resize and drag functionality for the images. I just can't figure out how to create the actual photo slider.
Can anyone point me into the right direction?
Things i've tried:
Pivot Viewer (doesn't work because it interferes with the drag functions of the image, haven't been able to disable the pivot viewer touch)
Plain listbox (can't find how to snap to the current image)
Thanks in advance
Actually I've implemented exactly what you are saying in one of my apps,
You need to use Silverlight Control TOolkit's gesture listener to capture Drag and Pinch from touch.
define a CompositeTransformation for your image and set it's scale (on pinch) and Offset (in drag).
Obviously when the image is not zoom, drag can trigger going to next image.
To make it feel smoother, you may want to define a storyboard on your page resources to use (instead of just settings Offset)
I hope it can help/
Drag handlers pseudo code for slider effect:
<Canvas>
<Image x:Name="imgImage" Source="{Binding ...}" Width="..." Height="...">
<Image.RenderTransform>
<CompositeTransform x:Name="imgImageTranslate" />
</Image.RenderTransform>
</Image>
</Canvas>
private void GestureListener_DragCompleted(object sender, DragCompletedGestureEventArgs e)
{
if (e.Direction == System.Windows.Controls.Orientation.Horizontal)
{
var abs = Math.Abs(PANEL_DRAG_HORIZONTAL);
if (abs > 75)
{
if (PANEL_DRAG_HORIZONTAL > 0) // MovePrevious;
else //MoveNext();
e.Handled = true;
}
}
}
double PANEL_DRAG_HORIZONTAL = 0;
private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)
{
if (e.Direction == System.Windows.Controls.Orientation.Horizontal)
{
PANEL_DRAG_HORIZONTAL += e.HorizontalChange;
var baseLeft = -imgImage.Width / 2;
if (PANEL_DRAG_HORIZONTAL > 75) imgImageTranslate.OffsetX = baseLeft + PANEL_DRAG_HORIZONTAL;
else if (PANEL_DRAG_HORIZONTAL < -75) imgImageTranslate.OffsetX = baseLeft + PANEL_DRAG_HORIZONTAL;
else imgImageTranslate.OffsetX = baseLeft;
}
}
}
private void GestureListener_DragStarted(object sender, DragStartedGestureEventArgs e)
{
PANEL_DRAG_HORIZONTAL = 0;
}
What about using a ScrollViewer with horizontal orientation? Of course, you will have to manually detect user actions and implement the proper response (with a couple of properly set Storyboards).
Even a better approach would be writing your own custom control that will view images. A good place to start is this - a CoverFlow control in Silverlight. Once you get the idea how you can bind your image collection to a custom control, all you need is handle user gestures on the currently selected item.
HI all,
I wnt to develop an ImageViewer using qt. I m trying to resize big images by scaling them. My problem is , when i change the screen orientation some part of the image gets clipped and also if i open the image in landscape mode, by default the size of image remains small even when i change back to portrait mode. What am i Doin wrong?
Please help me out. Heres the code dat i hv written
ImageViewer::ImageViewer()
{
setAttribute(Qt::WA_DeleteOnClose);
QAction *back = new QAction(this);
back->setText(QString("Back"));
connect(back,SIGNAL(triggered()),this,SLOT(close()));
back->setSoftKeyRole(QAction::PositiveSoftKey);
addAction(back);
imageLabel = new QLabel();
imageLabel->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
imageLabel->setAlignment(/*Qt::AlignLeft|*/Qt::AlignCenter);
QWidget *widget = new QWidget;
layout=new QStackedLayout();
layout->addWidget(imageLabel);
widget->setLayout(layout);
setCentralWidget(widget);
}
void ImageViewer::showImage(QString filePath)
{
QImageReader reader;
reader.setFileName(filePath);
QSize imageSize = reader.size();
imageSize.scale(size(), Qt::KeepAspectRatio);
reader.setScaledSize(imageSize);
QImage image = reader.read();
imageLabel->setPixmap(QPixmap::fromImage(image));
imageLabel->adjustSize();
}
You should re-implement QLabel's resizeEvent or install event filter to it and handle QResizeEvent there
The content of showImage method should go to handler of a resize event.
Currently you are using size() of ImageViewer widget (which seems to be derived from QMainWindow), it's better to use imageLabel.size(); or the best QResizeEvent::size() as this will prevent a problem if you will change UI layout in future.