CODEWITHSUNDEEP
uwp
Sanjana Ekanayake
Sanjana Ekanayake

Reputation: 353

change font size in web view in uwp

I am currently working on UWP project and I use a web view to show html content.I want content in the project to be responsive to the screen sizes.Therefore I need to give different font sizes to web view in laptop size screen and PC screen.Following code is the one that I used to show content in PC screen

<StackPanel  x:Name="questionItem" HorizontalAlignment="Center"   Grid.Row="1" Grid.Column="1"   >
   <WebView Name="webview" Width="750"   util:WebViewCustomProperties.HtmlString="{Binding CourseName}"  ScriptNotify="WebViewT_ScriptNotify" DefaultBackgroundColor="Transparent"  />
</StackPanel>

in behind the code file,

 if (courseid != null)
        {
            course.CourseName = "<div style=\"font-size: 25px;VerticalAlignment:Center;font-family:Segoe UI;width: 100%;\">" + course.CourseName + "</div>";
        }

I gave different widths to the web view using a visual state

<VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">

            <VisualState >
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" MinWindowHeight="0"  />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="webview.Width" Value="430"/>                                             
                </VisualState.Setters>
            </VisualState>

            <VisualState >
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1280" MinWindowHeight="720"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="webview.Width" Value="750"/>                       
                </VisualState.Setters>
            </VisualState>


        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

What I want to do is give two font sizes to the web view similar to width.For now it is 25px for both laptop and PC screen.therefore in laptop screen content is cut off.If anyone can help me with this I would appreciate.Thank you

Upvotes: 1

Views: 482

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32775

change font size in web view in uwp

You could use WebView.InvokeScriptAsync method to inject javascript eval function and use the following code to change the font side on the html page. For your scenario, you could listen the CoreWindow.SizeChanged event and set the fontsize base on the window 's width.

For example:

 public MainPage()
 {
     this.InitializeComponent();
     MyWebView.DOMContentLoaded += MyWebView_DOMContentLoaded;
     Window.Current.CoreWindow.SizeChanged += CoreWindow_SizeChanged;

 }

 private async void CoreWindow_SizeChanged(Windows.UI.Core.CoreWindow sender, Windows.UI.Core.WindowSizeChangedEventArgs args)
 {
     if (args.Size.Width == 1280 && isLoaded)
     {
         await MyWebView.InvokeScriptAsync("eval", new string[] { "document.getElementsByTagName(\"div\")[0].style.fontSize=\"" + 30 + "\";" });
     }
 }

 private bool isLoaded;
 private void MyWebView_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
 {
     isLoaded = true;
 }

Upvotes: 1

Related Questions