Posted at

Xamarin.Formsでカードスタイル


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>

起動時に読み込んじゃう


出来上がり

image.png

カードっぽくなった

でも影の具合を調整するにはカスタムレンダーしかないのかも

https://alexdunn.org/2017/05/01/xamarin-tips-making-your-ios-frame-shadows-more-material/

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


カードスタイルは良い

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

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

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

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

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

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