Stopbyte

How to use WebView Controls inside a FlipView correctly using WPF and C#?

Software Development WPF
#1

I am trying to make a FlipView for which the items (Views) will be in the form of WebViews, so that i can FlipView through Web pages.

The flipping should be done horizontally (left to right / right to left), but so far i fail to do that, here is my current XAML code:

<FlipView Grid.Column="3" Grid.Row="0" Grid.RowSpan="5" Name="MainFlipView">
    <WebView Source="http://stopbyte.com" Width="825" Height="500" />
    <WebView Source="http://articles.stopbyte.com" Width="825" Height="500" />
    <WebView Source="http://www.google.com" Width="825" Height="500" />
</FlipView>

But unfortunately the WebViews take over mouse actions, and the FlipView doesn’t interact to my mouse dragging.

What should i do? do i have to make a custom WebView Element?

2 Likes
#2

I don’t know what you missed up, but the same xaml code works in my machine (visual studio 2015). double check it.

1 Like
#3

I did the following xaml code in my Universal Windows App project and worked perfect :

<Page
    x:Class="Swipe.Webview.Example.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Swipe.Webview.Example"
    xmlns:System="using:System"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <local:WebsiteCollection x:Key="WebsiteCollection">
            <local:Website Url="http://getbootstrap.com/" />
            <local:Website Url="http://holdirbootstrap.de/" />
            <local:Website Url="http://v3.bootcss.com/" />
            <local:Website Url="http://www.oneskyapp.com/fr/docs/bootstrap/getting-started/" />
        </local:WebsiteCollection>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <FlipView x:Name="FlipViewControl" ItemsSource="{StaticResource WebsiteCollection}" HorizontalContentAlignment="Center">
            <FlipView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </FlipView.ItemsPanel>
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <WebView Source="{Binding Url}" />
                    </Grid>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
    </Grid>
</Page>

That’s the full XAML code for the Universal Windows App Page, that contains the FlipView. the WebView Control is used inside the DataTemplate of the FlipViewItem. The FlipView Items are bound from the WebsiteCollection Resource, don’t worry it’s not something tricky only a simple class that has only one member named Url. that Url is bound to the WebView Source. so the WebView website pages will get loaded automatically.

using the StackPanel for the ItemsPanelTemplate of the FlipView is necessary to get the effect of swiping the pages left-to-right and right-to-left.

That’s it, i hope that helps someone else.