How to show WebView in Xamarin.Forms Accordion (SfAccordion)

1 min read

You can show the WebView in Accordion by setting the WebView height in Xamarin.Forms.

<syncfusion:SfAccordion ExpandMode="SingleOrNone">
    <syncfusion:SfAccordion.Items>
        <syncfusion:AccordionItem>
            <syncfusion:AccordionItem.Header>
                <Grid>
                    <Label TextColor="#495F6E" Text="Xamarin" Margin="5" HeightRequest="50" VerticalTextAlignment="Center"/>
                </Grid>
            </syncfusion:AccordionItem.Header>
            <syncfusion:AccordionItem.Content>
                <StackLayout Padding="10,10,10,10" BackgroundColor="#FFFFFF">
                    <WebView HeightRequest="250" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Source="http://xamarin.com" />
                </StackLayout>
            </syncfusion:AccordionItem.Content>
        </syncfusion:AccordionItem>
        <syncfusion:AccordionItem>
            <syncfusion:AccordionItem.Header>
                <Grid>
                    <Label TextColor="#495F6E" Text="Microsoft" Margin="5" HeightRequest="50" VerticalTextAlignment="Center"/>
                </Grid>
            </syncfusion:AccordionItem.Header>
            <syncfusion:AccordionItem.Content>
                <StackLayout Padding="10,10,10,10" BackgroundColor="#FFFFFF">
                    <WebView HeightRequest="250" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Source="https://www.microsoft.com/en-in" />
                </StackLayout>
            </syncfusion:AccordionItem.Content>
        </syncfusion:AccordionItem>
        <syncfusion:AccordionItem>
            <syncfusion:AccordionItem.Header>
                <Grid>
                    <Label TextColor="#495F6E" Text="Syncfusion" Margin="5" HeightRequest="50" VerticalTextAlignment="Center"/>
                </Grid>
            </syncfusion:AccordionItem.Header>
            <syncfusion:AccordionItem.Content>
                <StackLayout Padding="10,10,10,10" BackgroundColor="#FFFFFF">
                    <WebView HeightRequest="250" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Source="https://www.syncfusion.com/" />
                </StackLayout>
            </syncfusion:AccordionItem.Content>
        </syncfusion:AccordionItem>
    </syncfusion:SfAccordion.Items>
</syncfusion:SfAccordion>

Output

WebView in Accordion

View sample in GitHub

Did you find this information helpful?

Yes

Comments (0)

How to show WebView in Xamarin.Forms Accordion (SfAccordion)

Access denied