Develop Reference

UWP User Controls and Default Values

I am trying to create an UWP User Control for the first time. One very basic thing I want is automatic Width and Height at DESIGN-TIME and RUN-TIME based on the content of the user control. Simple enough in theory, but whenever I build the control and drop it on a form, it has this default "Width=100" value. Same thing with the Height.
Here is the simple XAML code i have so far:
<UserControl
x:Class="JTE.JTreeItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:JTE"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Width="Auto"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<TextBlock HorizontalAlignment="Left" Margin="10,32,0,0" Text="TextBlock" TextWrapping="Wrap" VerticalAlignment="Top"/>
</Grid>
</UserControl>
But when I drag the control from the toolbox to a page this is what I get:
<local:JTreeItem HorizontalAlignment="Left" Height="100" Margin="247,305,0,0" VerticalAlignment="Top" Width="100"/>
Both the Width and the Height are 100 by default. But why? How can I change this? This seems so simple, yet adding:
Width="Auto"
Does not solve this. Removing it does not solve it. Any value I put there gets ignored, for example, if I do this:
Width="199"
Nothing happens. I get the same 100 default value for the Width and the Height.
Why is this so not intuitive? There seems to be no syntax errors in the XAML, so what is happening there?
I am using Visual Studio Community 2019.
If any of you can help, I would appreciate it. Thanks in advance!!!
EDIT: Added a few things for clarity.

how to make wpf webview scroll like webbrowser?

I'm trying to use a Microsoft.Toolkit.Wpf.UI.Controls.WebView control in a wpf desktop application. It seems to use substantially less resouces than the webbrowser control and is much more up to date, being based on edge. However, unlike the webbrowser control, it won't scroll unless selected. i.e. When the mouse is over the webbrowser I can scroll up and down without selecting first but webview ignores the mouse wheel if it isn't the current selected control.
Using VS2019 the following code demonstrates the problem.
<Window x:Class="test0.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:WPF="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView"
Title="MainWindow" Height="600" Width="1024">
<Grid>
<StackPanel>
<Button Content="hello world" Height="100" />
<WPF:WebView Source="https://bing.com" Height="250" />
<WebBrowser Source="https://bing.com" Height="250" />
</StackPanel>
</Grid>
</Window>
On running, both browser controls will scroll when the mouse cursor is over. After clicking the button (removing the focus from either of the browsers), only the webbrowser control scrolls on mouseover.
Is there any workaround to fix this?
Using: .NET Framework 4.7.2 and Microsoft.Toolkit.Wpf.UI.Controls.WebView 5.1.1

Problem solved! But nothing to do with VS, or framework versions etc. It seems the touchpad driver doesn't play nice with the webview control under some circumstances. It was remiss of me not to mention I was using a touchpad vs a genuine mouse but it never occurred to me there would be a difference. Until I plugged in a mouse and there was no problem.
Anyway, the solution was to download and install precision touchpad drivers as per:
https://www.windowscentral.com/how-enable-precision-touchpad-drivers
Which solved the problem... Until windows decided to "update" the driver back to the old one. The only way to stop windows doing this was to disable "Automatic driver downloads" as per:
https://www.laptopmag.com/articles/disable-automatic-driver-downloads-on-windows-10
I wish I had mentioned I was using a touchpad as I suspect the problem might have been more easily reproducible for those who aren't using precision touchpad drivers.

I have created a sample page and also give code in the answer as per your requirement please review existing code and get back to me if there are any queries.
<Window x:Class="WpfApp1.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:WPF="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="720" Width="1280">
<Grid>
<StackPanel>
<Button Content="hello world" Height="100" />
<!--<WPF:WebView Source="https://learn.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-8" Height="250" />-->
<WPF:WebView Source="https://bing.com" Height="250" />
<WebBrowser Source="https://bing.com" Height="250"/>
</StackPanel>
</Grid>
Bing is a one view site so the search panel is not able to scroll even if you can directly check in on web browser.
Edit:
Can you please check your windows version and SDK as per requirements
https://learn.microsoft.com/en-us/uwp/api/windows.web.ui.interop.webviewcontrol
Windows version: 1809
SDK version: 17763
Added values:
AddInitializeScript
GotFocus
LostFocus

I do believe this is what you're looking for.
You'll want to define Row Definitions for your Grid as you see below and assign the what I assume is going to be your toolbar with "hello world" into Grid Row 0 and your web browser into Grid Row 1 rather than using the Stack Panel in this scenario (see code below).
Let me know if that helps or if you need it done a little differently I'm sure I could help you figure that out.
Grid Row Definitions - Microsoft Docs
<Window x:Class="WpfApp1.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:WPF="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800" WindowState="Maximized">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Content="hello world" Height="100" Grid.Row="0"/>
<WebBrowser Source="https://bing.com" Grid.Row="1"/>
<WPF:WebView Source="https://bing.com" Grid.Row="2"/>
</Grid>
</Window>

I have read your query and try to figure out some issues. Kindly check your windows and SDK version HERE.
Your windows version must have above or 1809
Your SDK version must have above or 17763
Please let me know in case any doubt or confusion.

How to click WPF ScrollViewer down button

Following picture shows my project.
Here is XAML code for your testing needs.
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="525">
<ScrollViewer Name="ScrollViewer1" Height="67" VerticalAlignment="Top">
<StackPanel>
<TextBox Name="TextBox1" Text="TextBox1"/>
<TextBox Name="TextBox2" Text="TextBox2"/>
<TextBox Name="TextBox3" Text="TextBox3"/>
<TextBox Name="TextBox4" Text="TextBox4"/>
<TextBox Name="TextBox5" Text="TextBox5"/>
<TextBox Name="TextBox6" Text="TextBox6"/>
</StackPanel>
</ScrollViewer>
</Window>
Following picture shows my question;
So, how to click WPF ScrollViewer down button in order to go end of ScrollViwer?

A solution could be to subscribe to the click of that button like here https://stackoverflow.com/a/4932118/6890102, then call the ScrollToEnd() method of the ScrollViewer. But there might be a better solution.

Right-Click on ScrollViewer->Edit Template->Edit a Copy, to see the Scrollviewer's Template. The ScrollViewer contains a ScrollBar. A ScrollBar contains, RepeatButton, and a Track. The RepeatButton is responsible for the up and down movement of the scrollbar. Try checking it. You may find some idea on how to implement your objective.

Why DataBinding is not propagating to UserControl

This morning I asked a question here and doing a simple working sample gave me a different behavior than expected.
Full working sample at GitHub. Main partial code below.
In this present case, the command is never propagated to any UserControl, either if the UserControl is use directly as a child of the Window. It also not work if the UserControl is used as a DataTemplate for a ListBox ItemTemplate.
I also include a hack button to fix the problem where the Command reach the UserControls. The hack come from StackOverflow.
But using the hack does not explain why UserControl does not receive the Command (without it) and using this hack also break the first rule of good coding: "Hi cohesion and Low coupling". The hack should be used in the the window code in order for it to manage the Command in the UserControl, my thought is that it should happen by default.
Why the command is not propagating by default to the UserControl and what should I do to propagate the command to the UserControl in a clean way?
Note: Using only one CommandBinding (removing one or the other) in the UserControl does not fix the problem .
Partial code:
<Window x:Class="CommandRoutingIntoItemTemplate.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:CommandRoutingIntoItemTemplate"
xmlns:system="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<local:UserControlTest></local:UserControlTest>
<ListBox Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Aqua" BorderThickness="2">
<local:UserControlTest></local:UserControlTest>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Items>
<system:String>1</system:String>
<system:String>2</system:String>
</ListBox.Items>
</ListBox>
<StackPanel Grid.Row="2" Orientation="Horizontal">
<Button Command="local:Commands.CommandTest">Put focus on TestBlock and click here to see if command occurs</Button>
<Button Click="AddHack">Hack</Button>
</StackPanel>
</Grid>
</Window>
UserControl:
<UserControl x:Class="CommandRoutingIntoItemTemplate.UserControlTest"
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"
xmlns:local="clr-namespace:CommandRoutingIntoItemTemplate"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.CommandBindings>
<CommandBinding Command="local:Commands.CommandTest" CanExecute="CommandTestCanExecuteUserControl" Executed="CommandTestExecuteUserControl"></CommandBinding>
</UserControl.CommandBindings>
<Grid>
<TextBox Text="UserControlTest">
<TextBox.CommandBindings>
<CommandBinding Command="local:Commands.CommandTest" CanExecute="CommandTestCanExecuteTextBox" Executed="CommandTestExecuteTextBox"></CommandBinding>
</TextBox.CommandBindings>
</TextBox>
</Grid>
</UserControl>

The reason that you are not getting commands invoked on your user control is that your buttons are not in separate focus scope. For WPF to pick up focused element for command target correctly, it needs to be in separate focus scope from command invoking control.
Framework will just traverse up visual tree from button looking for command bindings in their focus scope (in your case it won't find any). When framework does not find any command bindings in current focus scope, only then it looks into parent focus scope for focused element (In your case, buttons are in Window focus scope which has no parent scope so the search will end there).
Simply setting FocusManager.IsFocusScope="True" on your StackPanel will fix the issue.
You could also specify CommandTarget property on your buttons to point to your user control and not rely on focus.

The Elementhost and the Popup

I got a problem with the Windows.Forms.ElementHost. Within the host I placed a WPF UserControl, in which I got a Popup.
Some Code:
<UserControl
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="300" d:DesignWidth="380">
<Grid>
<Popup x:Name="TestPopup"
IsOpen="{Binding PopupVisible,UpdateSourceTrigger=PropertyChanged}"
Placement="Center"
StaysOpen="False" Width="200" Height="50">
<Grid>
<TextBox/>
</Grid>
</Popup>
<Button Click="Button_Click" />
</Grid>
</UserControl>
So in this example all I got is a ElementHost, a UserControl and a Popup (and a ViewModel in which the IsOpen variable PopUpVisible for the popup is implemented).
Now I got two Buttons... one in my UserControl and one in my WindowsForm with the ElementHost.
Each of the two buttons sets the IsOpen variable PopUpVisible to true. So if I push the button´s the same popup is shown. Until this point everything works fantastic.
Now I got a textbox in my popup... I click in this textbox and begin tipping some random stuff... If I push the button in my wpf usercontrol this works! But if I push the button in my WindowsForm things start to get weird! I got focus and everything on my textbox but the textbox won´t get any of my keyboard tipping. I checked and doublechecked it... I definitely got my "Keyboard Focus" on the textbox!
A bit stuck here... someone has an idea?
Kind Regards.