【続】Xamarin.Formsでぺこぺこ凹むアイコンボタンを作った

先日アイコンボタンを作ったと書きましたが、色々更新しました。
shunsukekawai.hatenablog.com

f:id:ShunsukeKawai:20170110224311g:plain

追加内容

ラベル追加（DescriptionText）
ラベル位置プロパティ設定（DescriptionPosition）
ラベルサイズプロパティ設定（DescriptionSize）
ラベルカラープロパティ設定（DescriptionColor）
アイコン高さプロパティ設定（IconHeight）

使い方

なんか設定する項目が多くなってヤダけど、しょうがない。
ラベルが必要なければ設定しなくて OK です。

<controls:IconButton
    DescriptionColor="#636161"
    DescriptionPosition="Bottom"
    DescriptionSize="24"
    DescriptionText="削除"
    HeightRequest="120"
    HorizontalOptions="Center"
    IconHeight="70"
    IconMargin="10"
    IconSource="{Binding Source=IconButtonSample.Images.Trash.png, Converter={StaticResource ImageSourceConverter}}"
    VerticalOptions="Center">
    <controls:IconButton.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding Path=DeleteCommand}" />
    </controls:IconButton.GestureRecognizers>
</controls:IconButton>

めんどくさかったところ

位置を設定する

横着してボタン全体を囲う2行2列の Grid を追加して位置プロパティ(Enum)によってボタンとラベルの位置を設定しましたが、
Xamarin.Forms なのか UIView なのかわかりませんが、Grid の Definition が Auto かつコントロールが何もなくても微妙にスペースが空いちゃうので、RowSpacing と ColumnSpacing を 0 に設定しています。

<?xml version="1.0" encoding="utf-8" ?>
<ContentView
    x:Class="IconButtonSample.Controls.IconButton"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Grid
        x:Name="grdIconButton"
        ColumnSpacing="0"
        HorizontalOptions="CenterAndExpand"
        RowSpacing="0"
        VerticalOptions="CenterAndExpand">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Image
            x:Name="imgIcon"
            Aspect="AspectFit"
            BindingContextChanged="imgIcon_BindingContextChanged" />
        <Label
            x:Name="lblDescription"
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand" />
    </Grid>
</ContentView>

private void setPosition(DescriptionPosition position)
{
    switch (position)
    {
        case DescriptionPosition.None:
            imgIcon.SetValue(Grid.RowProperty, 0);
            lblDescription.SetValue(Grid.RowProperty, 0);
            imgIcon.SetValue(Grid.ColumnProperty, 0);
            lblDescription.SetValue(Grid.ColumnProperty, 0);
            lblDescription.IsVisible = false;
            break;
        case DescriptionPosition.Left:
            imgIcon.SetValue(Grid.RowProperty, 0);
            lblDescription.SetValue(Grid.RowProperty, 0);
            imgIcon.SetValue(Grid.ColumnProperty, 1);
            lblDescription.SetValue(Grid.ColumnProperty, 0);
            break;
        case DescriptionPosition.Top:
            imgIcon.SetValue(Grid.RowProperty, 1);
            lblDescription.SetValue(Grid.RowProperty, 0);
            imgIcon.SetValue(Grid.ColumnProperty, 0);
            lblDescription.SetValue(Grid.ColumnProperty, 0);
            break;
        case DescriptionPosition.Right:
            imgIcon.SetValue(Grid.RowProperty, 0);
            lblDescription.SetValue(Grid.RowProperty, 0);
            imgIcon.SetValue(Grid.ColumnProperty, 0);
            lblDescription.SetValue(Grid.ColumnProperty, 1);
            break;
        case DescriptionPosition.Bottom:
            imgIcon.SetValue(Grid.RowProperty, 0);
            lblDescription.SetValue(Grid.RowProperty, 1);
            imgIcon.SetValue(Grid.ColumnProperty, 0);
            lblDescription.SetValue(Grid.ColumnProperty, 0);
            break;
        default:
            break;
    }
}