I'm trying to render some html content with a WebBrowser xaml control. The html content varies in length. The control is placed within a grid with single row at the moment. I would like to place other controls (StackPanels) before and after the web browser and to get vertical scrolling across the entire layout.
Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<phone:WebBrowser
Grid.Row="0"
x:Name="webBrowser1"
Background="Black"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsScriptEnabled="False"
Visibility="Visible">
</phone:WebBrowser>
<ProgressBar Visibility="Visible" x:Name="LoadingProgress" Indeterminate="True"></ProgressBar>
</Grid>
However I can only scroll the current viewport, being forced to apply a fixed height to the webbrowser.
The theoretical structure I'm aiming to is:
scrollviewer
StackPanel
WebBrowser (probably within another stackPanel)
StackPanel
...
Stackanel
and would like to scroll the scrollViewer, not the webbrowser, so the browser would automatically resize based on the content loaded. Any suggestions?
I found a good blog post on MSDN that addresses this issue: http://blogs.msdn.com/b/mikeormond/archive/2010/12/16/displaying-html-content-in-windows-phone-7.aspx
The blogger was initially trying to accomplish the same thing as you, placing a browser into a scrollviewer, etc. But found that it didn't work well for larger html pages, they went with a different solution to disable scrolling and zooming in the browser control. Hope this can help:
This worked fine until dealing with longer bodies of content; when the
height of the WebBrowser control was set to more than 1800px the the
application would crash. As it turned out, there’s a much easier way
to achieve the same effect.
Instead of disabling hit testing on the WebBrowser control (and then
embedding it in a ScrollViewer to re-enabled the scrolling
experience), it’s possible to set meta tags in the HTML to declare
that the user should not be able to zoom the content.
or
These meta tags set the width of the viewport to 320px (to avoid
horizontal scrolling) and specify that the user should not be able to
scale the viewport. Add these meta tags to the HTML injected into the
WebBrowser control and the desired behaviour is achieved.
To get the height from the webview, you can use
window.external.notify("rendered_height=document.getElementById('yourId').offsetHeight")
in body.onload and body.onresize
Here is a complete example of an AdaptativeWebview that handle scroll and resize
Related
I'd like to have some sort of semi transparent/translucent effect displayed over the entire page and then display my option buttons on top of it but I just can't figure out how and it's driving me nuts! I've seen it in plenty of wp8 apps so it is doable but I just don't know how!
Once this semi transparent/translucent effect is displayed, I want it to dissapeared if clicked on or if one of my option buttons is clicked, and restore the screen as it was or execute an action accordingly.
I've somehow managed to do it by setting the Background colors using a storyboard but strangely enough, once displayed and my options buttons appear, they look fine but once the storyboard is completed, the button then look disabled as well which just looks wrong!!
What is the proper way to give a "Disabled" effect as if you had a semi transparent dialog box displayed over a window.
Any ideas, suggestions or code would be appreciated.
Thanks.
You may be making this more complicated than it needs to be. Consider the following XAML for example:
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="ContentRoot">
...
</Grid>
<Grid x:Name="ContentOverlay" Background="#AA000000" Visibility="Collapsed">
...
</Grid>
</Grid>
Both ContentRoot and ContentOverlay will anchor at the top left of the LayoutRoot grid and span the row height. They will stack from furthest to closest in order of declaration, so ContentRoot will be rendered beneath ContentOverlay. Simply manipulate the Visibility of ContentOverlay based on user input.
Alternatively, you can set the Opacity for ContentOverlay to 0 along with collapsed visibility (required so it doesn't intercept hits to the ContentRoot child controls below) and fade it in and out using storyboarding in Blend. That probably looks like a slightly cleaner transition to a user, even if it's only 0.3 seconds long or so.
Use Blend to specify VisualStates (View | States. Then 'states' tab.) You can switch between states in code behind using VisualStateManager.GoToState. One state would be normal, the other all controls disabled.
Mike
I am using the Fluidkit ElementFlow control that I use to display a UserControl that contains textblock with a ScrollViewer as well as button and when they are displayed in the ElementFlow control, all of the buttons and the ScrollViewer seem to be disabled because I can't scroll the ScrollViewer scrollbar and even a simple action as hovering over a button doesn't do anything to the button.
Below is an example of the TextBlock in a ScrollViewer that does not allow for scrolling when used in the ElementFlow.
How can this be fixed?
<ScrollViewer
Height="1200" Width="800"
MaxHeight="1200" MaxWidth="800"
VerticalScrollBarVisibility="Auto">
<TextBlock
Height="Auto" Width="800"
MaxWidth="800"
FontSize="20"
Text="Super long text"
TextWrapping="Wrap"/>
</ScrollViewer>
Just looking over the source code for the project, it looks like it is creating a 3D mesh, and painting the controls on the mesh. This would prevent all user interaction. I don't think there is an easy way to work around this.
However, since you have the source code, you can do the work yourself to make it happen. You're going to need to modify how the ElementFlow represents its items. Look at the CreateMeshModel function. It is currently creating a mesh and applying a VisualBrush to it. Instead, look at the blog post Interacting with 2D on 3D in WPF to figure out what needs to happen.
I am using the following XAML to display streaming video through a Silverlight media element:
<UserControl x:Class="slplayer.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Padding="0">
<!-- source is set to a custom MediaStreamSource in code behind -->
<MediaElement Name="mediaElement" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="0" Stretch="Uniform" />
</UserControl>
And expect that video should playback and should, depending on the size of the playback window, consume either all available horizontal space or all available vertical space and scale the non-constrained dimension to maintain the aspect ratio of the video.
In the case where the vertical dimension is constrained this is exactly what happens, however (as you can see in the screen shot below) when the horizontal dimension is constrained a significant amount of space is left on either side and the vertical dimension is scaled to this narrower width.
My question is why is the video not consuming all horizontal space?
Things I've tried:
simplifying the layout (which is how I got the above XAML)
hosting the control in both a web browser and a SilverlightViewportElement
modifying the dimensions of the mp4 file and video track
playing the mp4 file in WMP (which scales correctly)
setting css styles on the html, body, div, and object used
The problem illustrated:
Try putting your MediaElement in a grid.
Put your MediaElement in a Grid and remove all Alignment Stretch settings and also Padding and Margin too. Only set Stretch as uniform for MediaElement.
PS: Check your aspx div for Silverlight object. Its Width and Height might have been set with wrong values.
I have a Popup that consists of a grid of labels. The popup sits inside a Canvas like this.
<Canvas x:Name="mainCanvas">
<Popup x:Name="mainPopup"
IsOpen="True"
PlacementTarget="{Binding ElementName=mainCanvas}"
PopupAnimation="Fade"
AllowsTransparency="True"
Placement="Center">
Wrapping inside the canvas (or similar control) is the only way I've found to allow the popup's contents to be transparent.
Anyway, all of this works fine and I see my grid of labels across the center of the screen. What I'd really want though is to display the grid of labels across the bottom of the screen. However when I change Placement="Center" to Placement="Bottom", I don't see the popup at all.
Have you seen this? It is a pretty good explanation about how popup placement works.
I created a test WPF project in Blend and pasted your exact code, then changed Placement to Bottom. I did see the content I added to the popup (a TextBlock with some junk text), but it was hard to see, since it is positioned below mainCanvas (as expected).
So... there must be some other problem aside from the code you showed.
I need to draw over the html page. Page displayed in a Frame element.
The problem is that InkCanvas does not work with Frame.
I tried to insert TextBlock instead of Frame - painting works.
Does not work:
<Frame Grid.Row="1" Source="http://google.com/"></Frame>
<InkCanvas Grid.Row="1" x:Name="inkCanvas" Background="Transparent"></InkCanvas>
Work:
<TextBlock Grid.Row="1" Margin="10" Text="Some text"></TextBlock>
<InkCanvas Grid.Row="1" x:Name="inkCanvas" Background="Transparent"></InkCanvas>
When the Frame control navigates to HTML content, the Frame control internally instantiates the native WebBrowser ActiveX control. This involves HWND interop. As a result of that the "airspace proplem" comes into play. It basically means that no WPF content can overlap that AcitveX HWND. You can partly work around this propblem by wrapping the overlay into another HWND (e.g. using Winfows Forms and ElementHost). But this solution will not allow you to have transparency in the overlay.
Another trick you could try is to use the WindowsFormsHost to host the Windows Forms Browser Control instead of using a Frame.
Last but not least you could use the Chromium WPF Webbrowser Control instead of the Frame control if you can afford it. It is based on the Awesomium library. Which unfortunately is only free for non commercial use. This is the only solution that allows you to use all the advanced WPF goodies like transformation (rotation, skew etc.), bitmapeffects or transparency etc. Width the other two solutions you are bound to a fixed opaque rectangle.