【Xamarin】角丸ボタンを作成する

↓こういうボタンを作成します。

環境

• macOS Majave 10.14.6
• Visual Studio for Mac 8.3.8
• Xamarin.Forms 4.2.0.848062

手順

Xamarinって実はXaml上でcssが使えるんです。

ご存知でしたか？私は知りませんでした。

なので下記のように書くだけで、

<?xml version="1.0" encoding="utf-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:MyApp"
    mc:Ignorable="d"
    x:Class="MyApp.Pages.MainPage">
    <!-- 下記のようにCSSを書きます -->
    <ContentPage.Resources>
        <StyleSheet>
            <![CDATA[
                .round-button {
                    border-radius:30;
                }
            ]]>
        </StyleSheet>
    </ContentPage.Resources>
    <!-- CSSここまで -->
    <StackLayout Spacing="0">
        <!-- 下記のようにStyleClass/StyleIdで要素にclass/idを指定します -->
        <Button Text="ログイン" HorizontalOptions="Center" BackgroundColor="red" TextColor="White" WidthRequest="320" HeightRequest="60" FontSize="20" StyleClass="round-button"></Button>
    </StackLayout>
</ContentPage>

角丸が実現できます。

そのほか、利用できるCSSは下記を参照ください。

docs.microsoft.com