Xamarin.Formsでカードスタイル

6138 ワード
Xamarin Xamarin.Forms Xamarin テキストリンク

iOSでもカードスタイルが使いたい

Androidだと標準だけどiOSだと標準ではない

最近はXamarinでもWPF並みに色々できるようになって来たのでXAMLだけで表現できるようになってた

カード表示をするためのContentViewを追加

sing System;

using Xamarin.Forms;

namespace hoge.Common
{
    public class Card : ContentView
    {
        public Card()
        {
        }
    }
}

これだけ

カードっぽく見せるためのスタイルを追加

<?xml version="1.0" encoding="UTF-8"?>
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms" 
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                    xmlns:common="clr-namespace:hoge.Common"
                    x:Class="hoge.Asset.Styles">

    <ControlTemplate x:Key="CardTemplate">
        <Frame>
            <ContentPresenter />
        </Frame>
    </ControlTemplate>

    <Style TargetType="common:Card">
        <Setter Property="ControlTemplate" Value="{StaticResource CardTemplate}" />
    </Style>    

</ResourceDictionary>

Frameを使えばカードっぽい見た目になるので、ControlTemplateを使ってFrame内にコンテンツを表示するようにする

Styleを読み込む

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:theme="clr-namespace:hoge.Asset"
             x:Class="hoge.App">
    <Application.Resources>
        <theme:Styles />
    </Application.Resources>
</Application>

起動時に読み込んじゃう

出来上がり

カードっぽくなった

でも影の具合を調整するにはカスタムレンダーしかないのかも
https://alexdunn.org/2017/05/01/xamarin-tips-making-your-ios-frame-shadows-more-material/

ちょっと微妙な見た目だけどXAMLだけでも結構色々できるよというサンプルということで

カードスタイルは良い

テーブルでの表現の代替と考えた場合、表示の柔軟性が良い

カードを使う場合は基本的にスクロールを使うことを許可したデザインになるが、

縦に並べて良し、横に並べて良し　→　レスポンシブにしやすい

表示項目が追加になったらそのまま足せば良い

テーブルを使った場合の色々な悩みから解放される

絶対にスクロールしないで、というデザインの場合はカードは厳しいけど