echo("備忘録");

IT技術やプログラミング関連など、技術系の事を備忘録的にまとめています。

【Xamarin.Forms】LabelにBorderを設定する

前回の記事同様、Style関連の内容です。

各種GUIで「Border(=境界線)」の太さや色などの設定、があると思います。
で、現在作成中のXamarin.Formsアプリで、同様の事をLabelで行おうとしたら...

Xamarin.FormsのLabelには「Border」プロパティがない!
※要は、枠線を表示できないということ。

まあ、ないものは仕方がないのですが、何とかやる方法はないか...ということで調べたら、以下の方法がありました。
参考:Xamarin.Forms で枠線付きのラベルを作る - clock-up-blog

1.LabelをFrame内に書く
→Frameの「OutlineColor」プロパティを使用すれば、枠線の色は指定できる。
 でも太さは指定できない。

2.Labelを2重Frameで囲む
→親Frameの「BackgroundColor」及び「Padding」を指定して、その中に子Frame&Labelを表示すれば、子Frame&Labelが表示されていない箇所が(見た目は)枠線のように表示される。
ただ、複数の枠線付きLabelを表示させたい場合、すべてに2重Frameを用意するのは、コーディングが面倒かも...

3.Buttonで代用する。
→Labelと違い、Buttonには「Border」関連のプロパティがあるので、それならButtonで代用しちゃえ、という方法。
 Labelへのこだわりがなければ、正直これが一番手っ取り早い。(ただ「Labelの枠線」という趣旨からは外れるけど...)
 
てか、なぜButtonにはBorderがあって、Labelにはないのか…


最後に、ソースコードと実際の画面をば。

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="ButtonRedStyle" TargetType="Button">
                <Setter Property="TextColor" Value="Black" />
                <Setter Property="HorizontalOptions" Value="Center" />
                <Setter Property="VerticalOptions" Value="Center" />
                <Setter Property="BackgroundColor" Value="Red" />
                <Setter Property="BorderColor" Value="Black" />
                <Setter Property="BorderWidth" Value="2" />
                <Setter Property="BorderRadius" Value="0" />
            </Style>
            <Style x:Key="FrameLabelStyle" TargetType="Label">
                <Setter Property="FontSize" Value="20" />
                <Setter Property="HorizontalOptions" Value="Center" />
                <Setter Property="VerticalOptions" Value="Center" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout HeightRequest="500">
            <Label Text="1:LabelをFrame内に書く" />
            <Frame WidthRequest="110"
                HeightRequest="80"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Padding="0"
                OutlineColor="#f00" >

                <Label Text="あああ" Style="{StaticResource FrameLabelStyle}" TextColor="Black" />
            </Frame>

            <Label Text="2:Labelを2重Frameで囲む" />
            <Frame WidthRequest="106" 
                   HeightRequest="76" 
                   HorizontalOptions="Center" 
                   VerticalOptions="Center"
                   Padding="2"
                   BackgroundColor="#f00"
            >
                <Frame Padding="0"
                     BackgroundColor="#000"
                     VerticalOptions="Fill"
                     HorizontalOptions="Fill">
                    <Label Text="いいい" Style="{StaticResource FrameLabelStyle}" TextColor="Yellow" />
                </Frame>
            </Frame>

            <Label Text="3:Buttonで代用する" />
            <Button x:Name="button_red" Text="ううう" Style="{StaticResource ButtonRedStyle}" />
        </StackLayout>
    </ContentPage.Content>

f:id:Makky12:20180412212724j:plain

まだまだXamarinは発展途上、これからが楽しみですね。
(精一杯のフォロー)