Button Circle works fine on APi 27 but not the same as api 22

HI ,
I'm using Plugins.Forms.ButtonCircle to create a Pin Page , after creating the view , it was working fine on api 27 , but when i grabbed my friend 5.1 android phone , it showed me something different and I can't understand why .

With pictures you can see the difference .
ps: the 4 buttons on top are :

IsEnabled="False"


here is My code

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="buttonStyle" TargetType="Button">
                <Setter Property="HeightRequest" Value="50" />
                <Setter Property="WidthRequest" Value="50" />
                <Setter Property="BorderRadius" Value="50" />
                <Setter Property="BorderColor" Value="White" />

                <Setter Property="BackgroundColor" Value="#3897F0" />
                <Setter Property="TextColor" Value="White" />
                <Setter Property="HorizontalOptions" Value="Center" />
                <Setter Property="FontSize" Value="20" />
            </Style>


            <Style x:Key="buttonStylecode" TargetType="Button">
                <Setter Property="HeightRequest" Value="50" />
                <Setter Property="WidthRequest" Value="50" />
                <Setter Property="BorderRadius" Value="50" />
                <Setter Property="BorderColor" Value="White" />

                <Setter Property="BackgroundColor" Value="Gray" />
                <Setter Property="TextColor" Value="White" />
                <Setter Property="HorizontalOptions" Value="Center" />
                <Setter Property="FontSize" Value="20" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>



    <Grid Margin="40">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="3*"/>
            <RowDefinition Height="1*"/>

        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Label Text="Enter your Pin" Grid.Row="0" Grid.ColumnSpan="3" HorizontalOptions="CenterAndExpand"
               Font="20" TextColor="Black"  FontAttributes="Bold"></Label>

        <!--<Label Text="Data here" TextColor="Black" Grid.Row="1" Grid.ColumnSpan="3" BackgroundColor="Red"></Label>-->

        <Grid Grid.Row="1" Grid.ColumnSpan="3" ColumnSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>



            <local:CircleButton  Text="" Grid.Row="0" Grid.Column="1" BorderThickness="3" Style="{StaticResource buttonStylecode}" IsEnabled="False"/>
            <local:CircleButton   Text="" Grid.Row="0" Grid.Column="2" BorderThickness="3" Style="{StaticResource buttonStylecode}" IsEnabled="False"/>
            <local:CircleButton  Text="" Grid.Row="0" Grid.Column="3" BorderThickness="3" Style="{StaticResource buttonStylecode}" IsEnabled="False"/>
            <local:CircleButton  Text="" Grid.Row="0" Grid.Column="4" BorderThickness="3" Style="{StaticResource buttonStylecode}" IsEnabled="False"/>
        </Grid>




        <Grid Grid.Row="2" Grid.RowSpan="2"  Grid.ColumnSpan="3" RowSpacing="0" >
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>

            <local:CircleButton 
                    Text="1"
                    Grid.Row="0" Grid.Column="1"
                    BorderThickness="3" Style="{StaticResource buttonStyle}">
            </local:CircleButton>

            <!--<Button Grid.Row="0" Grid.Column="0" BackgroundColor="Accent" Text="1"></Button>-->

                    <local:CircleButton   Text="2" Grid.Row="0" Grid.Column="2" BorderThickness="3" Style="{StaticResource buttonStyle}" />


                    <!--<Button></Button>-->
            <local:CircleButton  Grid.Row="0" Grid.Column="3"  Text="3" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>


            <local:CircleButton  Grid.Row="1" Grid.Column="1"  Text="4" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
            <local:CircleButton  Grid.Row="1" Grid.Column="2"  Text="5" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
            <local:CircleButton  Grid.Row="1" Grid.Column="3"  Text="6" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>

            <local:CircleButton Grid.Row="2" Grid.Column="1"  Text="7" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
            <local:CircleButton  Grid.Row="2" Grid.Column="2"  Text="8" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
            <local:CircleButton  Grid.Row="2" Grid.Column="3"  Text="9" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>

            <local:CircleButton  Grid.Row="3" Grid.Column="1" Text="del" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
            <local:CircleButton  Grid.Row="3" Grid.Column="2" Text="0" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
            <local:CircleButton  Grid.Row="3" Grid.Column="3"  Text="Ok" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>




        </Grid>
        <Label Text="Cancel" TextColor="Black" Grid.Row="4" Margin="20" Grid.ColumnSpan="3" HorizontalOptions="Center" VerticalOptions="End"></Label>

    </Grid>

Best Answer

  • Achraf_benalayaAchraf_benalaya US ✭✭
    edited October 2018 Accepted Answer

    I fixed this by adding StackLayout

        <ContentPage.Resources>
            <ResourceDictionary>
                <Style x:Key="buttonStyle" TargetType="Button">
                    <Setter Property="HeightRequest" Value="50" />
                    <Setter Property="WidthRequest" Value="50" />
                    <Setter Property="BorderRadius" Value="50" />
                    <Setter Property="BorderColor" Value="White" />
    
                    <Setter Property="BackgroundColor" Value="#3897F0" />
                    <Setter Property="TextColor" Value="White" />
                    <Setter Property="HorizontalOptions" Value="Center" />
                    <Setter Property="FontSize" Value="20" />
                </Style>
    
    
                <Style x:Key="buttonStylecode" TargetType="Button">
                    <Setter Property="HeightRequest" Value="50" />
                    <Setter Property="WidthRequest" Value="50" />
                    <Setter Property="BorderRadius" Value="50" />
                    <Setter Property="BorderColor" Value="White" />
    
                    <Setter Property="BackgroundColor" Value="Gray" />
                    <Setter Property="TextColor" Value="White" />
                    <Setter Property="HorizontalOptions" Value="Center" />
                    <Setter Property="FontSize" Value="20" />
                </Style>
            </ResourceDictionary>
        </ContentPage.Resources>
    
    
    
        <Grid Margin="40">
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="3*"/>
                <RowDefinition Height="1*"/>
    
    
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
    
            <Label Text="Enter your Pin" Grid.Row="0" Grid.ColumnSpan="3" HorizontalOptions="CenterAndExpand"
                   Font="20" TextColor="Black"  FontAttributes="Bold"></Label>
    
    
    
            <Grid Grid.Row="1" Grid.ColumnSpan="3" ColumnSpacing="0" RowSpacing="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
    
    
    
                <local:CircleButton  Text="" Grid.Row="0" Grid.Column="1" BorderThickness="3" Style="{StaticResource buttonStylecode}" IsEnabled="False"/>
                <local:CircleButton   Text="" Grid.Row="0" Grid.Column="2" BorderThickness="3" Style="{StaticResource buttonStylecode}" IsEnabled="False"/>
                <local:CircleButton  Text="" Grid.Row="0" Grid.Column="3" BorderThickness="3" Style="{StaticResource buttonStylecode}" IsEnabled="False"/>
                <local:CircleButton  Text="" Grid.Row="0" Grid.Column="4" BorderThickness="3" Style="{StaticResource buttonStylecode}" IsEnabled="False"/>
            </Grid>
    
    
    
    
            <Grid Grid.Row="2" Grid.RowSpan="2"  Grid.ColumnSpan="3" RowSpacing="0" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
    
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
    
                </Grid.ColumnDefinitions>
    
    
                <!--123-->
                <StackLayout  Grid.Row="0" Grid.Column="1">
                    <local:CircleButton  Text="1"  BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
                <StackLayout Grid.Row="0" Grid.Column="2">
                <local:CircleButton   Text="2"  BorderThickness="3" Style="{StaticResource buttonStyle}" />
                </StackLayout>
    
                <StackLayout Grid.Row="0" Grid.Column="3">
                <local:CircleButton    Text="3" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
    
                <!--456-->
                <StackLayout Grid.Row="1" Grid.Column="1">
                <local:CircleButton    Text="4" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
                <StackLayout Grid.Row="1" Grid.Column="2">
                    <local:CircleButton    Text="5" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
    
    
                <StackLayout Grid.Row="1" Grid.Column="3">
    
                <local:CircleButton   Text="6" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
                <!--789-->
                <StackLayout Grid.Row="2" Grid.Column="1">
                <local:CircleButton   Text="7" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
    
                <StackLayout Grid.Row="2" Grid.Column="2">
                        <local:CircleButton    Text="8" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
    
                    <StackLayout Grid.Row="2" Grid.Column="3" >
                <local:CircleButton   Text="9" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
    
    
                <!--Del0Ok-->
    
    
                <StackLayout Grid.Row="3" Grid.Column="1">
                <local:CircleButton   Text="del" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
                <StackLayout Grid.Row="3" Grid.Column="2">
                <local:CircleButton   Text="0" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
                <StackLayout  Grid.Row="3" Grid.Column="3" >
                    <local:CircleButton  Text="Ok" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
    
    
    
            </Grid>
            <Label Text="Cancel" TextColor="Black" Grid.Row="5" Margin="20" Grid.ColumnSpan="3" HorizontalOptions="Center" VerticalOptions="End" x:Name="CacelB">
    
            <Label.GestureRecognizers>
                <TapGestureRecognizer
                Command="{Binding TapCommand}" />
            </Label.GestureRecognizers>
            </Label>
    
        </Grid>
    


Answers

  • Achraf_benalayaAchraf_benalaya USMember ✭✭
    edited October 2018 Accepted Answer

    I fixed this by adding StackLayout

        <ContentPage.Resources>
            <ResourceDictionary>
                <Style x:Key="buttonStyle" TargetType="Button">
                    <Setter Property="HeightRequest" Value="50" />
                    <Setter Property="WidthRequest" Value="50" />
                    <Setter Property="BorderRadius" Value="50" />
                    <Setter Property="BorderColor" Value="White" />
    
                    <Setter Property="BackgroundColor" Value="#3897F0" />
                    <Setter Property="TextColor" Value="White" />
                    <Setter Property="HorizontalOptions" Value="Center" />
                    <Setter Property="FontSize" Value="20" />
                </Style>
    
    
                <Style x:Key="buttonStylecode" TargetType="Button">
                    <Setter Property="HeightRequest" Value="50" />
                    <Setter Property="WidthRequest" Value="50" />
                    <Setter Property="BorderRadius" Value="50" />
                    <Setter Property="BorderColor" Value="White" />
    
                    <Setter Property="BackgroundColor" Value="Gray" />
                    <Setter Property="TextColor" Value="White" />
                    <Setter Property="HorizontalOptions" Value="Center" />
                    <Setter Property="FontSize" Value="20" />
                </Style>
            </ResourceDictionary>
        </ContentPage.Resources>
    
    
    
        <Grid Margin="40">
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="3*"/>
                <RowDefinition Height="1*"/>
    
    
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
    
            <Label Text="Enter your Pin" Grid.Row="0" Grid.ColumnSpan="3" HorizontalOptions="CenterAndExpand"
                   Font="20" TextColor="Black"  FontAttributes="Bold"></Label>
    
    
    
            <Grid Grid.Row="1" Grid.ColumnSpan="3" ColumnSpacing="0" RowSpacing="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
    
    
    
                <local:CircleButton  Text="" Grid.Row="0" Grid.Column="1" BorderThickness="3" Style="{StaticResource buttonStylecode}" IsEnabled="False"/>
                <local:CircleButton   Text="" Grid.Row="0" Grid.Column="2" BorderThickness="3" Style="{StaticResource buttonStylecode}" IsEnabled="False"/>
                <local:CircleButton  Text="" Grid.Row="0" Grid.Column="3" BorderThickness="3" Style="{StaticResource buttonStylecode}" IsEnabled="False"/>
                <local:CircleButton  Text="" Grid.Row="0" Grid.Column="4" BorderThickness="3" Style="{StaticResource buttonStylecode}" IsEnabled="False"/>
            </Grid>
    
    
    
    
            <Grid Grid.Row="2" Grid.RowSpan="2"  Grid.ColumnSpan="3" RowSpacing="0" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
    
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
    
                </Grid.ColumnDefinitions>
    
    
                <!--123-->
                <StackLayout  Grid.Row="0" Grid.Column="1">
                    <local:CircleButton  Text="1"  BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
                <StackLayout Grid.Row="0" Grid.Column="2">
                <local:CircleButton   Text="2"  BorderThickness="3" Style="{StaticResource buttonStyle}" />
                </StackLayout>
    
                <StackLayout Grid.Row="0" Grid.Column="3">
                <local:CircleButton    Text="3" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
    
                <!--456-->
                <StackLayout Grid.Row="1" Grid.Column="1">
                <local:CircleButton    Text="4" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
                <StackLayout Grid.Row="1" Grid.Column="2">
                    <local:CircleButton    Text="5" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
    
    
                <StackLayout Grid.Row="1" Grid.Column="3">
    
                <local:CircleButton   Text="6" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
                <!--789-->
                <StackLayout Grid.Row="2" Grid.Column="1">
                <local:CircleButton   Text="7" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
    
                <StackLayout Grid.Row="2" Grid.Column="2">
                        <local:CircleButton    Text="8" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
    
                    <StackLayout Grid.Row="2" Grid.Column="3" >
                <local:CircleButton   Text="9" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
    
    
                <!--Del0Ok-->
    
    
                <StackLayout Grid.Row="3" Grid.Column="1">
                <local:CircleButton   Text="del" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
                <StackLayout Grid.Row="3" Grid.Column="2">
                <local:CircleButton   Text="0" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
                <StackLayout  Grid.Row="3" Grid.Column="3" >
                    <local:CircleButton  Text="Ok" BorderThickness="3" Style="{StaticResource buttonStyle}"></local:CircleButton>
                </StackLayout>
    
    
    
    
            </Grid>
            <Label Text="Cancel" TextColor="Black" Grid.Row="5" Margin="20" Grid.ColumnSpan="3" HorizontalOptions="Center" VerticalOptions="End" x:Name="CacelB">
    
            <Label.GestureRecognizers>
                <TapGestureRecognizer
                Command="{Binding TapCommand}" />
            </Label.GestureRecognizers>
            </Label>
    
        </Grid>
    


Sign In or Register to comment.