Xamarin.Forms:从 Iconize 创建一个 Rounded/Circle 按钮
Xamarin.Forms: create a Rounded/Circle Button from Iconize
我尝试创建一个可以显示 字体图标 的 Rounded/Circle 按钮。因为我已经在我的项目中使用 Iconize,所以我尝试从现有的 IconButton
.
创建 Rounded/Circle 按钮
我首先尝试了这个,通过固定 BorderRadiusas
HeightRequest
/WidthRequest
的一半值:
<iconize:IconButton HeightRequest="40" WidthRequest="40"
BorderRadius="20"
Text="fa-500px" TextColor="Red" FontSize="20"
BackgroundColor="Orange" BorderColor="Red"
BorderWidth="2"
VerticalOptions="Start" HorizontalOptions="Center">
</iconize:IconButton>
默认渲染在 UWP 上按预期工作,但 "clicked" 渲染效果不佳,因为出现了一个矩形。
但是在 Android 上,按钮始终处于 "default" 模式:没有边框,没有背景,...
所以我添加了一个 FlatButton 控件,以及一个 Renderer 用于 Android:
public class FlatButton : IconButton
{
}
[assembly: ExportRenderer(typeof(FlatButton), typeof(FlatButtonRenderer))]
namespace Iconize.Sample.Droid.Renderers
{
public class FlatButtonRenderer : ButtonRenderer
{
protected override void OnDraw(Android.Graphics.Canvas canvas)
{
base.OnDraw(canvas);
}
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
}
}
}
我是这样使用的:
<controls:FlatButton HeightRequest="40" WidthRequest="40"
BorderRadius="20"
Text="fa-500px" TextColor="Red" FontSize="20"
BackgroundColor="Orange" BorderColor="Red"
BorderWidth="2"
VerticalOptions="Start" HorizontalOptions="Center">
</controls:FlatButton>
这次在Android上圆角渲染没问题,但是字体图标"display"丢了
这是截图:
有没有办法保持圆形渲染器和图标显示?
第二次,有没有办法解决单击按钮时 UWP 上的渲染问题?
我也看了其他插件:
- Flexbutton: 似乎工作正常,但没有 UWP 支持
- ButtonCirclePlugin:我无法在我的解决方案中使用它,而且我无法构建提供的示例...
您还有其他建议吗?
我终于找到了一个临时解决方案,方法是像这样重新定义 Iconize IconButtonRenderer
:
- CircleIconButton:我创建了一个继承自
IconButton
的控件
- CircleIconButtonRenderer:我已经为 Android 复制了
IconButtonRenderer
。我不得不删除第一个调试测试,以及预期的构造函数新格式:public CircleIconButtonRenderer(Context context) : base(context)
。所以这个 class 显示为 "obsolete".
- MainPage:我已经在页面中实现了新控件,就像我们为
IconButton
. 所做的一样
但可能有更好的方法,因为预期的构造函数没有实现...
我尝试创建一个可以显示 字体图标 的 Rounded/Circle 按钮。因为我已经在我的项目中使用 Iconize,所以我尝试从现有的 IconButton
.
我首先尝试了这个,通过固定 BorderRadiusas
HeightRequest
/WidthRequest
的一半值:
<iconize:IconButton HeightRequest="40" WidthRequest="40"
BorderRadius="20"
Text="fa-500px" TextColor="Red" FontSize="20"
BackgroundColor="Orange" BorderColor="Red"
BorderWidth="2"
VerticalOptions="Start" HorizontalOptions="Center">
</iconize:IconButton>
默认渲染在 UWP 上按预期工作,但 "clicked" 渲染效果不佳,因为出现了一个矩形。 但是在 Android 上,按钮始终处于 "default" 模式:没有边框,没有背景,...
所以我添加了一个 FlatButton 控件,以及一个 Renderer 用于 Android:
public class FlatButton : IconButton
{
}
[assembly: ExportRenderer(typeof(FlatButton), typeof(FlatButtonRenderer))]
namespace Iconize.Sample.Droid.Renderers
{
public class FlatButtonRenderer : ButtonRenderer
{
protected override void OnDraw(Android.Graphics.Canvas canvas)
{
base.OnDraw(canvas);
}
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
}
}
}
我是这样使用的:
<controls:FlatButton HeightRequest="40" WidthRequest="40"
BorderRadius="20"
Text="fa-500px" TextColor="Red" FontSize="20"
BackgroundColor="Orange" BorderColor="Red"
BorderWidth="2"
VerticalOptions="Start" HorizontalOptions="Center">
</controls:FlatButton>
这次在Android上圆角渲染没问题,但是字体图标"display"丢了
这是截图:
有没有办法保持圆形渲染器和图标显示? 第二次,有没有办法解决单击按钮时 UWP 上的渲染问题?
我也看了其他插件:
- Flexbutton: 似乎工作正常,但没有 UWP 支持
- ButtonCirclePlugin:我无法在我的解决方案中使用它,而且我无法构建提供的示例...
您还有其他建议吗?
我终于找到了一个临时解决方案,方法是像这样重新定义 Iconize IconButtonRenderer
:
- CircleIconButton:我创建了一个继承自
IconButton
的控件
- CircleIconButtonRenderer:我已经为 Android 复制了
IconButtonRenderer
。我不得不删除第一个调试测试,以及预期的构造函数新格式:public CircleIconButtonRenderer(Context context) : base(context)
。所以这个 class 显示为 "obsolete". - MainPage:我已经在页面中实现了新控件,就像我们为
IconButton
. 所做的一样
但可能有更好的方法,因为预期的构造函数没有实现...