CODEWITHSUNDEEP
c#xamarin.formsxamarin.iosxamarin.android
Aswathy K R
Aswathy K R

Reputation: 177

How to create a rounded stack layout in xamarin forms

I want to design a half rounded stack layout in xamarin forms,I got the solution for fully rounded stack layout, How can I design a label like the below image.

enter image description here

It's working fine in android by using the below answer, but in iOS the frame is overlapping the previous one.

enter image description here

Upvotes: 2

Views: 276

Answers (2)

Abdul Gani
Abdul Gani

Reputation: 689

Try frame like below 

   <Frame BackgroundColor="Black" Opacity="0.4" Grid.Row="1" Grid.Column="0" Margin="-25,0,0,0" CornerRadius="30" HeightRequest="40">
        <Label  Text="Rekorida" TextColor="White" ></Label>
    </Frame>

For iOS, try some workaround like below for now.. Let me check for permanent solution..

<ListView x:Name="ItemsListView" ItemsSource="{Binding Items}" VerticalOptions="FillAndExpand" HasUnevenRows="true" RefreshCommand="{Binding LoadItemsCommand}" IsPullToRefreshEnabled="true" IsRefreshing="{Binding IsBusy, Mode=OneWay}" CachingStrategy="RecycleElement" ItemSelected="OnItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="25"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="25"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Frame BackgroundColor="Black" Opacity="0.4" Grid.Column="0" Margin="-25,0,0,0" CornerRadius="30" HeightRequest="40">
                            <Label  Text="Rekorida" TextColor="White" ></Label>
                            </Frame>
                            <Frame BackgroundColor="Black" Opacity="0.4" Grid.Column="2" Margin="-25,0,0,0" CornerRadius="30" HeightRequest="40">
                            <Label  Text="Rekorida" TextColor="White" ></Label>
                            </Frame>
                            <Frame BackgroundColor="Black" Opacity="0.4" Grid.Column="4" Margin="-25,0,0,0" CornerRadius="30" HeightRequest="40">
                            <Label  Text="Rekorida" TextColor="White" ></Label>
                            </Frame>
                            <BoxView BackgroundColor="White" Grid.Column="1"/>
                            <BoxView BackgroundColor="White" Grid.Column="3"/>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Upvotes: 1

FreakyAli
FreakyAli

Reputation: 16572

Put your StackLayout into a Frame and you can achieve this :

<Frame HasShadow="False" BackgroundColor="Black" Opacity="0.4" Margin="-25,0,0,0" CornerRadius="25">
<StackLayout.....  />
</Frame>

Upvotes: 1

Related Questions