How to make the Signature pad stretch all the way down to the bottom of the screen

Hi,

I am targeting my iOS application for various device sizes (4.7" and 5.5"). I am facing some issues regarding the lay out of the controls (text box , buttons and Signature Pad).

When using only the signature pad with buttons in a single grid. the signature pad fits to the end of the screen.

But when i add a stacklayout to include additional controls above the signature pad, I find that the signature pad does not stretch to the end of the screen. The blank space is indicated by the red arrow.

Can anyone assist in helping to make the signature pad stretch to the end of the screen so that it fits any device sizes (4.7" and 5.5"). XAML Code is added below.

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:forms="clr-namespace:SignaturePad.Forms;assembly=SignaturePad.Forms" xmlns:local="clr-namespace:SignaturePadClient" x:Class="SignaturePadClient.Screen1"> <ContentPage.Padding> <OnPlatform x:TypeArguments="Thickness" iOS="5, 20, 5, 10" Android="8, 8, 8, 8" WinPhone="5, 0, 5, 0" /> </ContentPage.Padding> <ContentPage.Content> <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="2*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Button x:Name="btn1" Grid.Row="0" Grid.Column="0" FontAttributes="Bold" Text="Button 1" FontSize="14" HeightRequest = "40" VerticalOptions="Center" TextColor="White" /> <Button x:Name="btn2" Grid.Row="0" Grid.Column="2" FontAttributes="Bold" Text="Button 2" FontSize="14" HeightRequest = "40" VerticalOptions="Center" TextColor="White"/> <Label x:Name ="lblCaption" Text="Screen" FontAttributes="Bold" Grid.Column="1" Grid.Row="0" FontSize="13" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" TextColor="#FF6A00" /> </Grid> <Grid RowSpacing="12" ColumnSpacing="6"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="2*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Label x:Name ="lbl1" FontAttributes="Bold" Text="Label 1" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" /> <local:CustomEntry x:Name="txt1" Text="" Grid.Column="1" Grid.Row="1" HorizontalTextAlignment="Start" /> <Label x:Name ="lbl2" Text="Label 2" FontAttributes="Bold" Grid.Column="0" Grid.Row="2" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" /> <local:CustomEntry x:Name="txt2" Text="" Grid.Column="1" Grid.Row="2" HorizontalTextAlignment="Start" /> <Label x:Name ="lbl3" Text="Label 3" FontAttributes="Bold" Grid.Column="0" Grid.Row="3" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" /> <local:CustomEntry x:Name="txt3" Text="" Grid.Column="1" Grid.Row="3" HorizontalTextAlignment="Start" /> <Label x:Name ="lbl4" Text="Label 4" FontAttributes="Bold" Grid.Column="0" Grid.Row="4" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" /> <local:CustomEntry x:Name="txt4" Placeholder="Select" Grid.Column="1" Grid.Row="4" HorizontalTextAlignment="Start"/> <Label x:Name ="lbl5" Text="Label 5" FontAttributes="Bold" Grid.Column="0" Grid.Row="5" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" /> <local:CustomEntry x:Name="txt5" Text="" Grid.Column="1" Grid.Row="5" HorizontalTextAlignment="Start" Keyboard="Keyboard.Numeric" /> <Label x:Name ="lbl6" Text="Label 6" FontAttributes="Bold" Grid.Column="0" Grid.Row="6" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" /> <local:CustomEntry x:Name="txt6" Text="" Grid.Column="1" Grid.Row="6" HorizontalTextAlignment="Start" /> </Grid> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Button x:Name="btn3" Text="Button 3" Grid.Column="0" Grid.Row="0" /> <Button x:Name="btn4" Text="Button 4" Grid.Column="1" Grid.Row="0" /> <StackLayout BackgroundColor="Black" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="0" Padding="2,2,2,2" Orientation="Vertical"> <forms:SignaturePadView x:Name="signature" StrokeColor="Black" StrokeWidth="5" CaptionText="" VerticalOptions="FillAndExpand" SignatureLineColor="Black" HorizontalOptions="FillAndExpand" BackgroundColor="White" ClearText="" ClearTextColor="White" PromptText="X: Sign here" PromptTextColor="Black" /> </StackLayout> </Grid> </StackLayout> </ContentPage.Content> </ContentPage>

Thanks,

Rajesh.

Tagged:

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    You should set the signature view's parent Grid's VerticalOptions to FillAndExpand. Also help you modify your code format:

    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" iOS="5, 20, 5, 10" Android="8, 8, 8, 8" WinPhone="5, 0, 5, 0" />
    </ContentPage.Padding>
    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="2*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Button x:Name="btn1" Grid.Row="0" Grid.Column="0" FontAttributes="Bold" Text="Button 1" FontSize="14" HeightRequest = "40" VerticalOptions="Center" TextColor="White" />
            <Button x:Name="btn2" Grid.Row="0" Grid.Column="2" FontAttributes="Bold" Text="Button 2" FontSize="14" HeightRequest = "40" VerticalOptions="Center" TextColor="White"/>
            <Label x:Name ="lblCaption"  Text="Screen" FontAttributes="Bold" Grid.Column="1" Grid.Row="0" FontSize="13" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" TextColor="#FF6A00" />
        </Grid>
        <Grid RowSpacing="12" ColumnSpacing="6">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Label x:Name ="lbl1" FontAttributes="Bold" Text="Label 1" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" HorizontalTextAlignment="Start" VerticalTextAlignment="Center"  />
            <local:CustomEntry x:Name="txt1" Text="" Grid.Column="1" Grid.Row="1"   HorizontalTextAlignment="Start" />
            <Label x:Name ="lbl2"  Text="Label 2" FontAttributes="Bold"  Grid.Column="0" Grid.Row="2" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" />
            <local:CustomEntry x:Name="txt2" Text="" Grid.Column="1" Grid.Row="2"   HorizontalTextAlignment="Start" />
            <Label x:Name ="lbl3"  Text="Label 3" FontAttributes="Bold" Grid.Column="0" Grid.Row="3" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" />
            <local:CustomEntry x:Name="txt3" Text="" Grid.Column="1" Grid.Row="3"   HorizontalTextAlignment="Start" />
            <Label x:Name ="lbl4" Text="Label 4" FontAttributes="Bold" Grid.Column="0" Grid.Row="4" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" />
            <local:CustomEntry x:Name="txt4" Placeholder="Select" Grid.Column="1" Grid.Row="4"  HorizontalTextAlignment="Start"/>
            <Label x:Name ="lbl5" Text="Label 5"  FontAttributes="Bold" Grid.Column="0" Grid.Row="5" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" />
            <local:CustomEntry x:Name="txt5"  Text="" Grid.Column="1" Grid.Row="5"   HorizontalTextAlignment="Start" Keyboard="Keyboard.Numeric" />
            <Label x:Name ="lbl6" Text="Label 6" FontAttributes="Bold" Grid.Column="0" Grid.Row="6" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" />
            <local:CustomEntry x:Name="txt6" Text="" Grid.Column="1" Grid.Row="6"  HorizontalTextAlignment="Start" />
        </Grid>
        <Grid VerticalOptions="FillAndExpand">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Button x:Name="btn3" Text="Button 3" Grid.Column="0" Grid.Row="0" />
            <Button x:Name="btn4" Text="Button 4" Grid.Column="1" Grid.Row="0" />
            <StackLayout BackgroundColor="Black" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="0" Padding="2,2,2,2" Orientation="Vertical">
                <forms:SignaturePadView x:Name="signature" StrokeColor="Black" StrokeWidth="5" CaptionText="" VerticalOptions="FillAndExpand"                                     SignatureLineColor="Black" HorizontalOptions="FillAndExpand" BackgroundColor="White"                                     ClearText="" ClearTextColor="White" PromptText="X: Sign here" PromptTextColor="Black" />
            </StackLayout>
        </Grid>
    </StackLayout>
    
Sign In or Register to comment.