Hello,
I am using SfBorder in my Xamarin Forms app. It is being used as a header to a bottom drawer that pops up when user taps on the map. I am trying to set the header so that the top two edges of the header are rounded and the bottom corners are not rounded. However when I try setting the corner radius for bottom edges as 0, the whole header shows as a rectangle (screenshot attached). Here is my XAML code for drawer-
<border:SfBorder
x:Name="PartnerPopupGrid"
HeightRequest="60"
StyleClass="PopupHeader"
BackgroundColor="White"
>
<border:SfBorder.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="OnInfoButtonClicked" NumberOfTapsRequired="1"/>
</Grid.GestureRecognizers>
<Image Source="header_background.png" Aspect="AspectFill"/>
<StackLayout Orientation="Horizontal" Spacing="10">
<Label Text="Welcome to App" TextColor="{StaticResource ColorWhite}" HorizontalOptions = "StartAndExpand" Margin="16,5,10,5" VerticalOptions="Center" FontSize="Medium" FontAttributes="Bold" LineBreakMode="WordWrap"/>
<ImageButton
Source="info.png"
BackgroundColor="Transparent"
HeightRequest="26"
VerticalOptions="Center"
Margin="10"
HorizontalOptions="End"
Aspect="AspectFit"
Clicked="OnInfoButtonClicked"
/>
</StackLayout>
</Grid>
<Label Grid.Row="1" Text="title" TextColor="#1D2E4E" HorizontalOptions="Center" FontSize="Medium" FontAttributes="Bold" Margin="5,5,5,2"/>
<Label Grid.Row="2" Text="text" TextColor="{StaticResource ColorGray}" HorizontalOptions="Center" FontSize="Small" LineBreakMode="WordWrap" VerticalOptions="CenterAndExpand" Margin="5,0,5,0" HorizontalTextAlignment="Center"/>
<ScrollView Grid.Row="3" Margin="5,2,5,5">
<Image Source="partner.png" Aspect="AspectFit" />
</ScrollView>
</Grid>
</border:SfBorder.Content>
</border:SfBorder>
<Style TargetType="border:SfBorder" Class="PopupHeader">
<Setter Property="CornerRadius" Value="10,10,10,10" />
<Setter Property="VerticalOptions" Value="End" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
</Style>
Enclosed zip file contains two screen shots titled "current" and "Error". Both screenshots show the header at the bottom of the page titled "Welcome to Boulder Area Trails". "Current" shows how the screen looks like currently with all four corners of the header having a corner radius of 10. "Error" shows how the screen looks like when I set the corner radius to 10,10,0,0. Please note that the top edges of header in "Error" are square with rounded corner hidden behind those.
I would appreciate if you can please help with this production issue.
Thanks
Apurva
Attachment:
Archive_b2f53730.zip
