※前回の記事同様、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>
まだまだXamarinは発展途上、これからが楽しみですね。
(精一杯のフォロー)