CODEWITHSUNDEEP
xamlxamarin.forms
David Shochet
David Shochet

Reputation: 5375

Control is pushed from the screen

I have a xamarin.forms app. A screen has many controls, and I use ScrollView to let the user ability to see all the controls. I have a button outside of the ScrollView, because I want it to be easily accessible without scrolling down the screen. But some of our customers have vision issues, so they enlarge the text size on their phones. Then the button disappears from the screen. I wonder what I can do to fix this... I guess I would agree with the scrolling only for those with the large text size, if there is no better solution. Here is my code:

<ContentPage.Content>
    <StackLayout>
        <ScrollView>
            <StackLayout Margin="30">
        ... Many controls are here
            </StackLayout>
        </ScrollView>

        <StackLayout 
            x:Name="Validation" 
            HeightRequest="150"
            IsVisible="{Binding ValidationResult.IsValid, Converter={converters:InverseBoolConverter}}">
            <Label Text="Please fix the following errors:" TextColor="Red" Margin="0,0,0,10" />
            <Label Text="{Binding Errors}" TextColor="Red" />
        </StackLayout>

        <Button 
            Text="Calculate"
            Command="{Binding CalculateCommand}"
            Style="{StaticResource ButtonStyle}"
            HorizontalOptions="CenterAndExpand" />

    </StackLayout>
</ContentPage.Content>

ADDED:

I did not mention that the content of the page is within a ControlTemplate:

            <ControlTemplate x:Key="MainPageTemplate">
            <Grid>
                <Label Text="{Binding ErrorMessage}" TextColor="Red" />
                <ContentPresenter Margin="10, 0, 10, 120" />
                <StackLayout VerticalOptions="End" BackgroundColor="LightGray" Padding="20" >
                    <Label Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='© {0:yyyy} Company Name, Inc.'}" />
                    <Label Text="All trademarks shown are the intellectual properties of their respective owners." />
                </StackLayout>
            </Grid>
        </ControlTemplate>

Upvotes: 0

Views: 134

Answers (1)

Lucas Zhang
Lucas Zhang

Reputation: 18861

Agree with @Jason , StackLayout will not fit the size of its child Elements . So you could use Grid with three Rows

<Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="0.9*"  />
            <RowDefinition Height="150"  />
            <RowDefinition Height="0.1*"  />

        </Grid.RowDefinitions>

        <ScrollView Grid.Row="0" Orientation="Both">
            <StackLayout Margin="30" BackgroundColor="LightBlue" HeightRequest="300">
              
            </StackLayout>
        </ScrollView>

        <Grid HeightRequest = "150" Grid.Row="1">

          <Grid.RowDefinitions>

            <RowDefinition Height="Auto"  />
            <RowDefinition Height="Auto"  />
        

          </Grid.RowDefinitions>

            <Label  Grid.Row="0"  Text="Please fix the following errors:" TextColor="Red" Margin="0,0,0,10" />
            <Label  Grid.Row="1" Text="{Binding Errors}" TextColor="Red" />
        </Grid>

        <Button 
            Grid.Row="2"
            Text="Calculate"
           
            HorizontalOptions="CenterAndExpand" />


</Grid>

Upvotes: 1

Related Questions