Xamarin.Formsでボタンを領域の縁に重ねる
上の記事のようにXamarin.Forms v4.3とv4.4以上ではFrameやGridといった領域の中のコントロールは,その領域の外側にははみ出さないように描画される,ようだ.
とはいえ,コントロールの位置をずらして縁に重ねたりするのはおしゃれUIを作成する上でとても重要.
v4.3ではこのように表示されていたものが,
v4.4以降では以下のように表示される.
これを解決するのは難しくなく,この丸いFrameを親要素の外側に出してやればよい.
そして位置を調整する.
<Grid BackgroundColor="Beige" HeightRequest="265" VerticalOptions="End"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Frame Grid.Row="0" Grid.RowSpan="2" Padding="20,0" BackgroundColor="Aqua" CornerRadius="30" HeightRequest="225" VerticalOptions="End"> <Grid Margin="10" Padding="10" BackgroundColor="LawnGreen" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <StackLayout Grid.Row="1" Grid.RowSpan="3" BackgroundColor="Red" HorizontalOptions="FillAndExpand" Orientation="Vertical" Spacing="10" VerticalOptions="Center"> <Label FontAttributes="Bold" FontSize="20" HorizontalTextAlignment="Center" Text="Hello World!" TextColor="#E10555" /> <Label BackgroundColor="Pink" FontSize="15" Text="Text" TextColor="#363636" /> </StackLayout> </Grid> </Frame> <Button Grid.Row="1" BackgroundColor="#E10555" HeightRequest="45" Text="CONTINUE" TextColor="White" /> <!--ここに移動--> <Frame BackgroundColor="Red" CornerRadius="20" HorizontalOptions="Center" TranslationY="-70" VerticalOptions="Center" /> </Grid>
すると,このようになる.
一番外側のGrid(Beige色の領域)は少し広めに確保しておく.そうでないと,Gridの縁で切れてしまうので.
なんだか,こちらのほうが自然に感じてきた.
ソースコードはこちら.