0

Ich entwickle eine App für iOS und Android in Xamarin Forms und ich habe die Funktionalität für Google und Facebook Login implementiert. Ich habe das im portablen Projekt gemacht und jetzt versuche ich, die Buttons so zu gestalten, dass sie wie die Schaltfläche "Mit Facebook einloggen" aussehen, aber die einzigen Stilvorlagen, die ich gefunden habe, sind für Android und iOS. Ich möchte die Schaltflächen meiner MainPage.xaml hinzufügen, so dass die Schaltfläche nur dort zur Ansicht hinzugefügt wird, aber in der iOS- und Android-App angezeigt wird.Stil Facebook und Google Login Button in Xamarin.Forms Portable Projekt

Im Moment sieht es so aus, ohne Stil:

<Button x:Name="facebookLoginButton" Text="Facebook Login" Clicked="FacebookLoginButton_Clicked"/> 
<Button x:Name="googleLoginButton" Text="Google Login" Clicked="GoogleLoginButton_Clicked"/> 

Es gibt eine Designrichtlinien für die Facebook here aber ich bin für eine Bibliothek suchen, die es ermöglicht, die Tasten zum MainPage.xaml hinzufügen ohne die Knöpfe selbst zu gestalten.

Kurz gesagt: Ich bin für den folgenden Android Layout-Code-Snippet für Xamarin Forms suchen, die ich in der XAML-Datei

<com.facebook.widget.LoginButton 
     xmlns:fb="http://schemas.android.com/apk/res-auto" 
     android:id="@+id/loginFacebookButton" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     fb:login_text="@string/loginFacebookButton" 
     fb:logout_text="" 
     style="@style/FacebookLoginButton"/> 
+0

Für mich ist es auch in Ordnung wäre, wenn ich die ganze Seite in XAML Stil und die Schaltflächen in XML-Datei des Android-Projekt definieren und diese in die XAML-Datei. Ist das möglich? – papapple

Antwort

0

Sie haben 3 Möglichkeiten, dies zu tun, verwenden kann:

können Sie tun es die xAML-Weg:

<Frame CornerRadius="3" BackgroundColor="#4167b2" HeightRequest="60" Margin="20" Padding="0" HasShadow="false"> 
    <StackLayout Orientation="Horizontal" Padding="5"> 
     <Image HeightRequest="80" Aspect="AspectFill" Source="http://3daystartup.org/wp-content/uploads/2011/07/facebook-logo-png-white-facebook-logo-png-white-facebook-icon-png-32.png" /> 
     <Label Text="Continue with Facebook" VerticalOptions="CenterAndExpand" FontSize="20" FontAttributes="Bold" /> 
     <StackLayout.GestureRecognizers> 
      <TapGestureRecognizer x:Name="FacebookButton" AutomationId="FacebookButton" Command="{Binding FacebookButtonCommand}" /> 
     </StackLayout.GestureRecognizers> 
    </StackLayout> 
</Frame> 

Sie können das Bild Art und Weise tun:

<Image HeightRequest="80" Aspect="AspectFill" Source="https://medyo.github.io/assets/images/facebook_connect_button.png"> 
    <Image.GestureRecognizers> 
     <TapGestureRecognizer x:Name="FacebookImageButton" AutomationId="FacebookImageButton" Command="{Binding FacebookButtonCommand}" /> 
    </Image.GestureRecognizers> 
</Image> 

Beide Methoden haben TapGestureRecognizer, um es so können Sie darauf klicken

+0

Ich mag den ersten Weg und ich werde es benutzen. Vielen Dank! Aber ich frage mich, ob es kein Xamarin Facebook Sdk für die Pcl gibt, die die Schaltfläche enthält. – papapple

+0

@pappple sorry nein, nur auf der Seite Dienste mit Identity Provider – LeRoy