|
Hello,
I recently got a project and I need help how to crop an image, i got all the way where you get the image from browsing to your local disk, and it comes up on the image viewer, but now I need help on this part, I want the user to click on the button to start cropping it, after the user has made a rectangle around the part of the image he wants to crop, click on the button below the start cropping where i guess the button can say "crop it", or just change the start cropping and it turns into "crop it" which i think would be nice. But anyways, after the user clicks on the "crop it" it is now displayed on the imageviewer. How can this be done? hopefully I explained myself clearly, again, just need help on how to do a basic crop image, i looked at a couple of examples:
http://www.codeproject.com/KB/WPF/ImageCropper.aspx#HowItWorks
and
http://www.codeproject.com/KB/WPF/CropAdorner.aspx
but they are no help, they say in there examples its easier... YA right!!! there code doesnt look easy, can anyone give me an easier example and explain in jr. programming terms : )
also I guess a good example about the croping would be like windows paint, how the user presses the button to start cropping then they can save it. etc.
Thank you
|
|
|
|
|
siten0308 wrote: and explain in jr. programming terms : )
Well, some tasks are just more complex than can be explained in 'jr programming terms'. Having said that, all you need to do, is work out where the user clicked on the image and create a new image to that size, doesn't seem that hard to me ?
Christian Graus
Driven to the arms of OSX by Vista.
|
|
|
|
|
Hey chris,
Ok i guess that shed some light, but I am wondering how microsoft paint did it, how when you click on the zoom button, the rectangle box appears and when you click on the image with that rectangle box, it zooms in or enhances that part of the image, I am putting it together in my mind that it creates a new image with that size, is that right? if so, just getting it how to do it is a little hard, but correct me if I am wrong, do I figure out how to get that rectangle box to appear, then when the user clicks on that part of the imgae, which i called the image a variable called imageviewed, i just declare a new image or a new instance of the image that will replace the original with the zoom in one correct?
|
|
|
|
|
It doesn't look like Paint creates a new zoomed image, although that is
a possible approach.
It looks like Paint just stretches the "area-of-interest" designated by the rectangle
to a larger area of the window. There's no interpolation either - looks pretty pixelated.
Mark
Mark Salsbery
Microsoft MVP - Visual C++
![Java | [Coffee]](https://www.codeproject.com/script/Forums/Images/coffee.gif)
|
|
|
|
|
Sorry,
UPDATE:
Got somewhat the image to expand, but I made a button to do that, which is below, problem is, I want the user to be able to click on the button and it zooms in closer and closer and closer etc until its a spec, same with zoom out. I am doing something wrong because everytime i press the button, it stays that size and doesnt go smaller or bigger. what am i doing wrong : (
buttonzoomin
{
photoviewer1.height = +200;
photoviewer1.width = +200;
}
buttonzoomout
{
photoviewer1.height = 100;
photoviewer1.width = 100;
}
I know i am close but if someone can tell me what am i doing wrong that would be great and save me from pulling any more hair!!
Thank you
|
|
|
|
|
siten0308 wrote: photoviewer1.height = +200;
photoviewer1.width = +200;
What is photoviewer1?
Is that the actual way you coded it?
Mark
Mark Salsbery
Microsoft MVP - Visual C++
|
|
|
|
|
If you are wanting to increment the size of the image, you need to put the + before the =, i.e. +=. What you have said here is that you want the width and height to be 200.
|
|
|
|
|
Thanks for the information, Below is the code that is finally working, i decided to throw some stuff out such as the buttons and use the slider instead. But i have one problem, when you browse for the image and it uploads to the image object, for some strange reason it looks like it is already zoomed in, i want it to capture exactly how the image looks whenopening it in paint etc. I have the code below including the XAML to see if there is something i am doing wrong, thanks again and merry christmas eve everyone : )
code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Forms;
namespace WPFcropimage
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
}
private void _btnbrowse_Click(object sender, RoutedEventArgs e)
{
OpenFileDialog dlg = new OpenFileDialog();
dlg.InitialDirectory = "c:\\";
dlg.Filter = "Image files (*.jpg)|*.jpg|*.bmp)|*.bmp|All Files (*.*)|*.*";
dlg.RestoreDirectory = true;
if (dlg.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
string selectedFileName = dlg.FileName;
BitmapImage bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.UriSource = new Uri(selectedFileName);
bitmap.EndInit();
_viewedPhoto1.Source = bitmap;
}
}
private void _btnClose_Click(object sender, RoutedEventArgs e)
{
this.Close();
}
private void Zoom_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
}
}
}
XAML:
<br />
<Window x:Class="WPFcropimage.Window1" <br />
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" <br />
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" <br />
Title="Window1" Height="370" Width="591"><br />
<Grid Height="341" Width="579.942"><br />
<DockPanel Margin="23,33,181,29"><br />
<Slider x:Name="Zoom" DockPanel.Dock="Left" Value="1" Minimum="0.1" Maximum="5" Width="25" Orientation="Vertical" ValueChanged="Zoom_ValueChanged" /><br />
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Height="270" Width="356"><br />
<Image Stretch="None" Height="262" Width="349" Name="_viewedPhoto1" HorizontalAlignment="Center" Opacity="0" StretchDirection="UpOnly" VerticalAlignment="Center"><br />
<Image.LayoutTransform><br />
<ScaleTransform ScaleX="{Binding ElementName=Zoom,Path=Value}" <br />
ScaleY="{Binding ElementName=Zoom,Path=Value}"/><br />
</Image.LayoutTransform><br />
</Image><br />
</ScrollViewer><br />
</DockPanel><br />
<Button Height="38" HorizontalAlignment="Right" Margin="0,33,41,0" Name="_btnbrowse" VerticalAlignment="Top" Width="104" Click="_btnbrowse_Click">Browse for Picture</Button><br />
<Button Height="38" HorizontalAlignment="Right" Margin="0,89,41,0" Name="_btnCrop" VerticalAlignment="Top" Width="104">Crop Picture</Button><br />
<Button Height="37" HorizontalAlignment="Right" Margin="0,0,41,33.5" Name="_btnClose" VerticalAlignment="Bottom" Width="104" Click="_btnClose_Click">Close</Button><br />
<Border Margin="53,37.5,175.942,33.5" Name="_border1" BorderBrush="Black" BorderThickness="2" /><br />
</Grid><br />
indow><br />
|
|
|
|
|
<Grid x:Name = "LayoutRoot">
<Grid.BackGround>
<ImageBrush ImageSource = "Mypic.jgp"/>
</Grid.BackGround>
</Grid>
i have made a image on mspain named Mypic.jpg and added it to my porject but things are going wrong visual studio not responding when ImageSource = "Mypic.jgp"
Any solution
|
|
|
|
|
Here[^] is a pretty good blog post about the best way to include images and videos in Silverlight
Hope it helps!
|
|
|
|
|
I am using VS2008 SP1.
I have a solution with two projects.
Project A is a class library, and has a markup extension.
public class BadExtension : MarkupExtension
{
public string A { get; set; }
public string B { get; set; }
public BadExtension() { }
public BadExtension(string a) { this.A = a; }
public BadExtension(string a, string b) { this.A = a; this.B = b; }
public override object ProvideValue(IServiceProvider serviceProvider) { return A + B; }
}
Project B is a wpf project. Part of the code of a window is
<button grid.row="0" content="{l:Bad ItemA}" />
<button grid.row="1" content="{l:Bad ItemA, ItemB}" />
Now, the WPF designer refuses to load, saying that no constructor for BadExtension has 1 parameter.
However, when I run the app, it loads perfectly and both button texts display perfectly.
This is the kicker: In the BadExtension.cs file, if I switch the (string) and (string, string) constructors, the designer now complains about no constructor having 2 parameters.
p.s. Or should this be in the Visual Studio forum?
|
|
|
|
|
Looks like a bug in the VS designer.
jamie550 wrote: when I run the app, it loads perfectly and both button texts display perfectly.
It works fine in Expression Blend as well.
Mark
Mark Salsbery
Microsoft MVP - Visual C++
![Java | [Coffee]](https://codeproject.global.ssl.fastly.net/script/Forums/Images/coffee.gif)
|
|
|
|
|
I have no idea why I didn't begin using Blend a long time ago, for it is so much better in many cases. I think I'll never use the vs wpf designer again, except for editing xaml.
|
|
|
|
|
I generally use both VS and blend at the same time....I'm getting more and more used to
which stuff works better on one or the other.
It's frustrating though - I hate having to leave something out or do something different
because something doesn't work in and/or crashes the designer(s).
Mark
Mark Salsbery
Microsoft MVP - Visual C++
|
|
|
|
|
BTW, have you submitted this as a bug on Microsoft Connect?
If not, I'll do it....
Cheers,
Mark
Mark Salsbery
Microsoft MVP - Visual C++
|
|
|
|
|
It looks like someone has already done it here.[^]
|
|
|
|
|
Cool. Marked as fixed too.
Thank you 
Mark
Mark Salsbery
Microsoft MVP - Visual C++
|
|
|
|
|
I'm developing wpf application comprising of multiple usercontrols hosted in a main user control. This main user control can be hosted from winforms or wpf win app or a MSOffice Word Document Level Addin. Currently hosting the main user control from a winforms exe.
Whenever the application is minimized and restored, one of the user control hosting 3 itemscontrol (primarily a collection of textblock & textbox controls in a stackpanel) bound to custom objects, is always rendered blank. Upon resizing the window manually, it is displayed properly. I'm clueless, as to how to refresh the display to render the constituent controls in itemscontrol. Whereas hosting as a MSOffice Word Document Level Addin, even first time rendering, itemscontrol is blank.
I tried InvalidateVisual() & InvalidateMeasure() on the maincontrol and the concerened usercontrol, but of no use. Any help greatly appreciated.....
|
|
|
|
|
a shot in the dark here:
the PropertyMetadataOptions value passed in to the PropertyMetadata of a dependencyproperty that hosts the controls might affect how/when the rendering takes place.
|
|
|
|
|
How to change the propertymetadata options to make it work? Strange thing is if the window is resized or the control is resized manually from the window shown, the user control holding all items control displays properly.
I tried UpdateLayout on the main usercontrol, constituent user controls and also refresh on the windows form that hosting the main control, but no use!
How do I force a updatelayout on the wpf user control? UpdateLayout, InvalidateArrange, InvalidateVisual...nothing seems to work.
|
|
|
|
|
Well, I found the bug. ItemControls were inside a 3rd party actipro navigation pane control. Once I removed the pane control and displayed the itemscontrol in a simple grid, voila, it worked.
Thanks for all the inputs. I'll escalate to Actipro Software. But learnt a lot on wpf layout though!
|
|
|
|
|
I was thinking about making a scaled down spreadsheet like on google docs but with silverlight. Anybody else try something similar to this yet?
Mine is only going to do simple math and have text and maybe span columns a-f and rows 1-50.
Right now the idea is to store the formulas in a separate database table from the values, and i'm going to use grammar like <math> and <text> for to denote what each cell does.
If anybody has any comments, it would be greatly appreciated.
thanks.
|
|
|
|
|
Hi all!
Could you please help me with my problem. I am writing an app that allows users to drag controls over a canvas and have met the following strange behaviour: wpf performance slowsdowns as soon as a button on a form receives focus. This is so strange to me. I've posted a code of a sample app, please try to click on a red rectangle, and move the mouse holding left button. You should see that rectangle follows the cursor pretty fast. But if you click (or even press Tab to give the button a focus) and try to drag the rectangle again - you will see that now rectangle is not as fast as before.. The recrangle will be still slow if you click Tab again and give focus to the textbox.
Do you know why it happens and how I can avoid it?
<Window x:Class="ButtonSpeedTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="627" Width="580">
<Canvas Background="Wheat" MouseMove="MyMouseMove">
<Button Canvas.Left="30" Canvas.Top="30" Height="37" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="66">Button</Button>
<Rectangle MouseDown="MyMouseDown" MouseUp="MyMouseUp" MouseMove="MyMouseMove" Name="rect" Canvas.Left="100" Canvas.Top="100" Fill="Red" Stroke="Black" Width="70" Height="50" />
<TextBox Canvas.Left="246" Canvas.Top="37.52" Height="23" Name="textBox1" Width="120" />
</Canvas>
</Window>
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
namespace ButtonSpeedTest
{
public partial class Window1 : Window
{
bool isDragging;
public Window1()
{
InitializeComponent();
}
private void MyMouseDown(object sender, MouseButtonEventArgs e)
{
isDragging = true;
}
private void MyMouseUp(object sender, MouseButtonEventArgs e)
{
isDragging = false;
}
private void MyMouseMove(object sender, MouseEventArgs e)
{
if (isDragging)
{
Point position = e.GetPosition(this);
rect.SetValue(Canvas.LeftProperty, position.X - rect.Width / 2);
rect.SetValue(Canvas.TopProperty, position.Y - rect.Height / 4);
}
}
}
}
Thanks,
Sergey.
|
|
|
|
|
Just a guess - The animated background, at least on the default Vista
theme, may be slowing things down *shrug*
FWIW - I played around with your code-behind a bit. Here's what I was using
(changes marked in red):
bool isDragging;
private void MyMouseDown(object sender, MouseButtonEventArgs e)
{
<code>Mouse.Capture(rect);</code>
isDragging = true;
}
private void MyMouseUp(object sender, MouseButtonEventArgs e)
{
<code>if (isDragging)
{
Mouse.Capture(null);</code>
isDragging = false;
<code>}</code>
}
private void MyMouseMove(object sender, MouseEventArgs e)
{
if (isDragging)
{
Point position = e.GetPosition(<code>canvas</code>);
rect.SetValue(Canvas.LeftProperty, position.X - rect.Width / 2);
rect.SetValue(Canvas.TopProperty, position.Y - rect.Height / 4);
<code>e.Handled = true;</code>
}
}
Mark Salsbery
Microsoft MVP - Visual C++
|
|
|
|
|
Hi,
Thanks for your reply.
You are right about Vista themes. I've noticed that this effect can be seen only on Vista with enabled Aero.. If Aero is disabled - everything works perfectly.
However with Aero turned on - I see performance decrease even with your corrections to my code.
Thanks,
Sergey.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
