CODEWITHSUNDEEP
c#xamlwebviewmicrosoft-metrouwp
user5680169
user5680169

Reputation:

Adaptivness Webview in universal windows 10 app

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Height="833.831" Width="1351">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Unloaded="Unlaoded" Margin="-47,0,0,0" HorizontalAlignment="Right" Width="1398">


        <WebView x:Name="WebView" LoadCompleted="WebView_LoadCompleted" Height="814" VerticalAlignment="Top" Margin="-55,10,10,0" Grid.RowSpan="2" HorizontalAlignment="Right" Width="1396" RenderTransformOrigin="0.506,0.695" 

/>

        <ProgressRing x:Name="ProgressRing1" 
                      Margin="642.019,405,671.173,378.647" 
                      Height="50.353" Width="84.808" 
                      Foreground="BlueViolet" 
                      UseLayoutRounding="False" d:LayoutRounding="Auto" 
                      >

            <ProgressRing.RenderTransform>
                <CompositeTransform Rotation="1.006"/>
            </ProgressRing.RenderTransform>
        </ProgressRing>



    </Grid>
</Page>

hello all i am new to this forum and also i am new in uwp programming. I am in a desperate position and i need some help. I can't make the above webview responsive in all platforms(desktop,windows phone). I load webview from the code from local app and i can't make it adaptive in all platforms. Can anyone help me make it work from xaml.

Did i need to put 

<RelativePanel .../>

in xaml code.

Upvotes: 0

Views: 2765

Answers (2)

Hales Ionel
Hales Ionel

Reputation: 41

You should not use fixed values for Width and Height. Take a look at the following links: Arranging UI Elements and Layout with Absolute and Dynamic Positioning to have an idea of how positioning works in XAML.

I think you created the UI using the designer, that's why you got those values.

Following is a simple example where the web view is filling all the space from the page:

XAML

<Page
x:Class="Stack1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <WebView 
        x:Name="WebView" 
        LoadCompleted="WebView_LoadCompleted" 
        Source="https://www.google.com"/>

    <ProgressRing x:Name="ProgressRing" 
                  Foreground="BlueViolet"
                  IsActive="True"
                  Width="100"
                  Height="100"
                  >
    </ProgressRing>

</Grid>

C# code behind

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private void WebView_LoadCompleted(object sender, NavigationEventArgs e)
    {
        ProgressRing.Visibility = Visibility.Collapsed;
    }
}

The ProgressRing will be visible until the web-view content will be loaded (use of LoadCompleted event)

Related to Adaptive UI you can take a look at this video.

Upvotes: 3

Ibrahim Kıvan&#231;
Ibrahim Kıvan&#231;

Reputation: 51

If your embedded website URL source is responsive, below code changes will help to you fit your website for all screen sizes. Auto layout size and alignment will help you to fit all screen sizes.

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Unloaded="Unlaoded">

        <WebView x:Name="WebView" LoadCompleted="WebView_LoadCompleted" />

        <ProgressRing x:Name="ProgressRing1"            
            Height="50.353" Width="84.808" 
            Foreground="BlueViolet" 
            UseLayoutRounding="False" d:LayoutRounding="Auto" />
    </Grid>
</Page>

Upvotes: 0

Related Questions