2016-11-02 2 views
0

Android、iOS & Windowsプラットフォームをターゲットとするモバイルアプリで、iOSのトグルスイッチのように見えるトグルスイッチを作成したいと考えています(Xamarin Formsを使用)。Xamarinフォームを使用して、Windows&AndroidアプリでAppleのデザインをトグルボタンのように作成するにはどうすればよいですか?

Xamarin.Formsはネイティブな外観のアプリケーションを構築するために使用されますが、3つのプラットフォームすべてで同じように見えるトグルスイッチを作成する必要があります。

私たちは、2つのボタン、すなわち、1つの大きなボタンの上に1つの小さな丸いボタンを使用して、同様の見た目のトグルスイッチを作成しようとしました。

XAML:

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

    <ContentView Grid.Row="0" Grid.Column="1" x:Name="ToggleThisButton"> 
    <Button BorderWidth="0" BorderRadius="32" Button.BackgroundColor="Red" /> 
    </ContentView> 

    <ContentView Grid.Row="0" Grid.Column="1" x:Name="BackgroundButton"> 
    <Button BorderWidth="0" BorderRadius="32" /> 
    </ContentView> 

</Grid> 

C番号:

// Appearance using padding 
protected override void OnAppearing() 
    { 
     base.OnAppearing(); 

     if (Device.Idiom == TargetIdiom.Phone) 
     { 
      ToggleThisButton.Padding = new Thickness(50, 20, 100, 250); 
      BackgroundButton.Padding = new Thickness(50, 20, 20, 250); 
     } 

     if (Device.Idiom == TargetIdiom.Tablet) 
     { 
      ToggleThisButton.Padding = new Thickness(50, 30, 270, 275); 
      BackgroundButton.Padding = new Thickness(50, 30, 50, 275); 
     } 
    } 

//Switch toggle animation using TranslateTo function: 

if (Device.Idiom == TargetIdiom.Tablet) 
{ 
ToggleThisButton.TranslateTo(220, 0, 200, Easing.Linear); 
} 
if (Device.Idiom == TargetIdiom.Phone) 
{ 
ToggleThisButton.TranslateTo(50, 0, 200, Easing.Linear); 
} 

問題: 我々はトグルスイッチを作成するためのボタンを使用しているように、我々はマウスホバー色の変化のようなボタンの不要な動作を得ている、ボタンを押し効果は、Windowsのタブレット& Windowsで色の変化をオンクリック電話。

Androidで動作するiOSのトグルスイッチ、Xamarinを使用しているWindows & iOSアプリに似たトグルスイッチを作成するにはどうすればよいですか。

申し訳ありませんが、スクリーンショット/画像をアップロードすることはできません。

答えて

2

Android用とWindows用のCustomRenderer [s]を使用する必要がありますが、このプラクティスを他のプラットフォームのように見せることを強くおすすめします...私は、そうするために。それらは異なるプラットフォームであり、Xamarin.Formsの意図はすべてのプラットフォームを似ていると見なすことではありません。

しかし、もしあなたがここにあなたの管理および/またはデザイナーに話すことができない場合は、あなたが始めるのに役立ちますリンクは以下のとおりです。

https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/

関連する問題