Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 77050

Problem with applying scale to content of ScrollView

$
0
0

I have a scroll view (Orientation=Both) which has Grid as content.
The scroll works perfectly when the Grid is not scaled

When I set scale on Grid (in button handler), the grid is scaled correctly but the scroll bars are not updated. There is a large vacuum around the grid (Content)
Grid has Anchor at 0.5,0.5 to scale at center.

How to update the scrollbar sizes or force the scroll view to update based on the scaled content?

Problem is there on iOS and macOS (haven't tested other platforms)
Set the iOS Simulator to iPhone 7 (not mandatory though)

Here is my XAML and Code (Create a new XF project for iOS. Margins are used to distinguish elements on screen)
Main.XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ScrollviewProblem" x:Class="ScrollviewProblem.MainPage">
    <StackLayout BackgroundColor="Gray" Margin="25">
        <ScrollView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                    Orientation="Both"  BackgroundColor="Green" Margin="20">
            <Grid x:Name="myGrid" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"
                  BackgroundColor="White" Margin="20" AnchorX="0.5" AnchorY="0,5" ColumnSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Label TextColor="Black" Text="ABCD" HorizontalOptions="Center" VerticalOptions="Center" 
                       HeightRequest="50" WidthRequest="150" Grid.Column="0" 
                       HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
                <Label TextColor="Black" Text="EFGH" HorizontalOptions="Center" VerticalOptions="Center" 
                       HeightRequest="50" WidthRequest="150" Grid.Column="1"
                       HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
                <Label TextColor="Black" Text="IJKL" HorizontalOptions="Center" VerticalOptions="Center" 
                       HeightRequest="50" WidthRequest="150" Grid.Column="2"
                       HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
            </Grid>
        </ScrollView>
        <Button Text="Zoom Half" HorizontalOptions="Center" VerticalOptions="Center"
                Clicked="ZoomHalf_Clicked" TextColor="Black"/>
        <Button Text="Zoom Normal" HorizontalOptions="Center" VerticalOptions="Center"
                Clicked="ZoomNormal_Clicked" TextColor="Black"/>
    </StackLayout>
</ContentPage>

Main.Xaml.cs

        void ZoomHalf_Clicked(object sender, System.EventArgs e)
        {
            myGrid.Scale = 0.5;
        }
        void ZoomNormal_Clicked(object sender, System.EventArgs e)
        {
            myGrid.Scale = 1;
        }

Viewing all articles
Browse latest Browse all 77050

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>