如何使用Xamarin Forms在Windows和Android应用程序中创建Apple的设计，如切换按钮？

我想创建一个切换开关，应该看起来像iOS的切换开关中的一个移动应用程序，目标是Android，iOS & Windows平台使用Xamarin Forms。如何使用Xamarin Forms在Windows和Android应用程序中创建Apple的设计，如切换按钮？

尽管Xamarin.Forms被用来构建原生的应用程序，但我们需要创建一个在所有三个平台上都应该看起来相同的切换开关。

我们尝试使用两个按钮创建一个类似的外观切换开关，即在一个大按钮上方使用一个小圆按钮。

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颜色变化电话。

那么，如何创建一个切换开关，看起来类似于iOS的切换开关，可以在Android，Windows & iOS应用中使用Xamarin。

对不起，无法上传截图/图片。

来源

2016-11-02 jaczjill

您需要为Android和任何Windows风格使用CustomRenderer [s]，但我强烈建议不要这种做法，以使其他平台看起来像别的东西......我已经看到项目下降到死胡同尝试这样做。这些是Xamarin的不同平台和意图.Forms并不是让所有平台看起来相似。

但如果你不能跟你的管理和/或设计师这里是链接，这将有助于你开始：

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

来源

2016-11-02 09:08:27 moljac

如何使用Xamarin Forms在Windows和Android应用程序中创建Apple的设计，如切换按钮？

回答

相关问题