I just try to simulate a resizing event of a webbrowser. It's because some user who are older and are not able to read that good see the conten in a bigger size. Following a simple version of the code:
<Viewbox x:Name="BrowserView" Stretch="None" >
<phone:WebBrowser Source="www.google.ch" x:Name="Minibrowser" IsScriptEnabled="True" height="644" Width="462" >
</phone:WebBrowser>
</Viewbox>
<Button Content="Resize" Click="Resize" />
Xaml.Code
And in the underlying code file a method which just resizes the webbrowser:
private void Resize(object sender, RoutedEventArgs e)
{
Minibrowser.Width = 800;
Minibrowser.Height = 1400;}
What happens is that the browser is resized. However it's not possible to scroll over the whole content because the webbrowser size is now bigger than the viewbox and screen as well.
Thanks a lot for help and I'm open to listen to other solutions
Have a look at this post about managing the browser-viewport and WP7 WebBrowser control zoom.
Plus, you could also look for "accessibility"...
Related
I have to display multiple HTML contents on a single window. These data come as strings. Every string represents one HTML file data.
I am using webbrowser control and stackpanel layout to display them on a single window.
<Grid >
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Background="YellowGreen">
<WebBrowser Margin="5" Loaded="WebBrowser_Loaded"/>
<WebBrowser Margin="5" Loaded="WebBrowser_Loaded" />
<WebBrowser Margin="5" Loaded="WebBrowser_Loaded" />
</StackPanel>
</ScrollViewer>
private void WebBrowser_Loaded(object sender, RoutedEventArgs e)
{
WebBrowser web = sender as WebBrowser;
web.NavigateToString(VM.HtmlContent);
}
Problem: Webbrowser is not rendered to its content size.
Regardless of the actual content size, all webbrowsers take same amount of space in the stack panel.
Current Output Screenshot
Web browsers 2nd and 3rd have not taken the required amount of space to render the content.
It seems the Webbrowser control is not giving the right information about its content size to the stack panel.
Given that, web browsers get rendered to its content size, I would like to avoid the scroll bar at the web browser level.
Any help is highly appreciated. Thank you.
WebBrowser control does not support this functionality. However you can get the content size and resize controls manually as demonstrated in this thread: https://stackoverflow.com/a/40795036/12797700
I can't find any detailed document to use Acrylic Accent (CreateBackdropBrush). I found a post in StackOverflow which is somewhat useful but it doesn't help to get started. So please create a detailed answer to this post so that everyone can learn.
Update:
Microsoft has released an official Acrylic material document
Note:
If anyone doesn't know about Acrylic Accent. Acrylic Accent is the new feature in Windows 10 Creators Update that allows the app background to be Blurred and Transparent.
CREATOR UPDATE
XAML
You need to use a component that you put on the background of your app, let's say a RelativePanel
<RelativePanel Grid.Column="0" Grid.ColumnSpan="2" MinWidth="40" x:Name="MainGrid" SizeChanged="Page_SizeChanged"/>
<RelativePanel Grid.Column="0" Width="{Binding ElementName=MainGrid,Path=Width}" Background="#28000000"/>
<Grid>
<!--Having content here, for example textblock and so on-->
</Grid>
The second RelativePanel is used to set the shadow color above the Blur.
.CS
And then you can use the following code :
private void applyAcrylicAccent(Panel panel)
{
_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
_hostSprite = _compositor.CreateSpriteVisual();
_hostSprite.Size = new Vector2((float) panel.ActualWidth, (float) panel.ActualHeight);
ElementCompositionPreview.SetElementChildVisual(panel, _hostSprite);
_hostSprite.Brush = _compositor.CreateHostBackdropBrush();
}
Compositor _compositor;
SpriteVisual _hostSprite;
and calling it with applyAcrylicAccent(MainGrid);
You also will need to handle the SizeChanged event :
private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (_hostSprite != null)
_hostSprite.Size = e.NewSize.ToVector2();
}
Of course you will need to be on the Creator Update to run this, the CreateHostBackdropBrush() won't work on a mobile device, or in tablet mode.
Also, consider that the panel or grid that you set with a acrylic color won't be able to display any control (as far I've tested yet). So you need to use your relative panel without any control in it.
Transparent Title bar
The transparency of the title bar could be set using the following code
ApplicationViewTitleBar formattableTitleBar = ApplicationView.GetForCurrentView().TitleBar;
formattableTitleBar.ButtonBackgroundColor = Colors.Transparent;
CoreApplicationViewTitleBar coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
Here a example of what the above code generate (with some other things added too.)
Fall Update 10.0.16190 and above
As Justin XL mention in an answer below, starting from the Build 16190 and above, developers have access to different Acrylic Brushes located at Windows.UI.Xaml.Media (Acrylic API) and the guidelines from Microsoft : Acrylic material guidelines
In the Creators Update Insider Preview 16193 (along with Windows 10 SDK 16190), there's a new AcrylicBrush that you can apply directly onto your element just like a normal SolidColorBrush.
<Page xmlns:media="using:Windows.UI.Xaml.Media" ...>
<Page.Resources>
<media:AcrylicBrush x:Key="HostBackdropBrush"
BackgroundSource="HostBackdrop"
TintColor="LightBlue"
TintOpacity="0.6"
FallbackColor="LightSkyBlue"
FallbackForced="False" />
</Page.Resources>
<Grid Background="{StaticResource HostBackdropBrush}" />
</Page>
Note you can change the BackgroundSource to Backdrop to sample from the app content instead of the content behind the app window. Also make sure you define an appropriate FallbackColor because you will lose the acrylic effect when the app window has lost focus or the device is in battery saver mode.
I am trying to disable the scroll functionality in the phone:webbrowser in my windows phone 8 application. The reason i wan't to do this is that I want to place a stackpanel with items underneath the webview, but still show the whole webpage.
To accomplish this I get the total height of the webpage and set the height of the webbrowser to the webpage height. This will be done through adding javascript to the webbrowser. The webview will now have the total webpage and the items underneath it and both of those items are in a ScrollViewer so you can scroll through the page.
The only problem i have right now is that you can scroll the webbrowser so you cant scroll the scrollviewer. anyone got an idea how to fix this?
<ScrollViewer
Grid.Row="1"
Margin="0,0,0,0">
<StackPanel
x:Name="ContentPanel"
Margin="0,0,0,0">
<phone:WebBrowser
x:Name="webView"
Navigating="WebBrowserNavigating"
LoadCompleted="WebBrowserLoadCompleted"
ScriptNotify="browser_ScriptNotify"
IsScriptEnabled="True"/>
<StackPanel
x:Name="CouponHolder"
Margin="0,5,0,0">
</StackPanel>
</StackPanel>
</ScrollViewer>
I also looked at other questions, but they didnt work out for me:
http://www.codeproject.com/Tips/718671/Disable-WebView-scrolling-in-Windows-Store-Apps
And I see allot of people give awnsers like VerticalScrollBarVisibility="Disabled" but this doesnt work, like the suggests it will only hide the visibility...
you can disable all manipulation with WebBrowser control by setting IsHitTestVisible="false". The disadvantage is that you can't press Links, Navigate and so on.
If you want just to disable scrolling than take a look at this blog post:http://www.scottlogic.com/blog/2011/11/17/suppressing-zoom-and-scroll-interactions-in-the-windows-phone-7-browser-control.html
You can Find that the VisualTree of WebBrowser control looks like:
\-WebBrowser
\-Border
\-Border
\WebBrowserInteropCanvas (New in Windows Phone 8, missing in WP7)
\-PanZoomContainer
\-Grid
\-Border (you need access this one)
\-ContentPresenter
\-TileHost
You can get the last Border in VisualTree, and subscribe to ManipulationDelta, ManipulationStarted and ManipulationCompletedEvents. And set e.Handled = true; In event handlers. Be careful with that. For example where is no equialent for this code in Windows 8.1 and Windows Phone 8.1 (Runtime).
This hack will cancel scrolling of webbrowser while user can interract with entire web page, but you won't be able to suppress manipulation to put webbrowser in scrollviewer.
In general I don't think that you could achive ideal user experience if you put WebBrowser inside ScrollViewer
After hours of searching this project finally solved all our webview problems in Windows Phone 8.1 (bounce, touch, auto height etc.):
https://github.com/romshiri/sizeable-webview
I have tried phone:Webbrowser which does not automatically size to the required amount.
I have tried many textbox and richttextbox property extension libraries, I cannot get any to work.
I want to know how people get html into textboxes or richtextboxes in windows phone 8.
Argh, I have spent 2 evenings on this now! doh!
Context:
I am calling an API that is returning html (why oh god why)... I want to bind the returned html to a textbox or richtextbox or if I haveeee to, a phone:webbrowser.
Textbox and richtextbox do not support html.
phone:webbrowser does not adjust its height according to what's inside the document. You can supposedly do it by enabling javascript and calling window.external.Notify() but I couldn't get it to work quite right...
Moving on from the above problem, even if I did get the phone:webbrowser to work, if for test purposes I make the width 500 and height 500, I can see my html string as plain text rather than the webcontrol correctly parsing html... doh!
Just try this way.
your xaml:
<Grid x:Name="ContentGrid" Grid.Row="1">
<phone:WebBrowser HorizontalAlignment="Left" Margin="20,50,0,0" Name="webBrowser1" VerticalAlignment="Top" Height="500" Width="430" />
</Grid>
in your code:
public MainPage()
{
InitializeComponent();
webBrowser1.Loaded += WebBrowser_OnLoaded;
}
private void WebBrowser_OnLoaded(object sender, RoutedEventArgs e)
{
webBrowser1.Navigate(new Uri("readme.htm", UriKind.Relative));
}
Hope it helps
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:WebBrowser x:Name="browser" IsScriptEnabled="True" Margin="-12,0,-11,0" />
</Grid>
I initialized web browser using this code. Since, my html content is too big, it takes much more to load those html files. Till the html files displayed, web browser is being white color.
It makes me irritate. I need to know can we have any loader pic in web browser. So, the pic displayed until web browser loads the html files ???
I can't verify this at the moment but the approach I would take is to display an image via Image or some alternative, such as a loading message in XAML, and set the initial visibility of this stand-in to visible and the WebBrowser to collapsed.
Implement an event handler for the LoadCompleted event on the WebBrowser and when it is triggered, swap the visibility states to hide the progress/wait message and show the web browser.
It'll look roughly like:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Text="Loading... please wait" Visibility="Visibile" x:Name="loadingMessage"/>
<phone:WebBrowser x:Name="browser" IsScriptEnabled="True" Margin="-12,0,-11,0" LoadCompleted="htmlLoadCompleted" Visibility="Collapsed"/>
</Grid>
// In the code behind - HTML finished loading, swap visibility to show the page
private void htmlLoadCompleted(object sender, NavigationEventArgs e)
{
loadingMessage.Visibility = Visibility.Collapsed;
browser.Visibility = Visibility.Visibile;
}
I have concerns over when/how the WebBrowser starts loading, which is why I'd like to caution I don't have a local environment configured to verify this approach is 100% working. You might need to experiment with this some to get it working but I hope this helps set you on the right path.