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

【问题标题】：How to create Apple's design like toggle button in Windows & Android apps using Xamarin Forms?如何使用 Xamarin Forms 在 Windows 和 Android 应用程序中创建类似切换按钮的 Apple 设计？
【发布时间】：2017-03-15 12:08:43
【问题描述】：

我想使用Xamarin Forms在面向 Android、iOS 和 Windows 平台的移动应用中创建一个类似于 iOS 的切换开关的切换开关。

虽然 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 Phone 中的点击颜色变化。

那么，如何使用 Xamarin 创建一个类似于 iOS 的切换开关的切换开关，该切换开关适用于 Android、Windows 和 iOS 应用程序。

抱歉，无法上传截图/图片。

【问题讨论】：

标签： xamarin xamarin.forms

【解决方案1】：

您需要使用适用于 Android 和任何 Windows 风格的 CustomRenderer[s]，但我强烈建议不要使用这种做法，以使其他平台看起来像其他平台......我已经看到项目陷入死胡同，试图这样做。这些是不同的平台，Xamarin.Forms 的目的不是让所有平台看起来都一样。

但是，如果您无法与您的管理层和/或设计师交谈，这里的链接可以帮助您开始：

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

【讨论】：