How to create a rounded stack layout in xamarin forms

2
votes

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

2
c#xamarin.formsxamarin.iosxamarin.android
why you are not trying with transparent image with label? - Pratius Dubey
@AswathyKR the comment above would be smarter actually - FreakyAli
Avoid customizing stacklayout with renderers at all costs, rendering bugs will come when you don't expect them. Xamarin team tries to optimize the rendering process the key element being stacklayout, thus do not modify it. A nice solution was proposed below just to move the frame to the left, hiding the left rounded part. Just put it inside container with IsClippedToBounds="True". - Nick Kovalsky

2 Answers

1
votes

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>
1
votes

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>