I am trying to use a XAML ScrollViewer to 'cheaply' add pinch-zooming to an image. The issue however is that when panning around the image, it keeps snapping to the very left. If I slide it right, it looks fine, but the second I release the image, it snaps back to the left.
This problem only persists horizontally - for vertical panning, it works fine.
I abstracted this to the most simple test case, and it persists. My XAML code is as follows:
<ScrollViewer>
<Image Source="http://i.imgur.com/1WlGT.jpg" />
</ScrollViewer>
Any help is appreciated.
I've resolved this.
The issue is you have to explicityl set HorizontalScrollBarVisibility to true.
<ScrollViewer x:Name="scrollViewer"
VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"
ZoomMode="Enabled">
<Image Source="http://i.imgur.com/1WlGT.jpg" />
</ScrollViewer>
Just illustration of possible solution of what Michal Strzalkowski mentioned about in his comment below your answer, which is image being shown in full size (not fitting in the container boundaries). Quick fix in XAML using Binding with ElementName and Path
<ScrollViewer x:Name="SV_ImageZoom"
MaxZoomFactor="3"
MinZoomFactor="1"
ZoomMode="Enabled"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Image Source="http://i.imgur.com/1WlGT.jpg"
Width="{Binding Path=ViewportWidth, ElementName=SV_ImageZoom}" />
</ScrollViewer>
Related
I would like to achieve the layout shown at the bottom in my app.
I got it sort of working by using the following structure
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<StackLayout>
<Image>
I currently have the problem that I want to control the image height so that, considering the screen size or screen orientation, there are 2 or 3 rows of images visible.
Things I tried:
setting a HeightRequest on the image. This seems to be ignored, probably because the scrollcontainer creates an "unlimited" canvas to paint on. The image scales up to the actual image size, which is too large.
set a hard value for the height of the Grid.Row. This clips the fullsize image.
I've seen this workaround in the demo of the flexgrid where they seem to get around this by downloading a image that is resized on the fly. But this does not seem like an ultimate fix for me.
blue lines = scrollview
black lines = view
red lines = image
Thx #Nick Kovalsky for telling me that it should work like that. I just found out that the cause seems to lie in the fact that I used a StackLayout around the image (containing the image and the image-label). This was something I left out when posting my original question. When I replaced this StackLayout with a Grid it worked as expected.
Old situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<StackLayout Orientation="Vertical">
<Image>
<Label>
New situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<Grid>
<Image>
<Label>
I am using ImageCircle plugin for xamarin forms
and it works well sometimes, when the picture is a kind of square...
But, when it's a rectangle, my image is resized and it's not that I planned
what Can I do to the image stop resize?
my code
<controls:CircleImage WidthRequest="75" HeightRequest="75" Grid.Row ="0" Grid.Column="1" Source="cadastrarPhoto.png" x:Name="cadastrar_foto_perfil">
I seted a fix height and width as you can see, but it didn't solve my problem, maybe because this circle image is a child of a grid and its grandfather (lol) is a relative layout but I really don't know if WidthRequest can change because of that...
How it always should be
How it is when the image is a rectangle:
EDIT---------------------------------------------
I put it in a Stach layout and I defined Aspect as fit...it helped but didnt solve...
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" WidthRequest="75" HeightRequest="75" Grid.Row="0" Grid.Column="1">
<controls:CircleImage Aspect="AspectFit" VerticalOptions="EndAndExpand" HorizontalOptions="EndAndExpand" Source="cadastrarPhoto.png" x:Name="cadastrar_foto_perfil">
<controls:CircleImage.GestureRecognizers>
<TapGestureRecognizer Tapped="ChamaPickerImage"/>
</controls:CircleImage.GestureRecognizers>
</controls:CircleImage>
</StackLayout>
I changed the api that I was using.
Now I use ffimage
Setting your HorizontalOptions="EndAndExpand" is what is causing you issues.
Instead, try setting both HorizontalOptions and VerticalOptions to a vaule that doesn't expand (Start, Center, End)
Note: I've noticed that you actually have to explicitly set HorizontalOptions to something that doesn't expand in order to get iOS to avoid stretching your CircleImage. Simply leaving it blank will default to stretching the image.
In the image, instead of HorizontalOptions="EndAndExpand" or VerticalOptions="EndAndExpand", just set it as "Start", "Center" or "End".
By default if you set it as "xxExpand" or do not set it at all, Xamarin iOS expands the image...
I have a Grid with an Image inside a ScrollViewer. The user needs to be able to zoom in and out of the image. The problem is when I zoom the scrollviewer seems to snap back to the left side of the image although I want the viewer to stay at the zoomed position. The XAML code looks like this
<ScrollViewer Name="ScrollViewer" HorizontalSnapPointsType="None" VerticalSnapPointsType="None" ZoomSnapPointsType="None">
<Grid x:Name="RenderedGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Image x:Name="RenderedImage" Stretch="Fill" />
<canvas:CanvasControl Name="DrawingCanvas" Draw="CanvasControl_Draw" ClearColor="Transparent"/>
</Grid>
</ScrollViewer>
I thought it would be enough with setting the SnapPointType to "None", but that doesn't seem to work.
I wrote a blog post exactly about this issue: Why is my zoomable ScrollViewer snapping the image to the left?
The first part of the problem is the ScrollViewer itself, it needs the HorizontalScrollBarVisibility and VerticalScrollBarVisibility set to Auto.
<ScrollViewer ZoomMode="Enabled"
MinZoomFactor="1"
MaxZoomFactor="4"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
For that to really work, you'll need to limit the Image size to some width/height, like this:
<Image Source="{Binding ImageUri}"
MaxWidth="{Binding DataContext.PageWidth, ElementName=MyPage}"
MaxHeight="{Binding DataContext.PageHeight, ElementName=MyPage}"/>
You can find more details in my blog post, and full source code on GitHub.
I'm working with a toggle button and rather than show text I want to show an image so I have this:
<ToggleButton Grid.Column="1" IsChecked="true" MinWidth="50" MinHeight="0" BorderThickness="0" HorizontalAlignment="Center">
<Image Source="ms-appx:///Assets/Icons/phonebutton.png" Stretch="None" RenderTransformOrigin="0.5,0.5" Margin="0">
<Image.RenderTransform>
<CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
</Image.RenderTransform>
</Image>
</ToggleButton>
I have the transform to make the image a bit smaller so it's "inside" the button instead of filling it.
However, no matter what I do the button has a large padding around the image, even though the image itself has no margins or padding. I've set margin=0 on everything but the ToggleButton insists on putting space around the image, so the button is larger than it needs to be and cuts off inside the grid row it's in (which has a height="*")
I want the toggle button to "shrink" to fit in the row but still show the full image inside ...
while typing this the autosuggest found this link ToggleButton does not fill the area(windows phone) and by adding the style PhoneTouchTargetOverhang it does look better but then cuts off the image at the bottom unless I add negative padding to the togglebutton.
Anyone have any idea what I'm doing wrong?
Is there any way to disable it?
I have added the following margin to an image of 512x512:
<Image Source="/Assets/award4.png" Stretch="None" RenderTransformOrigin="0.5,0.5" Margin="-100,0,-100,0">
<Image.RenderTransform>
<CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
</Image.RenderTransform>
</Image>
And it fits centered
I am trying to create a simple image viewer in silverlight.
my code is this:
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Margin="0" Padding="0" Width="300" Height="300">
<Canvas Width="600" Height="400" Margin="0">
<Image Source="/MapViewer;component/Images/imageFileName.jpg" Stretch="None" Margin="0,0,90,5"></Image>
</Canvas>
</ScrollViewer>
(I used the Canvas because in the future I would like to paint more fixed elements on the image, such as lines, polylines, etc)
This code is working ok except the fact that the ScrollViewer cuts the image: say the image is 800x600, than I can view around 700x500. I dont know if that was clear enough, so I will add a picture:
(this is the original image)
(and this is the picture, as viewed in my application)
As you can see, I cannot view the bottom right corner of the image... can somebody please tell me how to fix this?
It is not the scroll viewer cropping your image, it is the fixed-size canvas where you placed it. If you want your entire image to be visible you need to set the canvas size to be exactly the same size as your image.