We Keep Coding

How to use Webview2.Effect

BACKGROUND: We are using light projectors to display our application. Light projectors can be used just like displays. Projectors, however induce distortions that are corrected using geometric warping. We create shaders using the Shader properties provided on the UIElement class in WPF to do the geometric corrective warping. We have a handle on all that.
PROBLEM: All UIElement visuals are properly corrected on the projector screen -- except on the WebView2 UIElement. I have come to the conclusion that the Effect property of the WebView2 class doesn't work.
THIS WORKS: (No Webview2)
<Grid>
<Rectangle x:Name="Grid0" Height="800" Width="1280">
<Rectangle.Fill>
<ImageBrush x:Name="ProjectorLut" />
</Rectangle.Fill>
</Rectangle>
<Canvas Height="800" Width="1280" >
<Image ImageSource="BoundToRenderBitmpapSource" Height="800" Width="1280"/>
<Canvas.Effect>
<local:CalibrationEffect>
<local:CalibrationEffect.Input2>
<VisualBrush Visual="{Binding ElementName=Grid0}" />
</local:CalibrationEffect.Input2>
</local:CalibrationEffect>
</Canvas.Effect>
</Canvas>
</Grid>
THIS DOESN'T WORK
<Grid>
<Rectangle x:Name="Grid0" Height="800" Width="1280">
<Rectangle.Fill>
<ImageBrush x:Name="ProjectorLut" />
</Rectangle.Fill>
</Rectangle>
<Canvas Height="800" Width="1280" >
<wv2:WebView2 Name="webView" Source="https://earth.google.com" Height="800" Width="1280" >
</wv2:WebView2>
<Canvas.Effect>
<local:CalibrationEffect>
<local:CalibrationEffect.Input2>
<VisualBrush Visual="{Binding ElementName=Grid0}" />
</local:CalibrationEffect.Input2>
</local:CalibrationEffect>
</Canvas.Effect>
</Canvas>
</Grid>
So I tried something different. I replaced the XAML code for WebView2 with an image class bound to a RenderTargetBitmap generated imagesource rendered by creating the RenderTargetBitmap imagesource in code behind. That doesn't work for me either.
QUESTION: How can I look at this problem differently or am I doing something I need to look at more deeply?
I am using Desptop WPF and I appreciate your help.

ViewportControl and Images - how to avoid endless scrolling

I am coding a kind of map (for a very simple game) which is (for now) an image.
I want the user to be able to scroll the image around and resize it.
I tried a lot around, and currently i am using the ViewportControl, and the XAML looks more or less like the following (see below).
I works as it does all i need - BUT the image itself can be scrolled within the ViewportControll without any boundaries. As a result the image scrolls away.
Question: is there any way to prevent the Viewportcontroll to scroll the image out of a specified region?
<ViewportControl x:Name="viewport" Height="600" Width="440">
<Canvas x:Name="ParentCanvas" Background="Red" MaxHeight="600" MaxWidth="440">
<Image x:Name="MapImage" Source="/Artwork/map.png" RenderTransformOrigin="0.2,0.2" Stretch="UniformToFill" HorizontalAlignment="Left" VerticalAlignment="Center" Canvas.Left="-200" Canvas.Top="-300" Width="1320" Height="1800">
<Image.RenderTransform>
<CompositeTransform x:Name="transform" />
</Image.RenderTransform>
</Image>
<tk:GestureService.GestureListener>
<tk:GestureListener PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" />
</tk:GestureService.GestureListener>
</Canvas>
</ViewportControl>

After testing around i have a solution for my problem.
The most important part is to add the Bounds-tag to the ViewportControl as you can see below.
The scrolling is then handled by the ViewportControl itself. The pinch-gesture must be done manually, but it is possible, because the events will reach the correct UI-Element (here: the image).
In the example below, i used the Windows Phone Toolkit to handle the event more easily.
<ViewportControl x:Name="viewportCtrl" ScrollViewer.VerticalScrollBarVisibility="Visible" VerticalContentAlignment="Center" Bounds="0,0,1320,1800">
<Canvas x:Name="ParentCanvas" Background="Red" Height="1000" Width="800">
<Image x:Name="MapImage" Source="/Artwork/map.png" RenderTransformOrigin="0.2,0.2" >
<Image.RenderTransform>
<CompositeTransform x:Name="transform" />
</Image.RenderTransform>
</Image>
<Canvas x:Name="BlueCanvas" Top="100" Left="200" Background="Blue" Height="180" Width="180"></Canvas>
<tk:GestureService.GestureListener>
<tk:GestureListener PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" />
</tk:GestureService.GestureListener>
</Canvas>
</ViewportControl>

Why Is The Following WPF Path Cut Off

I have the following code using a WPF Path object. I got the geometry data from Syncfusion MetroStudio 2 which has lots of free icons. However, whenever I try to use them they are cut off. The icon below should show a house but is cut off within the border below. Is there something wrong with my Path?
<Grid>
<Grid.Resources>
<Geometry x:Key="HomeGeometry">M31.427,15.523L53.103,34.871 53.103,59.723C53.088,60.666 52.466,61.263 51.961,61.544 51.426,61.845 50.850,61.972 50.232,61.976L38.688,61.976C38.290,61.976 37.902,61.821 37.619,61.544 37.340,61.272 37.179,60.890 37.179,60.502L37.179,48.548 25.677,48.548 25.677,60.502C25.677,60.890 25.514,61.272 25.235,61.544 24.953,61.821 24.564,61.976 24.167,61.976L12.622,61.976C12.008,61.972 11.428,61.845 10.895,61.544 10.390,61.263 9.767,60.666 9.752,59.723L9.752,34.871z M31.430,0C32.412,0,33.395,0.347,34.172,1.042L61.536,25.469C63.191,26.947 63.306,29.454 61.791,31.072 60.273,32.685 57.703,32.796 56.048,31.319L31.427,9.342 6.806,31.319C6.024,32.015 5.043,32.358 4.067,32.358 2.964,32.358 1.868,31.925 1.065,31.072L1.062,31.066C-0.447,29.454,-0.335,26.945,1.319,25.469L28.686,1.042C29.464,0.347,30.447,0,31.430,0z
</Geometry>
</Grid.Resources>
<Border
Width="50" BorderBrush="LightBlue"
Height="50" BorderThickness="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Focusable="False">
<Path Data="{StaticResource HomeGeometry}" Fill="Red"/>
</Border>

I think what you want is
...
<Path Data="{StaticResource HomeGeometry}" Fill="Red" Stretch="Uniform"/>
...

As we can see, your border is set to Width=50 and Height=50, we clearly see that your icon is larger then that.
Your code should be:
<Border
Width="64" BorderBrush="LightBlue"
Height="64" BorderThickness="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Focusable="False">
<Path Data="{StaticResource HomeGeometry}" Fill="Red"/>
</Border>
EDIT:
Or if you want your icon to be 50x50, do what "500 - internal.." said, it will stretch your icon to 50x50 by adding Stretch="Uniform"

drawing a vertical line through a control

I have a UI like below :
Problem is at the moment the line splitting the name from the message is not visible unless the screen is filled (its basically a border on a custom control).
What I would like is for the parent control (stackpanel) to permanently have a line through it and not have to use the border on each MessageControl.
Is this possible?
Here is the code for the stackpanel :
<UserControl x:Class="ChatBoxWPF.ChatWindow"
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" d:DesignHeight="402" d:DesignWidth="700" xmlns:my="clr-namespace:ChatBoxWPF" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch">
<ScrollViewer>
<StackPanel Name="Messages" VerticalAlignment="Bottom"></StackPanel>
</ScrollViewer>
</UserControl>
UPDATE 1:
I tried this :
<ScrollViewer Name="scroll">
<StackPanel Name="Messages" VerticalAlignment="Bottom">
<Line StrokeThickness="1" X1="100" Y1="0" X2="100" Y2="{Binding ElementName=scroll, Path=ActualHeight}" />
</StackPanel>
</ScrollViewer>
Without the grid. It now sometimes shows in the designer, and other times not. And when run doesn't show at all. Do I need the grid?

A very blunt and simple approach:
<Grid>
<ScrollViewer>
<StackPanel Name="Messages" VerticalAlignment="Bottom"></StackPanel>
</ScrollViewer>
<Line StrokeThickness="0.5" X1="116" X2="116" Y1="0" Stroke="Gainsboro" Y2="{Binding ElementName=ToLevelControl, Path=ActualHeight}" />
</Grid>

I suggest you use a 2nd layer for you background - the 2nd layer could be a simple grid or anything you like:
<Grid>
<Grid ZIndex="0">
<anything I want!>
</Grid>
<ScrollViewer ZIndex="1">
<StackPanel Name="Messages" VerticalAlignment="Bottom">
</StackPanel>
</ScrollViewer>
</Grid>

Trying to WPF Tab header, need to make 3 adjustments

I want to alter the styling of some WPF tab headers. I would like to keep all the original styling of the tab headers, except for these three things -
Increase the height of the headers
Make the heights of each header the same. Normally the selected tab has a bigger height, I need the heights of both selected and unselected tabs to be the same.
Add a picture above the text on each header
Here is a before and after image of what I am looking to do -
Anyone know how to do this?

There you go, you can replace Stack panel with your nice images.
Update 1- in order to remove sizing effect when seelcting a tab you'll need to alter the TabItem style (header template is too light for it). Just get a StyleSnooper (http://blog.wpfwonderland.com/2007/01/02/wpf-tools-stylesnooper/) open it with VS2010 recompile it for .NET4, launch, navigate to TabItem and search for:
<Setter Property="FrameworkElement.Margin">
<Setter.Value>
<Thickness>
2,2,2,2</Thickness>
</Setter.Value>
</Setter>
<Setter Property="FrameworkElement.Margin" TargetName="Content">
<Setter.Value>
<Thickness>
2,2,2,2</Thickness>
</Setter.Value>
margins are the values you want to change to fix your 2. Then just put the modified version into the resources, so the app can pick it up. The style contains a lot of handy stuff you can tweak.
<Window x:Class="Immutables.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>
<TabControl TabStripPlacement="Left" x:Name="AreasTabControl" Margin="1">
<TabItem x:Name="AttributesTab">
<TabItem.HeaderTemplate>
<DataTemplate>
<Grid Width="100" Height="40">
<Border BorderThickness="1" BorderBrush="Gray" HorizontalAlignment="Left" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal">
<Rectangle VerticalAlignment="Top"
Width="5" Height="5" Fill="White" />
<Rectangle VerticalAlignment="Top"
Width="5" Height="5" Fill="Blue" />
<Rectangle VerticalAlignment="Top"
Width="5" Height="5" Fill="Red" />
</StackPanel>
</Border>
<TextBlock Margin="0,20,0,0">Go Russia!</TextBlock>
</Grid>
</DataTemplate>
</TabItem.HeaderTemplate>
</TabItem>
</TabControl>
</Grid>
</Window>