WebView2 mouse cursor problem on WinUI 3 Desktop project - c#

I am trying to open some games on WinUI 3 using 1.0.1083-prerelease version of WebView2 Microsoft Edge browser. When try to open some gaming websites such as ev.io it can not lock the mouse cursor and can't play the game. My simple code is as below;
<Window
x:Class="WV2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Microsoft.UI.Xaml.Controls"
xmlns:local="using:WV2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<controls:WebView2 x:Name="MyWebView" Grid.Row="0" Grid.Column="0" Source="https://ev.io"/>
</Grid>
I made lots of search on the web but couldn't find anything.
Does somebody have any idea about it ?

Related

XAML ProgressBar is blue and thin in WPF

I want to create an Indeterminate progress bar that keeps on loading until a certain task finishes. However, it currently does not look like the default progress bar that I knew, colored green and thick, even though I haven't made any changes in this regard. This is how it looks:
actual dialog
<Window x:Class="Contributor.AnalyticsSyncDialog"
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"
WindowStyle="None" WindowStartupLocation="CenterScreen" Height="70" Width="250" Background="#EEEEEE" Loaded="AnalyticsSync_OnLoaded" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Saving Components..." Height="18" Margin="5" Background="Transparent"/>
<ProgressBar x:Name="Bar" IsIndeterminate="True" Background="Transparent" Grid.Row="1" Height = "5" Margin="5,10"/>
</Grid>
</Window>
Moreover, the preview within the designer looks as I'd expect it to be.
expected dialog
What could be the cause of this discrepancy?

How to "punch a hole" in a WPF window [duplicate]

This question already has answers here:
Create a transparent hole inside a window's background - WPF
(2 answers)
Closed 3 years ago.
Im starting with WPF now, and I dont know if its possible, but it should be.
Im trying to create a fully transparent area in my form, deleting all the contents inside a rectangle (Those contents will be a AxWindowsMediaPlayer, as Shown below), and be able to see whats behind my window.
Its possible in WinForms using TransparencyKey and a Panel, but WinForms doesnt fill my needs for this project.
Example:
Another example:
this should do the trick for you:
<Window
[...]
Title="MainWindow" MinHeight="200" MinWidth="400" WindowStyle="None" AllowsTransparency="True">
<Window.OpacityMask>
<ImageBrush
ViewportUnits="RelativeToBoundingBox"
TileMode="None"
ImageSource="/Images/rect.png"
/>
</Window.OpacityMask>
<!-- many many controls-->
</Window>
WindowStyle need to be none
AllowTransparency needs to be true
And the image source is just a image with a rectagular transparent part in center. You could also draw this dinamically!
result:
<Window x:Class="WpfApp5.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:WpfApp5"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800"
WindowStyle="None"
Opacity="0.1"
AllowsTransparency="True">
</Window>
Make WindowStyle="None" and AllowsTransparency="True" to get transparent window. vary opacity to get amount of transparency
Got something like this.
<Window x:Class="WpfApp3.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800" WindowStyle="None" AllowsTransparency="True" Background="Transparent">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Fill="#66FFFFFF" Grid.Column="0" Grid.RowSpan="3"/>
<Rectangle Fill="#66FFFFFF" Grid.Column="2" Grid.RowSpan="3"/>
<Rectangle Fill="#66FFFFFF" Grid.Column="1" Grid.Row="0"/>
<Rectangle Fill="#66FFFFFF" Grid.Column="1" Grid.Row="2"/>
<Rectangle x:Name="workingRectangle" Fill="Transparent" Stroke="Red" Grid.Column="1" Grid.Row="1"/>
</Grid>
</Window>
Masking is probably the closest substitute to Windows Forms' TransparencyKey.

How to get WPF Window to autosize to content and no more

I have a dialog containing 2 TextBlocks, a Progress Bar and a cancel Button.
Here is the XAML:
<Window x:Class="WpfApplication4.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:WpfApplication4"
mc:Ignorable="d"
Title="MainWindow" Height="Auto" Width="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="txtFirst" Grid.Row="0" Margin="5" TextWrapping="Wrap">This is a really really really really long string that wraps</TextBlock>
<TextBlock x:Name="txtSecond" Grid.Row="1" Margin="5" Text="A Shorter string" TextWrapping="Wrap" MaxWidth="200"/>
<ProgressBar x:Name="prgProgress" Grid.Row="2" Margin="5" Height="20" />
<Button x:Name="btnCancel" Grid.Row="3" Margin="5" Height="25" Width="50"/>
</Grid>
</Window>
I would like the Window not to have a fixed height but auto adjust its height based on the size of its children and no more, but can’t see a way to do this. At the moment when I don’t assign anything to the Window’s height, it seems to adopt a height that is much bigger that the content.
Not sure why, or where it gets height value from? If I set Windows Height = “Auto” I get the same thing. All the heights for the RowDefinitions are set to “Auto”, which I take to mean ‘set row height to be row child height’.
You need to use SizeToContent property, check the msdn link.
Example:
<Window 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"
…
SizeToContent="WidthAndHeight">

GUI bug on hiding ribbon

I've got a strange behavior with the Microsoft ribbon library (the library which is included in .Net Framework 4.5). If I hide the complete ribbon, the areas below the ribbon tab headers look really ugly. I've build a test application and was able to reproduce this behavior (screen below)
The code of this application is very simple:
<Window x:Class="RibbonLibraryTest.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">
<Grid Background="Yellow">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Ribbon Background="White">
<RibbonTab Header="Test1"></RibbonTab>
<RibbonTab Header="Test2"></RibbonTab>
<RibbonTab Header="Test3"></RibbonTab>
<RibbonTab Header="Test4"></RibbonTab>
</Ribbon>
</Grid>
</Window>
To hide the ribbon, I double click on one of the ribbon tabs like in MS Word.
Seems to be a bug in the ribbon library. Is there a way to avoid this?

Dynamic Data Display Isoline white edges

I've got a graph that looks like this:
And I want it to look like this:
I've been using Dynamic Data Display's Isoline library for this.
The issue is that in the upper-right corner, the area is colored, even though all values in that area are 0 (hence why the isolines stop).
Does anyone know if there is a way I can adapt my .xaml file so that area will just display a white background color?
Thank you in advance,
CX
My current .xaml file looks like this:
<Window x:Class="IntensityChart.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
Title="DynamicDataDisplay Sample - Intensity Chart" WindowState="Maximized"
Icon="{x:Static d3:D3IconHelper.DynamicDataDisplayWhiteIcon}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<d3:ChartPlotter Name="plotter" Grid.Row="0" Grid.Column="1">
<d3:ViewportHostPanel>
<Image Name="image" d3:ViewportPanel.ViewportBounds="0,0,2,1.5" Stretch="Fill"/>
</d3:ViewportHostPanel>
<d3:IsolineGraph Name="isolineGraph"/>
<d3:IsolineTrackingGraph Name="trackingGraph"/>
<d3:CursorCoordinateGraph/>
<d3:CursorCoordinateGraph/>
<d3:AxisCursorGraph/>
</d3:ChartPlotter>
</Grid>
I haven't worked much with Isolines, but based on the information I DO know about it, it looks like you'll have to change the palette class you use for your graph. There is a discussion that outlines a solution on the D3 discussion board.
Discussion
You could take the advice there and create a ratio based on your data, or you could just get to the source and in your palette class, tell all 0 values to be coloured with white.

Categories