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.
Related
I want to create a custom user control with two grids in which I want to load images and until images are loaded I want to show the progressRing control. The problem occurs when I add a second ProgressRing. My XAML looks like this:
<Grid Margin="0,0,0,21" Background="{ThemeResource PhoneAccentBrush}">
<Grid x:Name="leftImage" Margin="10" Width="190" Height="190"
HorizontalAlignment="Left">
<Image x:Name="imageHolderLeft" x:FieldModifier="public" Width="180"
Height="180" ImageFailed="imageHolderLeft_ImageFailed"
ImageOpened="imageHolderLeft_ImageOpened"/>
<Grid>
<ProgressRing x:Name="waitImageLeft" IsActive="True"
VerticalAlignment="Center" HorizontalAlignment="Center"
Background="Transparent"
Foreground="{ThemeResource AppBarBackgroundThemeBrush}"/>
</Grid>
</Grid>
<Grid x:Name="rightImage" Margin="10" Width="190" Height="190"
HorizontalAlignment="Right">
<Image x:Name="imageHolderRight" x:FieldModifier="public" Width="180"
Height="180" ImageOpened="imageHolderRight_ImageOpened"
ImageFailed="imageHolderRight_ImageFailed"/>
<Grid>
<ProgressRing x:Name="waitImageRight" IsActive="True"
VerticalAlignment="Center" HorizontalAlignment="Center"
Background="Transparent"
Foreground="{ThemeResource AppBarBackgroundThemeBrush}"/>
</Grid>
</Grid>
</Grid>
So when I comment out one ProgressRing it works fine, but when there are two of them my program crashes with the following error: Layout cycle detected. Layout could not complete
Does anyone knows why?
Thanks :)
This error indicates that the layout of an element depends on other elements that indirectly depend on the original element. Windows was not able to figure out the overall layout... Much like an infinite loop or infinite recursion.
In your case the cause probably relates to the alignments and sizes. You should be able to solve the problem by simplifying the layout. Keep the outer Grid but add 5 ColumnDefinitions, the middle one having width * and the other ones width Auto. Get rid of the other 4 Grids. Instead, put the two images and progress rings directly into the main Grid in columns number 0, 1, 3, and 4 (using the Grid.Column attached property). Put the desired sizes on the Width and Height properties of the images and progress rings, not on the Grid.
In XAML I'm trying to make a large image that's cut off as a background to slowly move across the screen until it reaches the images otherside. Problem is the image is always no bigger than the display even it was stretched out. So I'm left with a image that's the size of the screen moving off with a black background.
<Image x:Name="background" HorizontalAlignment="Left" Grid.Row="1" Width="1500" Stretch="Fill" MaxWidth="1500" MinWidth="1500">
<Image.RenderTransform>
<TranslateTransform x:Name="bgTranslate" X="0"></TranslateTransform>
</Image.RenderTransform>
</Image>
The Grid control arranges the Image with the available cell size. Then the Image control cuts off the parts of the image that are outside the arrange rectangle (and hence not visible), before any RenderTransform is applied.
A simple workaround is to put the Image in a Canvas, which arranges its child elements with their desired size:
<Grid ...>
...
<Canvas Grid.Row="1">
<Image x:Name="background" Width="1500">
<Image.RenderTransform>
<TranslateTransform x:Name="bgTranslate"/>
</Image.RenderTransform>
</Image>
</Canvas>
...
</Grid>
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" />
Pretty straight forward. I have a rectangle with a label over top of it. I'f like to know how to get the rectangle to scale to fit the text.
my XAML:
<Grid x:Name="LayoutRoot" Background="White" Height="158" Width="264">
<Rectangle Height="22" HorizontalAlignment="Left" Name="rectangle1" Stroke="Black" MinWidth="40" StrokeThickness="1" VerticalAlignment="Top" RadiusX="6" RadiusY="6" Fill="#1b6487" Width="64"></Rectangle>
<sdk:Label Margin="9,3,209,0" Name="label1" VerticalAlignment="Top" Content="$999.99" />
</Grid>
Remove your explicit widths and heights.
You've got the Rectangle and the Label in the same cell of the Grid, so by default they will be the same size. You're overriding that and telling them not to be.
Alternatively, you could wrap a Border around your Label. This is the sort of thing that Border is meant for.
With the following code I can demonstrate how a black panel with a opacity of 50% is on top of every rectangle:
<Grid>
<Rectangle Fill="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.5" Canvas.ZIndex="1"/>
<Rectangle Fill="Red" Width="200" Height="200" Canvas.ZIndex="0"/>
<Grid>
<Rectangle Fill="Blue" Width="100" Height="100" Canvas.ZIndex="0"/>
<Rectangle Fill="Yellow" Width="50" Height="50" Canvas.ZIndex="1"/>
</Grid>
</Grid>
It looks like this:
I would like to have the yellow rectangle above the black panel, but that seems to be impossible.
I can achieve something close by setting the ZIndex of the Grid containing both the Blue and Yellow rectangles to "1". But this would also raise the blue rectangle above the black, and this is a problem.
<Grid>
<Rectangle Fill="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.5" Canvas.ZIndex="1"/>
<Rectangle Fill="Red" Width="200" Height="200" Canvas.ZIndex="0"/>
<Grid Canvas.ZIndex="1">
<Rectangle Fill="Blue" Width="100" Height="100" Canvas.ZIndex="0"/>
<Rectangle Fill="Yellow" Width="50" Height="50" Canvas.ZIndex="1"/>
</Grid>
</Grid>
How do I get only the yellow rectangle above the black?
In my real application I have user controls instead of the rectangles. I like to make a particular control standing out by having everything else covered by the half-black shade.
Many Thanks,
I don't think you'll be able to achieve this with your current arrangement of controls.
There are two levels of controls here, the "Blue" and "Yellow" controls inside the inner grid and then the "Black" and "Red controls together with the inner grid.
The ZIndex works on controls at the same "level" - so you can ensure that the yellow control is on top of the blue, but then at the higher level these are grouped under the inner grid so are treated as a single unit.
The only way this would work is if all your controls were at the same level. If you included a second semi opaque rectangle in the inner grid you could get the yellow to be on top of that but that might end up making other controls too dark.
One approach might be to not use just a simple black rectangle.
Instead use a Path composed of two rectangles. The first rectangle will cover the whole area and the second would just cover the control to be available.
This creates a large rectangle with a hole in it where your target control can show through and accept input.
The down side is working out the rectangle geometry to add to create the hole but that's fairly straight forward.