Develop Reference

Difficult to get an item tapped - Expand hit area

I have a Image, which I want to get the tap from it (actually the grid that contains it, because it is bigger). But this is not working right, because I have to be really precise when touching the screen to touch the button, otherwise it wont work.
<Grid Grid.Column="0" Tapped="DrawerIcon_Tapped" HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Margin="5" x:Name="DrawerIcon" Source="/Assets/but_drawer.png" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image.RenderTransform>
<CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
</Image.RenderTransform>
</Image>
</Grid>
Is there any way to expand the area of an element that gets hit when I tap?

The CompositeTransform only makes the image larger, to make the Hit area larger you have to do the following:
As you did, surround the object (Image) with a Grid
Add the Tapped event to the Grid
The Margin of the Image will determine the hit area; thus making this larger will make the hit area larger (or anything that makes the Grid larger).
Finally, and most annoyingly: Make the Background of the Grid Transparent!
To fix your code, just add Background="Transparent" and you can also increase the Margin to 10 if you like:
<Grid Grid.Column="0" Background="Transparent" Tapped="DrawerIcon_Tapped" HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Margin="10" x:Name="DrawerIcon" Source="/Assets/but_drawer.png" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image.RenderTransform>
<CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
</Image.RenderTransform>
</Image>
</Grid
Hope this helps.

I achieve it by making a transparent Rectangle out of every Grid over the object that I want to be tapped (only under the root Grid) and attaching the Tapped event to it. Apparently being under Grids and Stackpanels affect the Tapped event somehow. This is not a real fix, just a workaround. Maybe it's a bug.

Display image using a scaling value on wpf MVVM

I have this markup in XAML:
<Canvas Width="250" Height="250">
<Image Source="{Binding UserImage}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Canvas>
This is showing image with its original size (I don't know the size as it depend on userimage which is not available at design time)
I want to show it in say 1/10 of its original size. It is very important that the pixel size of the display image be exactly 1/10 of original image size.
How can I do this?
This is an MVVM application, and I prefer to do this in XAML instead of C# code if it is possible.

Have you tried applying a scale transformation on the image? First, add the following to the Image control to enforce it being drawn in its original size:
<Image ... Stretch="None" />
Then apply a LayoutTransformation to scale the image down to 1/10 of the original size:
<Image Stretch="None" Source="{Binding UserImage}" HorizontalAlignment="Center" VerticalAlignment="Center">
<Image.LayoutTransform>
<ScaleTransform ScaleX="0.1" ScaleY="0.1"/>
</Image.LayoutTransform>
</Image>

I would have just put this in a comment, but I don't have enough rep. Can you not just set the height and width on the <Image> tag instead of the <canvas> tag? or possibly use the MaxHeight and MaxWidth Property on the <Image> tag?

Resize polygon in to fill in Canvas

How can i resize Polygon which is placed in Canvas so it fills that canvas?
I don't want to change values of polygon points, I just want it to be displayed inside of canvas in case polygon coordinates are too large, too small or out of screen.

Came across this problem recently and worked out a solid solution:
<Canvas x:Name="CanvasName">
<Polygon Points="{Binding Path=PointCollectionName}" Stretch="Fill" Fill="Black"
Width={Binding ElementName=CanvasName, Path=ActualWidth}"
Height={Binding ElementName=CanvasName, Path=AcutalHeight}"/>
</Canvas>

Do you have the chance to replace the Canvas with a Grid? If so just set the Stretch attribute of the polygon, e.g. Uniform keeps the aspect ratio:
<Grid Width="297" Height="159">
<Polygon Points="10,110 110,110 110,10" Fill="Blue" Stretch="Uniform" />
</Grid>

SurfaceInkCanvas scales strokes when painting out of bounds

I have a ScatterView that contains an image over which I should be able to draw.
<s:ScatterView HorizontalAlignment="Center" Margin="0,0,0,0" Name="desk" VerticalAlignment="Center">
<s:ScatterViewItem Width="200" Height="200">
<Grid>
<Image Name="img1" Source="/Resources/Desert.jpg"/>
<Viewbox>
<s:SurfaceInkCanvas Name="cvs1"/>
</Viewbox>
</Grid>
</s:ScatterViewItem>
</s:ScatterView>
I noticed that whenever I draw an ink trail towards the border of the image, the strokes on the ink canvas are scaled down to make room for more stuff. I do not want these strokes to be zoomed out. How can I change this behavior?
Here is a video that shows what's going on.

I figured it out. This behavior is caused by the fact that I hadn't defined a Width and Height on the SurfaceInkCanvas. This should do the trick:
<s:SurfaceInkCanvas Name="cvs1" Width="200" Height="200" />

Prevent image crop when rotating using transform

I'm binding following XAML to RotateAngle property and it works great with one "but". Image displays cropped. Image control doesn't seem to be refreshing/resizing after rotation. Is there any way to force resize on image and scrollviewer?
<ScrollViewer Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" BorderThickness="0" HorizontalScrollBarVisibility="Auto">
<Image
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Source="{Binding Input, Converter={StaticResource ByteArrayToBitmapConverter}}"
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<RotateTransform Angle="{Binding RotateAngle}"></RotateTransform>
</Image.RenderTransform>
</Image>
</ScrollViewer>

http://www.silverlight.net/content/samples/sl3/toolkitcontrolsamples/run/default.html
Go to this page, there is a control called LayoutTransformer. See the sample of that control. It handles rotation, scaling and skewing of images, textbox, listbox, etc.
You will get the code there.
Hope that helps.!

You can try:
<Image x:name="ctrl"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Source="{Binding Input, Converter={StaticResource ByteArrayToBitmapConverter}}"
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<RotateTransform Angle="{Binding DataContext.RotateAngle, ElementName=ctrl}"></RotateTransform>
</Image.RenderTransform>
</Image>

Or you can use:
<Image
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Source="{Binding Input, Converter={StaticResource ByteArrayToBitmapConverter}}"
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<RotateTransform Angle="{Binding DataContext.RotateAngle, RelativeSource={RelativeSource Self}}"></RotateTransform>
</Image.RenderTransform>
</Image>

Assuming you want to scale your image down to fit the original image space, you could use my CalculateConstraintScale method from here:
Silverlight Rotate & Scale a bitmap image to fit within rectangle without cropping to scale the image down based on the rotation.
Click here for a working testbed app created for that answer (looks like the image below):