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.

Make region fullscreen in PRISM application by stretching user control

I am creating application using PRISM library. Currently i had only one region. Inside this region i put a user control with my view (as you can see below). Is just a some menu with property grid and a list to display data.
My user control:
By default my main window is full screen. When I run my application there are some remaking blank space below my user control.
Question:
How i can stretch my user control to fill all available space? As on picture below
What i've done:
- My user control container currently is DockPanel i tried put it to grid and other controls
- Delete user control sizes (width and height)
- Use viewbox inside shell.xaml (it destroys everything)
- Put user control to different cotainers inside shell.xaml
Currently shell.xaml is my "main window" I has only window tags with my user control.
I find similar questions on stack overflow but nothing helped me.
--- UPDATE ---
This is example of my user control code:
<UserControl x:Class="NewPrj.View.FullScreenTest"
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:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
mc:Ignorable="d">
<DockPanel Background="Blue" LastChildFill="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Menu DockPanel.Dock="Top">
<MenuItem Header="_New"/>
<MenuItem Header="_Something"/>
</Menu>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="350" />
</Grid.ColumnDefinitions>
<xctk:PropertyGrid Grid.Column = "1"
>
</xctk:PropertyGrid>
</Grid>
</DockPanel>
This is my shell.xaml window
<Window x:Class="NewPrj.Shell"
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:NewPrj"
xmlns:prism="http://www.codeplex.com/prism"
mc:Ignorable="d"
WindowState="Maximized"
Title="New Prj" MinHeight="600" MinWidth="800">
<Grid>
<ItemsControl Name="MainRegion" prism:RegionManager.RegionName="MainRegion" />
</Grid>
And this is actual result:
As I said before, there are many related topics but it does not work.

Reason:
This was not fully stretched because i use ItemsControl which use stack panel as default data template
Solution:
Change data template of ItemsControl or use User Control instead
<UserControl Name="MainRegion" prism:RegionManager.RegionName="MainRegion"/>
I found answer here

Unable to edit TextBox in a UserControl WPF

I am working on a WPF application in which a user control is loaded over main window at run time.
I have a TextBox in the UserControl which is supposed to be a editable TextBox. But I am not able to edit it using keyboard input. Whereas, i am able to set the text pragmatically.
I have refered MSDN forum regarding the issue. Still i am not able to get through. My code is similar to one in the link above.
Please share your thoughts to get this done.
Thanks in advance.
Edit:
xaml code:
<UserControl x:Class="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"
Loaded="UserControl_Loaded"
FocusManager.IsFocusScope="True"
FocusManager.FocusedElement="{Binding ElementName=TestTxt}">
<Grid FocusManager.IsFocusScope="True">
<StackPanel Orientation="Horizontal" FocusManager.IsFocusScope="True">
<TextBox x:Name="TestTxt" IsReadOnly="False" IsEnabled="True" FocusManager.IsFocusScope="True"/>
</StackPanel>
</Grid>

In UserControl_Loaded add TestTxt.Focus();

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.

XAML: Grid Cell Overflow

I am trying to figure out a way that I can layout some text in a Grid, and have the contents of each cell overflow their borders. However it seems that I can't get this to happen, and I was hoping someone knew what to do about it.
Here is an example of some code. You can see that I included some 'ClipToBounds' properties to no avail. The layout is the same with or without them. Is what I am trying to do even possible?
<Window x:Class="WpfApplication2.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 ClipToBounds="False">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock FontSize="50" Text="proper queen jelly" Margin="50,50,0,0" ClipToBounds="False"/>
</Grid>
</Window>
I guess it is also worth mentioning that I will eventually attempt to port the app so that it is compatible with "Windows Store Apps" in the near future. I know there are some slight differences between that and WPF, so I guess I was wondering how this would work for both.

I'm not sure if I got your point, but perhaps you are looking for the Grid.RowSpan attribute. Your textblock will look like this:
<TextBlock Grid.RowSpan="2" FontSize="50" Text="proper queen jelly" Margin="50,50,0,0" ClipToBounds="False"/>