I have a simple wpf window which has a Scrollviewer and inside it a Web Browser.
<Window x:Class="WpfApplication9.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" Background="Gainsboro">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions>
<ScrollViewer Width="300" Grid.Column="1" Height="200" HorizontalScrollBarVisibility="Auto">
<WebBrowser Width="400" Margin="2" Source="C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg" />
</ScrollViewer>
</Grid>
As i have given a Width to the browser which is more than the width of the Scroll Viewer
i expect the scroll viewer to show the horizontal scroll bar and show the web browser within the Scroll Viewer.
But when i horizontally scroll to the right , the web browser moves out of the scroll viwer.
Am i doing something wrong? Or is there any workaround for this?
Any help is highly appreciated. Thanks.
The WPF web browser control is actually an ActiveX component so it doesn't quite play nice with the rest of the framework. As far as I can tell, the browser gets pasted on top of your application and you will always see all of it, regardless of the underlying container.
You could try to use something like WPF Chromium instead.
Related
I feel like I'm missing something obvious, but:
I was hoping to use the mahapps Flyout control to do a fairly simple flyout over a webview2 control. However, the the flyout shows behind the webview2 control, leaving most of the flyout hidden.
The control is wrapped in a Grid in the code below because I noticed that if I put the webview in a StackPanel, then the webview doesn't show (no height/width measurements given) but the flyout does appear in front as expected. So I tried DockPanel and Grid which show the webview page but hide the flyout.
The hatched area on the right of the screenshot is so the user has a mouseover area which should auto expand the flyout:
And this is how the flyout renders whether webview is without a wrapper, or in a DockPanel or Grid:
<mah:MetroWindow x:Class="Fraxinus.EdBoard.UI.MainWindow"
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"
xmlns:local="clr-namespace:Fraxinus.EdBoard.UI"
xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<VisualBrush x:Key="MyVisualBrush" TileMode="Tile" Viewport="0,0,5,5" ViewportUnits="Absolute" Viewbox="0,0,5,5" ViewboxUnits="Absolute">
<VisualBrush.Visual>
<Grid Background="Black">
<Path Data="M 0 5 L 5 0" Stroke="Gray" />
<Path Data="M 0 0 L 5 5" Stroke="Gray" />
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Window.Resources>
<mah:MetroWindow.Flyouts>
<mah:FlyoutsControl Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2">
<mah:Flyout x:Name="flyout" Position="Right">
<TextBlock Text="Some Text"/>
</mah:Flyout>
</mah:FlyoutsControl>
</mah:MetroWindow.Flyouts>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="98*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<wv2:WebView2 Source="http://localhost:4200"></wv2:WebView2>
</Grid>
<StackPanel Grid.Column="1" Grid.Row="0" MouseEnter="StackPanel_MouseEnter" MouseLeave="StackPanel_MouseLeave" Background="{StaticResource MyVisualBrush}">
</StackPanel>
</Grid>
</mah:MetroWindow>
Also is it a simple thing to prevent the flyout from extending into the title bar?
Thanks, Luke
Yep: I have the exact same problem with MahApps Metro async dialogs displaying underneath. Menus and Context Menus work fine although the latter isn't styled like the former which is a real bummer and headache to do.
Glad I didnt try the Hamburger Menu: besides I dont want my WebView2 based Javascript Web Map to have to resize itself on every flyout of this menu if heavily loaded with serious maps!
I'll try styling the Context Menu but the answer is that I am seriously thinking of just doing all of the menus and dialogs in JavaScript leaving just the WebView2 plus Mahapps shell with an Hamburger icon which I did get working. As I can always just use JS to C# interop to do processing with C# libraries in the effective back end in which I case I could go with Photino but then I wouldn't be able to use my Hamburger icon in the MetroWindow Title Bar so I will stick with it. Decisions. Decisions..
This is the definitive answer to use of WebView2: menus, context menus, or else JavaScript menus and dialogs for everything. Although I am pretty sure regular Windows popup dialogs or custom ones in their own windows will work but again you will have to style them and I am beginning to think that styling in JS and CSS will be one hell of a lot easier!
From the Ticket AirHack looks to be the only other option but requires re-inheriting all of your controls = nope!
Following XAML in this Microsoft tutorial is showing too much gap between the top edge of the parent window and the UWP user control. Question: How can we make the user control align to the top edge of parent window? Remark: The VerticalAlignment="Top" in the StackPanel below does not help. This question is something similar to this post but in a different context.
<UserControl
x:Class="ClassLibUWP_inside_WPF.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ClassLibUWP_inside_WPF"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:winui="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d"
d:DesignWidth="400" Height="329">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="211*"/>
<ColumnDefinition Width="189*"/>
</Grid.ColumnDefinitions>
<StackPanel Background="LightCoral" Grid.ColumnSpan="2">
<TextBlock>This is a simple custom UWP control</TextBlock>
<Rectangle Fill="Blue" Height="93" Width="100"/>
<TextBlock Text="{x:Bind XamlIslandMessage}" FontSize="50"></TextBlock>
<winui:RatingControl Height="32" />
</StackPanel>
</Grid>
</UserControl>
When you run the app built in the above tutorial, you get the following screen showing the above UWP user control:
I would instead like to display it as follows [notice about no gap between window title and the red stack panel]:
The UserControl has a fixed height that is smaller than the height of the window and thus is vertically centered in the window. Setting VerticalAlignment="Top" on the WindowsXamlHost should give what you want.
I'm attempting to make a translusent popup that covers the entire screen using WPF. The idea is to effectively create the light box style effect that we all see regularly when using assorted webpages.
The application runs full screen (no option to close, minimise, etc) and replaces the windows shell. Because of this the window needs to stretch to cover the entire of the screen.
The desired effect is to have a new window pop up covering the full screen. This window will have a translucent background with some central content that will be completely opaque. Interaction with the central content will be the only way for the user to interact with the application.
The problem that I am facing is the when AllowsTransparency is set to False the Window is not transparent, as you would expect. But when I set AllowsTransparency="True" then the window and all its contents (including the central content) is completely transparent. The new window, while invisible is there and is stopping any interaction with they system.
Has any one else encountered this problem, of windows not being visible at all when AllowsTransparence="true" is set, or even better found a solution or work around for it?
The xaml for the window is:
<Window x:Class="Views.BorderedPopupView"
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"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Background="{DynamicResource WindowBackground}" AllowsTransparency="True">
<Window.Resources>
<SolidColorBrush x:Key="TranslusentBrush" Opacity="0.1"/>
<SolidColorBrush x:Key="WindowBackground" Color="Transparent"/>
</Window.Resources>
<Viewbox StretchDirection="Both" Stretch="Fill" Margin="5,0,13,-8" >
<Grid Height="768" Width="1024" Background="{StaticResource TranslusentBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="6*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Opacity="1" Grid.Row="1" Grid.Column="1">
<ContentControl x:Name="Popup" Grid.Row="1" Grid.Column="1"/>
</Grid>
</Grid>
</Viewbox>
</Window>
I ran into something similar the other day. For some reason when you set AllowsTransparency="True" you must also specify a Width and a Height for the Window otherwise the whole thing becomes invisible.
I did the same thing you did and also set the WindowState to Maximized but the Window was no where to been seen until I specified a Width and Height.
Your Grid is appearing above your other elements in the z-order, so clicks will be intercepted by it. To turn hit testing off for that Grid, set IsHitTestVisible="false".
If you would not resize your window try set ResizeMode="CanResizeWithGrip" or ResizeMode="NoResize" to window.
I've got a user control that I'm loading into a Window dynamically - I wanted to set the Window so that it didn't have a size and then I thought the window to resize accordingly depending on the UserControl. However it dosn't - can anyone assist please?
I've made a very basic example - I've cut out the dynamic bits and just put a UserControl in a Window. What do I need to do to get the window to be tight around the UserControl?
Thanks,
Andy
<UserControl x:Class="WpfApplication1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300" Background="LightBlue">
<Grid>
</Grid>
</UserControl>
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:WpfApplication1="clr-namespace:WpfApplication1" Title="Window1" >
<Grid>
<WpfApplication1:UserControl1>
</WpfApplication1:UserControl1>
</Grid>
</Window>
Try setting SizeToContent to WidthAndHeight on your Window.
See MSDN Page
Try setting either Width and Height to Auto, or setting SizeToContent = WidthAndHeight.
Once you know the size of the control, you will then have to update the size of the window. I'm unsure of any way to force the window to resize itself automatically unless you have code doing it.
Check this out for all you need to know, plus some, in order to do this.
Not sure if this will help, but I'd start by making the Window :
Height="Auto" Width="Auto"
If this alone doesn't do the trick I would add a Grid Row and Column
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
And then I would set the
<WpfApplication1:UserControl1 Grid.Row="0" Grid.Column="0" />
Not 100% sure if this will work but its worth a try as this is what I'm doing on my side and it works.
I have been trying hours to create a page (Axml) in expression blend that stays in the center of the browser yet equally reduces the white space on either side when the browser window is resized. And example is this site or most decent site on the net.
Love a code example or link. Thanks
After posting this question I immediately worked it out. Ends up being really simple in Silverlight. I was making it hard for myself.
Makte your grid the same size as your layout grid and remove width and height properties for the User Control.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightApplication2.Page"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
>
<Grid x:Name="LayoutRoot" Background="White" Width="597.5" Height="532">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="509" Margin="8.5,0,0,23" Width="579">
<Rectangle Height="65" Margin="0,8,0,0" VerticalAlignment="Top" Fill="#FFD64141" Stroke="#FF000000" HorizontalAlignment="Stretch"/>
</Grid>
</Grid>
</UserControl>