We Keep Coding

keydown no longer working after adding a ribbon control to a wpf window

I have a strange problem, I had a WPF (with C# code behind) page with some buttons and some keydown events. Recently I've added a ribbon control to group the buttons and the keydown events aren't working any more.
The strangest thing is that if I add back any of the old buttons (outside of the ribbon) and click on it then the keydown events start working.
Thanks
<Page x:Class="Ab3d.PowerToys.Samples.SceneEditor.SceneEditor"
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:ribbon="clr-namespace:System.Windows.Controls.Ribbon;assembly=System.Windows.Controls.Ribbon"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:cameras="clr-namespace:Ab3d.Cameras;assembly=Ab3d.PowerToys"
xmlns:ab3d="clr-namespace:Ab3d.Controls;assembly=Ab3d.PowerToys"
xmlns:visuals="clr-namespace:Ab3d.Visuals;assembly=Ab3d.PowerToys"
xmlns:local="clr-namespace:Ab3d.PowerToys.Samples.SceneEditor"
mc:Ignorable="d"
d:DesignHeight="550" d:DesignWidth="800"
Title="SceneEditor" KeyDown="MainViewport_KeyDown" PreviewKeyDown="Window_PreviewKeyDown"
ShowsNavigationUI="False" >
<Page.Resources>
<BooleanToVisibilityConverter x:Key="VisibilityOfBool" />
<DiffuseMaterial x:Key="Material1" Brush ="Coral" />
</Page.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Name="OptionsGrid" Grid.Row="0" Margin="0 0 0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- THE RIBBON -->
<ribbon:Ribbon SelectedIndex="0" KeyDown="MainViewport_KeyDown">
<!-- Tab -->
<RibbonTab Header="Model" HorizontalAlignment="Left" Height="88" VerticalAlignment="Top" Width="1000">
<!-- Draw -->
<RibbonGroup Header="Draw" Height="88" Margin="0" VerticalAlignment="Top" Width="280">
<RibbonButton x:Name="Point"
Label="Point"
LargeImageSource="C:\Users\Infra-Iordanescu\source\repos\ARES\Images\PointRo.png"
HorizontalAlignment="Left"
Height="60"
Margin="0,5,0,0"
VerticalAlignment="Top"
Width="20"
Click="NewPointButton_Click"/>
<RibbonButton x:Name="NewLine"
Label="Line"
LargeImageSource="C:\Users\Infra-Iordanescu\source\repos\ARES\Images\NewLine2.png"
HorizontalAlignment="Left"
Height="60"
Margin="0,5,0,0"
VerticalAlignment="Top"
Width="20"
Click="NewLineButton_Click"/>
<RibbonButton x:Name="Arc"
Label="Arc"
LargeImageSource="C:\Users\Infra-Iordanescu\source\repos\ARES\Images\Arc2.png"
HorizontalAlignment="Left"
Height="60"
Margin="0,5,0,0"
VerticalAlignment="Top"
Width="20"
Click="NewPointButton_Click"/>
<RibbonButton x:Name="Surface"
Label="Surface"
LargeImageSource="C:\Users\Infra-Iordanescu\source\repos\ARES\Images\Surface2.png"
HorizontalAlignment="Left"
Height="60"
Margin="0,5,0,0"
VerticalAlignment="Top"
Width="20"
Click="NewPointButton_Click"/>
<RibbonButton x:Name="Volume"
Label="Volume"
LargeImageSource="C:\Users\Infra-Iordanescu\source\repos\ARES\Images\Volume2.png"
HorizontalAlignment="Left"
Height="60"
Margin="0,5,0,0"
VerticalAlignment="Top"
Width="60"
Click="NewPointButton_Click"/>
<StackPanel>
<RibbonButton x:Name="Clothoid"
SmallImageSource="C:\Users\Infra-Iordanescu\source\repos\ARES\Images\Clothoid2.png"
HorizontalAlignment="Left"
Height="20"
Margin="0,5,0,0"
VerticalAlignment="Top"
Width="22"
Click="NewPointButton_Click"/>
<RibbonButton x:Name="Spline"
SmallImageSource="C:\Users\Infra-Iordanescu\source\repos\ARES\Images\Spline2.png"
HorizontalAlignment="Left"
Height="25"
Margin="0,0,0,0"
VerticalAlignment="Top"
Width="22"
Click="NewPointButton_Click"/>
<RibbonButton x:Name="Ellipse"
SmallImageSource="C:\Users\Infra-Iordanescu\source\repos\ARES\Images\Ellipse2.png"
HorizontalAlignment="Left"
Height="24"
Margin="0,0,0,0"
VerticalAlignment="Top"
Width="22"
Click="NewPointButton_Click"/>
</StackPanel>
</RibbonGroup>
<!-- Transform -->
<RibbonGroup Header="Transform" Height="88" Margin="0" VerticalAlignment="Top" Width="140">
<StackPanel>
<RibbonButton x:Name="Move"
Label="Move"
SmallImageSource="C:\Users\Infra-Iordanescu\source\repos\ARES\Images\Move.png"
HorizontalAlignment="Left"
Height="20"
Margin="0,0,0,0"
VerticalAlignment="Top"
Width="60"
Click="NewPointButton_Click"/>
<RibbonButton x:Name="Copy"
Label="Copy"
SmallImageSource="C:\Users\Infra-Iordanescu\source\repos\ARES\Images\Copy3.png"
HorizontalAlignment="Left"
Height="30"
Margin="0,0,0,0"
VerticalAlignment="Top"
Width="60"
Click="NewPointButton_Click"/>
<RibbonButton x:Name="Rotate"
Label="Rotate"
SmallImageSource="C:\Users\Infra-Iordanescu\source\repos\ARES\Images\Rotate2.png"
HorizontalAlignment="Left"
Height="20"
Margin="0,0,0,0"
VerticalAlignment="Top"
Width="60"
Click="NewPointButton_Click"/>
</StackPanel>
<StackPanel>
<RibbonButton x:Name="Mirror"
Label="Mirror"
SmallImageSource="C:\Users\Infra-Iordanescu\source\repos\ARES\Images\Mirror.png"
HorizontalAlignment="Left"
Height="20"
Margin="10,0,0,0"
VerticalAlignment="Top"
Width="60"
Click="NewPointButton_Click"/>
<RibbonButton x:Name="Scale"
Label="Scale"
SmallImageSource="C:\Users\Infra-Iordanescu\source\repos\ARES\Images\Scale.png"
HorizontalAlignment="Left"
Height="30"
Margin="10,0,0,0"
VerticalAlignment="Top"
Width="60"
Click="NewPointButton_Click"/>
<RibbonButton x:Name="Array"
Label="Array"
SmallImageSource="C:\Users\Infra-Iordanescu\source\repos\ARES\Images\Array.png"
HorizontalAlignment="Left"
Height="20"
Margin="10,0,0,0"
VerticalAlignment="Top"
Width="60"
Click="NewPointButton_Click"/>
</StackPanel>
</RibbonGroup>
<!-- Loads -->
<RibbonGroup Header="Loads" Height="88" Margin="0" VerticalAlignment="Top" Width="160">
<RibbonButton x:Name="Nodal"
Label="Nodal"
LargeImageSource="C:\Users\Infra-Iordanescu\source\repos\ARES\Images\NoadalLoads.png"
HorizontalAlignment="Left"
Height="60"
Margin="0,5,0,0"
VerticalAlignment="Top"
Width="50"
Click="NewPointButton_Click"/>
<RibbonButton x:Name="UDL"
Label="UDL"
LargeImageSource="C:\Users\Infra-Iordanescu\source\repos\ARES\Images\UDL.png"
HorizontalAlignment="Left"
Height="60"
Margin="0,5,0,0"
VerticalAlignment="Top"
Width="50"
Click="NewPointButton_Click"/>
<RibbonButton x:Name="Face"
Label="Face"
LargeImageSource="C:\Users\Infra-Iordanescu\source\repos\ARES\Images\Face.png"
HorizontalAlignment="Left"
Height="60"
Margin="0,5,0,0"
VerticalAlignment="Top"
Width="45"
Click="NewPointButton_Click"/>
</RibbonGroup>
<RibbonGroup Header="Analysis" Height="88" Margin="0" VerticalAlignment="Top" Width="100"/>
<RibbonGroup Header="Results" Height="88" Margin="0" VerticalAlignment="Top" Width="100"/>
<RibbonGroup Header="View" Height="88" Margin="0" VerticalAlignment="Top" Width="100"/>
</RibbonTab>
<RibbonTab Header="Prop" HorizontalAlignment="Left" Height="88" VerticalAlignment="Top" Width="798"/>
</ribbon:Ribbon>
<StackPanel Grid.Column="0" Orientation="Horizontal" Margin="10 0 0 0">
<!-- <StackPanel Orientation="Vertical">
<Button Name="ResetCameraCenterButton" Content="Reset camera" ToolTip="Sets camera TargetPosition to (0,0,0)" VerticalAlignment="Center" Click="ResetCameraCenterButton_Click" Margin="0 0 5 0"/>
<Button Name="FitViewButton" Content="Fit to view" Click="FitViewButton_Click" VerticalAlignment="Center" Margin="0 5 5 0" />
</StackPanel> -->
</StackPanel>
<!-- <StackPanel Grid.Column="1" Orientation="Vertical" Margin="10 0 0 0">
<Button Name="newPoint" Content="Point" ToolTip="New Point" VerticalAlignment="Center" Click="NewPointButton_Click" Margin="0 0 5 0"/>
<Button Name="newLine" Content="Line" ToolTip="New Line (L)" VerticalAlignment="Center" Click="NewLineButton_Click" Margin="0 5 5 0"/>
</StackPanel> -->
</Grid>
<Border Name="ViewportBorder" Grid.Row="1" Background="White"
MouseMove="ViewportBorder_MouseMove" >
<Viewport3D Name="MainViewport">
<ModelVisual3D x:Name="VisualSpace" />
<visuals:WireGridVisual3D x:Name="MainWireGrid"
CenterPosition="0 0 0"
Size="200 200"
WidthCellsCount="25"
HeightCellsCount="25"
LineColor="#555555"
LineThickness="1"
MajorLinesFrequency="5"
MajorLineThickness="2"
MajorLineColor="#333333"
IsVisible="{Binding Source={x:Static local:SceneEditorContext.Current}, Path=ShowWireGrid}" />
<ModelVisual3D x:Name="ObjectsVisual" />
</Viewport3D>
</Border>
<cameras:TargetPositionCamera Name="Camera1" Grid.Row="1"
TargetPosition="0 0 0"
Heading="30" Attitude="-30" Bank="0"
Distance="300"
ShowCameraLight="Always"
TargetViewport3D="{Binding ElementName=MainViewport}"/>
<ab3d:MouseCameraController Name="MouseCameraController1" Grid.Row="1"
ShowRotationCenterMarker="True"
ZoomMode="MousePosition"
RotateCameraConditions="RightMouseButtonPressed"
MoveCameraConditions="MiddleMouseButtonPressed"
EventsSourceElement="{Binding ElementName=ViewportBorder}"
TargetCamera="{Binding ElementName=Camera1}" />
<ab3d:CameraAxisPanel Grid.Row="1" VerticalAlignment="Bottom" HorizontalAlignment="Left"
TargetCamera="{Binding ElementName=Camera1}"
Visibility="{Binding Source={x:Static local:SceneEditorContext.Current}, Path=ShowCameraAxis, Converter={StaticResource VisibilityOfBool}}"/>
<ab3d:ViewCubeCameraController Grid.Row="1" VerticalAlignment="Bottom" HorizontalAlignment="Right"
TargetCamera="{Binding ElementName=Camera1}"
Visibility="{Binding Source={x:Static local:SceneEditorContext.Current}, Path=ShowViewCubeCameraController, Converter={StaticResource VisibilityOfBool}}" />
<ab3d:MouseCameraControllerInfo Name="MouseCameraControllerInfo1" Grid.Row="1" Margin="0 5 0 0"
VerticalAlignment="Top" HorizontalAlignment="Right"
MouseCameraController="{Binding ElementName=MouseCameraController1}"
Visibility="{Binding Source={x:Static local:SceneEditorContext.Current}, Path=ShowMouseCameraControllerInfo, Converter={StaticResource VisibilityOfBool}}" />
<!-- Selection canvas -->
<Canvas Name="SelectionOverlayCanvas" Grid.Column="0" IsHitTestVisible="False">
<Rectangle Name="SelectionRectangle" Fill="#555FD3FF" Stroke="#AA5FD3FF" StrokeThickness="1" Visibility="Collapsed" />
</Canvas>
<!-- Point data tooltip -->
<Canvas Name="DataToolTipCanvas" Grid.Column="0" IsHitTestVisible="False">
<Border Name="DataToolTipBorder" BorderThickness="2" BorderBrush="Black" Background="LightGray" Visibility="Collapsed">
<StackPanel Orientation="Vertical">
<TextBlock Text="Coordinates:" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding X, StringFormat={}X:{0:N}}"/>
<TextBlock Text="{Binding Y, StringFormat={} Y:{0:N}}"/>
<TextBlock Text="{Binding Z, StringFormat={} Z:{0:N}}"/>
</StackPanel>
</StackPanel>
</Border>
</Canvas>
</Grid>
</Page>
private void MainViewport_KeyDown(object sender, KeyEventArgs e)
{
System.Diagnostics.Debug.WriteLine("KeyDown");
// ESC deselects all
if (e.Key == Key.Escape)
{
for (var i = 0; i < spheres.Count; i++)
{
spheres[i].Material = material;
spheres[i].Radius = originalRadius;
}
for (var i = 0; i < lines.Count; i++)
{
lines[i].LineColor = originalLineColor;
}
DataToolTipBorder.Visibility = Visibility.Collapsed;
this.DataContext = null;
}

The problem has been solved, by:
Loaded="Page_Loaded" Focusable="True"
and
private void Page_Loaded(object sender, RoutedEventArgs e)
{
this.Focus();
}
It seems it was a focus issue.
Thanks.

UWP C# WindowsIoT Keypad & Textblock Binding

I am testing out the keypad & textblock binding based on the UWP sample PhoneCall.
However when I run my code when pressing on the keypad, the key-pressed doesn't print on the textblock.
I did some changes from sample code. I have added ViewModels & Helpers from the samples.
Can advise where did I do wrong?
Thanks.
My XAML code as follow;
<TextBlock x:Name="KeypadDisplay" FontSize="50" TextAlignment="Right"
Text="{Binding DialerPhoneNumber.NumberToDial, Mode=OneWay}"
VerticalAlignment="Top" HorizontalAlignment="Left" Height="80" Width="300" Margin="70,20,0,0">
</TextBlock>
<Button Grid.Column="1" Grid.Row="1"
Command="{Binding ProcessDialPad}" Style="{StaticResource TextBlockButtonStyle}"
CommandParameter="1" Tag="1" HorizontalAlignment="Center" Height="30" Width="100">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<TextBlock Text="1" FontSize="18" FontWeight="Bold" Style="{StaticResource BodyTextBlockStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="2" Grid.Row="1"
Command="{Binding ProcessDialPad}" Style="{StaticResource TextBlockButtonStyle}"
CommandParameter="2" Tag="2" HorizontalAlignment="Center" Height="30" Width="100">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<TextBlock Text="2" FontSize="18" FontWeight="Bold" Style="{StaticResource BodyTextBlockStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="3" Grid.Row="1"
Command="{Binding ProcessDialPad}" Style="{StaticResource TextBlockButtonStyle}"
CommandParameter="3" Tag="3" HorizontalAlignment="Center" Height="30" Width="100">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<TextBlock Text="3" FontSize="18" FontWeight="Bold" Style="{StaticResource BodyTextBlockStyle}"/>
</StackPanel>
</Button>
Update - 03-07-2019
The processdialpad routine is as follow
public ICommand ProcessDialPad
{
get
{
if (dialPadCommand == null)
{
dialPadCommand = new RelayCommand(
this.DialPadInvoked);
}
return dialPadCommand;
}
}

I guess you miss setting the DataContext for the page to bind the model. Please check if you add the following code in your page.
DataContext = ViewModelDispatcher.DialerViewModel;
Following code works fine for me. Here i used the same code in ViewModels and Helpers from sample PhoneCall.
MainPage.xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" HorizontalAlignment="Stretch">
<Border Background="BlueViolet">
<TextBlock x:Name="KeypadDisplay" FontSize="50" TextAlignment="Right" Foreground="White"
Text="{Binding DialerPhoneNumber.NumberToDial, Mode=OneWay}"
VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="100">
</TextBlock>
</Border>
</StackPanel>
<StackPanel Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="600">
<Grid.RowDefinitions>
<RowDefinition Height="12" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="12" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="12" />
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Grid.Row="1"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="1" Tag="1" Holding="OnDialPadHolding">
<StackPanel Orientation="Vertical">
<TextBlock Text="1" Style="{StaticResource DialpadNumberStyle}"/>
<FontIcon FontFamily="Segoe MDL2 Assets"
FontWeight="ExtraLight"
Glyph=""
RenderTransformOrigin="0.5,0.5"
Height="14.8">
<FontIcon.RenderTransform>
<CompositeTransform ScaleX="1" ScaleY="1"/>
</FontIcon.RenderTransform>
</FontIcon>
</StackPanel>
</Button>
<Button Grid.Column="2" Grid.Row="1"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="2">
<StackPanel Orientation="Vertical">
<TextBlock Text="2" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="ABC" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="3" Grid.Row="1"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="3">
<StackPanel Orientation="Vertical">
<TextBlock Text="3" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="DEF" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="1" Grid.Row="2"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="4">
<StackPanel Orientation="Vertical">
<TextBlock Text="4" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="GHI" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="2" Grid.Row="2"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="5">
<StackPanel Orientation="Vertical">
<TextBlock Text="5" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="JKL" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="3" Grid.Row="2"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="6">
<StackPanel Orientation="Vertical">
<TextBlock Text="6" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="MNO" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="1" Grid.Row="3"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="7">
<StackPanel Orientation="Vertical">
<TextBlock Text="7" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="PQRS" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="2" Grid.Row="3"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="8">
<StackPanel Orientation="Vertical">
<TextBlock Text="8" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="TUV" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="3" Grid.Row="3"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="9">
<StackPanel Orientation="Vertical">
<TextBlock Text="9" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="WXYZ" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="1" Grid.Row="4"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="*" Tag="," Holding="OnDialPadHolding">
<StackPanel Orientation="Vertical">
<TextBlock Text="*" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="," Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="2" Grid.Row="4"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="0" Tag="+" Holding="OnDialPadHolding">
<StackPanel Orientation="Vertical">
<TextBlock Text="0" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="+" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="3" Grid.Row="4"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="#" Tag=";" Holding="OnDialPadHolding">
<StackPanel Orientation="Vertical">
<TextBlock Text="#" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text=";" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
</Grid>
</StackPanel>
</Grid>
MainPage.cs
public MainPage()
{
this.InitializeComponent();
DataContext = ViewModelDispatcher.DialerViewModel;
}
/// <summary>
/// Processes press and hold for the buttons that supports press and hold. E.g
/// 1 -> Voicemail
/// 0 -> +
/// * -> , (pause)
/// # -> ; (wait)
/// </summary>
private void OnDialPadHolding(object sender, Windows.UI.Xaml.Input.HoldingRoutedEventArgs e)
{
Button button = (Button)sender;
DialerViewModel vm = (DialerViewModel)DataContext;
if ((vm != null) && (e.HoldingState == Windows.UI.Input.HoldingState.Started))
{
vm.ProcessDialPadHolding.Execute(button.Tag);
}
}

WPF Scrollview UserControl

I'm trying to add an ScrollBar for my UserControl, I have a left Menu a Top bar and under the top bar is the Content where I put my UserControl so only the content need to have a ScrollBar.
I did this by Wrapping my the Code in my UserControl in <ScrollView></ScrollView>
Everything is working fine only not the Full hight not, When I set hight to Auto the content is not scrollable anymore... If I set it to 500px it works but this makes no sense why should I make my content 500px I want that the ScrollBar goes with my Windows size and be always so big like my Window.
It could be so easy microsoft (<StackPanel Scrollbar="Auto" />)...
...but why easy...
(Yes I found some Posts here with same problem but no one is resolving my problem)
<UserControl x:Class="mausys.telegram"
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:mausys"
mc:Ignorable="d" Width="Auto" Height="500">
<Grid Background="Aqua">
<ScrollViewer VerticalScrollBarVisibility="auto" >
<StackPanel Grid.Column="0" >
<TextBox x:Name="telegramtextBox" HorizontalAlignment="Left" Height="23" Margin="48,78,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
<TextBox x:Name="telegramtextBox1" HorizontalAlignment="Left" Height="23" Margin="48,153,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
<Label x:Name="telegramlabel" Content="Phone Number:" HorizontalAlignment="Left" Margin="48,52,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.219,-0.282" Width="106" Height="26"/>
<Label x:Name="telegramlabel1" Content="Verifycation Code:" HorizontalAlignment="Left" Margin="48,122,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.506,-4.269"/>
<Button x:Name="telegrambutton" Content="Verify" HorizontalAlignment="Left" Margin="173,156,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="-0.234,0.571"/>
<Button x:Name="Telegrambutton1" Content="Login" HorizontalAlignment="Left" Margin="173,78,0,0" VerticalAlignment="Top" Width="75" Click="Phone_Click" />
<Button x:Name="tglogin" Click="tglogin_Click" Content="TG LogIn" HorizontalAlignment="Left" Background="BlanchedAlmond" Width="120" Margin="277,52,323,928" />
<Button x:Name="feedy" Click="feedy_Click" Content="feedy" HorizontalAlignment="Left" Background="BlanchedAlmond" Width="120" Margin="277,13,323,967" />
<Button x:Name="tbrowser" Content="Open Browser" HorizontalAlignment="Left" Background="BlanchedAlmond" Width="120" Margin="277,86,323,894" />
<Label x:Name="telegramlabel2" Content="Telegram Account Login" HorizontalAlignment="Left" FontWeight="Bold" Margin="48,10,0,0" VerticalAlignment="Top"/>
<TabControl x:Name="tabControl" HorizontalAlignment="Left" Height="343" Margin="48,181,0,0" VerticalAlignment="Top" Width="215">
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</TabItem>
<ListBox x:Name="listBox" Height="100" Width="100"/>
</TabControl>
<ListView x:Name="listView" HorizontalAlignment="Left" Height="151" Margin="277,122,0,0" VerticalAlignment="Top" Width="134">
<ListView.View>
<GridView>
<GridViewColumn/>
</GridView>
</ListView.View>
</ListView>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="10,529,0,0" VerticalAlignment="Top" Width="300" Height="126"/>
<Button x:Name="button2" Content="Button" HorizontalAlignment="Left" Margin="10,660,0,0" VerticalAlignment="Top" Width="75" Height="330"/>
</StackPanel>
</ScrollViewer>
</Grid>
<Window x:Class="xyz.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:fa="http://schemas.fontawesome.io/icons/"
xmlns:local="clr-namespace:mausys"
xmlns:local1="clr-namespace:mausys.UserControls"
mc:Ignorable="d"
Title="mausys" Height="Auto" Width="1596" WindowStyle="SingleBorderWindow" >
<!--Status and Revisions-->
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="85" />
</WindowChrome.WindowChrome>
<Border>
<DockPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!--Menu Left-->
<!--Hover effect-->
<StackPanel Grid.Column="0" Background="#23282D" >
<Label Foreground="#9EA3A8" FontWeight="Bold" FontSize="18" HorizontalAlignment="Left" Margin="15 0 0 5" >
<StackPanel Orientation="Horizontal">
<Image Source="img/logomausys.png" Width="35" Height="32" />
<TextBlock Text="MAUSYS" />
</StackPanel>
</Label>
<Button Background="#23282D" WindowChrome.IsHitTestVisibleInChrome="True" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="Dashboard" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="Dashboard" />
</StackPanel>
</Button>
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="MLink" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Button>
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="MLink" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Button>
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="Angellist" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Button>
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="Anchor" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Button>
<!--SEPARATOR-->
<Separator Background="#9EA3A8" Margin="0 10 0 10 " />
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="AddressBook" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLinks" />
</StackPanel>
</Button>
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="CalendarPlusOutline" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Button>
<Label Foreground="#9EA3A8" FontSize="12" HorizontalAlignment="Left" Margin="5 30 0 5" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="ArrowCircleLeft" Foreground="#9EA3A8" Height="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Label>
</StackPanel>
<!--APP Content-->
<StackPanel Grid.Column="1" Background="#F1F1F1" >
<!--Top Bar-->
<Grid VerticalAlignment="Top" Background="#23282D" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Center" >
<TextBlock Text="hhh" FontWeight="Bold" Foreground="#9EA3A8" Margin="6 0 0 0" />
</StackPanel>
<StackPanel Grid.Column="1" >
</StackPanel>
<StackPanel Height="31" Grid.Column="2" VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Right" >
</StackPanel>
</Grid>
<!--Window Controls & Console -->
<Grid VerticalAlignment="Top" Background="#0073AA" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel WindowChrome.IsHitTestVisibleInChrome="True" Grid.Column="0" VerticalAlignment="Center" >
<Button Content="ADD NEW" Width="70" Height="50" HorizontalAlignment="Left" Margin="10 0 0 0" />
</StackPanel>
<StackPanel Grid.Column="1" >
</StackPanel>
<StackPanel Grid.Column="2" WindowChrome.IsHitTestVisibleInChrome="True" Height="60" VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Right" >
<Button fa:Awesome.Content="WindowMinimize" Foreground="#0073AA" Background="White" Content="_" Height="31" Width="31" Margin="3" Name="MinimizeButton" Click="MinimizeButton_Click" />
<Button fa:Awesome.Content="WindowMaximize" Foreground="#0073AA" Background="White" Content="[]" Height="31" Width="31" Margin="3" Name="MaximizeButton" Click="MaximizeButton_Click" />
<Button fa:Awesome.Content="Close" Foreground="#0073AA" Background="White" Content="X" Height="31" Width="31" Margin="3 3 20 3" Name="CloseButton" Click="CloseButton_Click" />
</StackPanel>
</Grid>
<!--Window Controls & Console -->
<Grid VerticalAlignment="Top" Background="Beige">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Center" >
<!--local:telegram />-->
</StackPanel>
</Grid>
<!--User Controls HERE ARE THE USER CONTROLS-->
<local:telegram />
</StackPanel>
</Grid>
</DockPanel>
</Border>

I dont understand xaml alignment

So I struggle with the XAML alignment a bit and I hoped for someone who could help me get trough it.
This is the Code. I will break it down below:
<Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="0">
<StackPanel>
<Button Style="{StaticResource AppBarButtonStyle}" Click="ShowPopupOffsetClicked"/>
<Image Source="Assets/images/icon_thumbnail.png"></Image>
</StackPanel>
<Popup VerticalOffset="60" HorizontalOffset="0" x:Name="StandardPopup">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="300" Height="350">
<StackPanel >
<TextBlock>
<Run x:Name="MyRun" Text=""/>
</TextBlock>
<StackPanel Orientation="Horizontal">
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBox x:Name="searchTextBox" Width="200" Height="30" />
</StackPanel>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Top">
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</StackPanel>
</Border>
</Popup>
</Grid>
This part will be MyRun Text later:
<TextBlock>
<Run x:Name="MyRun" Text=""/>
</TextBlock>
This part is the SearchBar and the search-button which should be perfectly in line. How do I do this?
<StackPanel Orientation="Horizontal">
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBox x:Name="searchTextBox" Width="200" Height="30" />
</StackPanel>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Top">
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
</StackPanel>
This is the next and previous button. It should be perfectly in line with MyRun. How would I do that?
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
And at last will be the "Close" Button. I guess it is kinda already perfect?:
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
Now a screenshot of how it Looks like and how I want it to look:
This is how it is:
This is how I want it to be:
I know that I can Change the height of the popup. But when I Change the height some Things disappear (for example the close Botton won't be visible because it is too far down while the popup height is too low).
Sorry for the long post. I hope someone can help me out here.

You should be able to use a Grid with three RowDefinitions. Something like this:
<Popup VerticalOffset="60" HorizontalOffset="0" x:Name="StandardPopup">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="300" Height="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- row 1 -->
<StackPanel Orientation="Horizontal">
<TextBox x:Name="searchTextBox" Width="200" Height="30" Margin="0,0,3,0" />
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
<!-- row 2 -->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
<TextBlock Grid.Column="1" HorizontalAlignment="Center">
<Run x:Name="MyRun" Text=""/>
</TextBlock>
</Grid>
<!-- row 3 -->
<Button Grid.Row="2"
Content="Close" Click="ClosePopupClicked"
HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</Grid>
</Border>
</Popup>
You can adjust the space between the controls using the Margin property.

<view:Content ...> tags in XAML

I inherited some code where I've seen this construction, which I'm not used to, in several locations:
<view:Content x:Name="TimeFrame" Margin="220,50,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" >
<view:Content.ChildContent>
<view:TimeFrame />
</view:Content.ChildContent>
</view:Content>
Which I must admit seems rather nifty, and thus far works as I want it too. However, then there's this where instead of the <view:TimeFrame />-tag in the center there are a regular control-tags like so:
<view:Content x:Name="SignInControl" Margin="466,317,0,0" HorizontalAlignment="Left" Width="348" Height="344" VerticalAlignment="Top">
<view:Content.ChildContent>
<Grid>
<Border CornerRadius="8,8,0,0" BorderThickness="1" Width="270" Height="300" Background="#666666" Margin="1,0,-1,0" Opacity="0.57" >
<Border.Effect>
<BlurEffect/>
</Border.Effect>
</Border>
<Border CornerRadius="8,8,0,0" BorderThickness="1" Width="270" Height="300" Background="#FFF3F5F4">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
<RowDefinition Height="100"/>
<RowDefinition Height="25"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="ChartWizz" FontFamily="Verdana" FontSize="10" Margin="0,3,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
<ToggleButton Style="{StaticResource up_down}" Checked="ToggleButton_Checked" />
<Image Source="Pictures/logo_250.png" Margin="5" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" />
<StackPanel Width="210" Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center" >
<TextBlock Text="Change User or" Margin="0,0,3,0" FontFamily="Verdana" FontSize="11" />
<Button Style="{StaticResource LinkButton}" Click="CreateNewAccLink_Click" Margin="2, 0, 0, 0">
<TextBlock Text="Create new account" FontFamily="Verdana" FontSize="11" Foreground="Black" TextDecorations="Underline"/>
</Button>
</StackPanel>
<StackPanel Grid.Row="3" Orientation="Vertical" HorizontalAlignment="Center" >
<TextBlock Text="Username" FontFamily="Verdana" FontSize="10" Margin="0,0,0,3" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBox Width="210" Height="20" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Grid.Row="4" Orientation="Vertical" HorizontalAlignment="Center" >
<TextBlock Text="Password" FontFamily="Verdana" FontSize="10" Margin="0,4,0,3" HorizontalAlignment="Left" VerticalAlignment="Center" />
<PasswordBox Width="210" Height="20" HorizontalAlignment="Left" />
</StackPanel>
<Grid Grid.Row="5" HorizontalAlignment="Left" >
<Button Style="{StaticResource LinkButton}" Click="ForgotPassLink_Click" Margin="2, 0, 0, 0" HorizontalAlignment="Left">
<TextBlock Text="Forgot your password?" Width="Auto" Foreground="Black" TextDecorations="Underline" FontFamily="Verdana" FontSize="10" Margin="27,5,0,3" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Button>
</Grid>
<StackPanel Grid.Row="7" Width="210" Margin="0,5,0,0" Orientation="Horizontal" HorizontalAlignment="Center" >
<CheckBox Content="Remember me" FontFamily="Verdana" FontSize="10" Margin="0,4,0,3" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Button Width="60" Content="Sign in" Height="23" Margin="55,0,0,0" VerticalAlignment="Center" Click="SiginBtn_Click" />
</StackPanel>
</Grid>
</Border>
</Grid>
</view:Content.ChildContent>
</view:Content>
When I attempted to give the controls here names so that I could access them in code I got the following error:
Cannot set Name attribute value 'txtBox_username' on element 'TextBox'. 'TextBox' is under the scope of element 'Content', which already had a name registered when it was defined in another scope.
I don't know if it's possible to access these members in some other way through the Content scope but if anyone would enlighten me I would be grateful. Either way I'd really like a link to a relevant MSDN page(or other resource) as I can't seem to figure out what to search for in order to learn more about type tags.
Thanks

This behaviour is caused by how UserControls are implemented, see this question for workarounds.