Make one page to preview one image with manual scale

lihuipeng49lihuipeng49 ✭✭✭Member ✭✭✭

I use Xamarin.Forms develop an chat app.
In the app, I want to send image to the others and let the others see the image.
Because the mobile screen is very small, so I need another page to just show one image, and let user to manual scale the image to see clearly!

I want to know use which page and control can do this?

Tagged:

Best Answers

Answers

  • JarvanJarvan Xamurai Member, Xamarin Team Xamurai
    edited June 19

    @lihuipeng49
    Use a popup page to display the image and slide Slider to change the size of image. Popup a page, try Rg.Plugins.Popup plugin.

    <?xml version="1.0" encoding="utf-8" ?>
    <pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
                 BackgroundColor="White"
                 x:Class="Demo.Pages.Image_Page">
        <StackLayout VerticalOptions="Center" HorizontalOptions="FillAndExpand" Padding="20, 20, 20, 20">
            <Grid HeightRequest="1000">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.9*"/>
                    <RowDefinition Height="0.1*"/>
                </Grid.RowDefinitions>
                <Image Grid.Row="0" x:Name="image" Source="grid_" HeightRequest="100" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                    </Image.GestureRecognizers>
                </Image>
                <Slider Grid.Row="1" Maximum="8" Minimum="2" Value="2" ValueChanged="Slider_ValueChanged" HorizontalOptions="Fill" Margin="10,0"/>
            </Grid>
        </StackLayout>
    </pages:PopupPage>
    
  • lihuipeng49lihuipeng49 ✭✭✭ Member ✭✭✭

    Sorry!
    I think I'm not say my want clearly.

    I need a window like the android system's 'photo viewer'.
    The user can use two finger action to scale the photo, and use one finger action to move the photo in the view.
    After then, user can touch the back button which on the top left to back to prior window.

  • lihuipeng49lihuipeng49 ✭✭✭ Member ✭✭✭

    @yousufctec
    Thanks, Your answer solve the android problem for me.
    The second, I need to let my app's UWP version have this function.
    It just use mouse wheel to scale the photo, and use pointer drag to move the photo.
    I think, use the Xamarin controls and process the touch or mouse event by my self is good method for android and UWP.

    @yelinzh
    Thanks for the refer link.
    I have send message to djgtram.

  • yousufctecyousufctec ✭✭✭ USMember ✭✭✭

    @lihuipeng49 ,
    If you use the hardware that supports touch for Windows, then I think it should be the same way as you use in Android.

    Regards,
    Yousuf.

Sign In or Register to comment.