We Keep Coding

StackPanel not showing up when running UWP app (C#)

I am taking my first steps into UWP app development as I'm tired of any non-web development I do (e.g. WinForms) looking like something from 1995 no matter how I try to pretty it up.
I have been mucking around and produced using the designer, a page with an image, and a stackpanel filled with buttons. The designer view shows the stackpanel fine
And this is my XAML
<Page
x:Class="TestBed.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestBed"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Margin="48,10,0,0">
<Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
<StackPanel Orientation="Vertical" Margin="200,86,1113,247" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</StackPanel>
</Grid>
</Page>
However, when I run the app, the stackpanel doesn't show up (nor do any of the buttons inside it). I'm stumped. I tried setting the stackpanel "To Front" in terms of order, but no dice. Clearly my novice skills are showing.
Help?

It may be because you are setting the position of your controls with the margin attribute.
Try to read a bit into the different layout types like Grid StackPanel or RelativePanel.
A good introduction can be found here.
Just a basic thing you can do is something like this:
<Grid>
<Grid.RowDefinitions>
<Rowdefinition Height="*"> //The * just fills in the remaining Screen space.
<Rowdefinition Height="500"> //This Row is 500px high
<Rowdefinition Height="*"> //Fills the rest of the screen (same as first row)
<Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Height="*">
<ColumnDefinition Height="500">
<ColumnDefinition Height="2*"> //Using 2* fills double the screen as *
<Grid.ColumnDefinitions>
<StackPanel Grid.Row="1"
Grid.Column="1"> //Row and Column are 0-indexed
//Elements to stack go in here
</StackPanel>
If you need more info or a bit more detailed example just tell me. I just have to wait until I'm home to have acces to UWP code.

Your problem is here:
Margin="200,86,1113,247"
The designer things the target device has far more pixels than the actual device its running on. Dont forget these are 'effective pixels' so just because your screen may be 4k doesnt mean its 4000 pixels wide in UWP terminology.
Try here for more info
https://learn.microsoft.com/en-us/windows/uwp/design/basics/design-and-ui-intro#effective-pixels-and-scaling
To fix this in your page XAML you need to specify the width and height of the design surface (d:DesignHeight="..." d:DesignWidth="...") - like this:
<Page
x:Class="TestBed.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestBed"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

there are some editable code I'm splitting with "<--((**))-->" :
<Grid Margin="48,10,0,0" >
<Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
<StackPanel Orientation="Vertical" <--((Margin="200,86,1113,247"))--> HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</StackPanel>
</Grid>
YOUR PROBLEM
you are designing (developing) resolution is bigger than target device (window)
try this:
<Grid Margin="48,10,0,0" >
<Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</StackPanel>
</Grid>

Kinect 2.0 and WebBrowser (WPF): Interact with the web page using Kinect 2.0

I'm developing a WPF application that uses Kinect v2.0 for motion controls like grab-and-swipe and click. In this application, I have some elements:
A UserControl, which contains an Awesomium WebControl
A Window, which contains a button that creates the UserControl described above and puts it on the Window.
My problem is: although I can use the Kinect to click on the button, I can't use it to interact with the Web page loaded in the Awesomium WebControl. That is, I can't click on anything inside the WebControl, nor can I scroll the Web page.
How can I use the Kinect to interact with the WebControl?
Edit: Oops, sorry, forgot to post my code (first time asking, and it's very late here, I'm dead on my feet). Here it is:
When the button is clicked:
private void ButtonClick(object sender, RoutedEventArgs e)
{
Button senderButton = (Button)e.Source;
string name = senderButton.Name;
name = name.Remove(0, 1); //just getting some values
int i = int.Parse(name); //same as above
string url = newsUrl[i];
var aux = (WebContentBrowser)Activator.CreateInstance(typeof(WebContentBrowser));
Uri webUrl = new Uri(url);
aux.webBrowser.Source = webUrl;
this.navigationRegion.Content = aux;
this.menuButton.Visibility = System.Windows.Visibility.Visible;
kinectRegion.Focus();
this.kinectRegion.InputPointerManager.CompleteGestures();
//Window windowWeb = new WindowWeb(url);
//windowWeb.Show();
}
The XAML of the Windows mentioned on the question:
<Window x:Class="MuralDigitalKinectWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:k="http://schemas.microsoft.com/kinect/2014"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MuralDigitalKinectWPF"
mc:Ignorable="d"
Title="Mural Digital" Height="720" Width="1366" WindowStartupLocation="CenterScreen" WindowState="Maximized" >
<Window.Background>
<SolidColorBrush Color="DimGray"/>
</Window.Background>
<k:KinectRegion x:Name="kinectRegion">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="10 0 10 20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="menuButton" Background="DimGray" Height="68" Width="68" Margin="0,0,0,0" Padding="0 0 0 0" Visibility="Hidden" Click="menuButton_Click">
<Image Height="64" Width="64" Visibility="Visible" Source="Images/back-navigational-arrow-button-pointing-to-left.png" Margin="0 0 0 0"></Image>
</Button>
<k:KinectUserViewer Grid.Column="1" HorizontalAlignment="Center" Height="100" VerticalAlignment="Top"></k:KinectUserViewer>
<TextBlock Grid.Column="1" Foreground="White" HorizontalAlignment="Right" Margin="0 0 -1 0" VerticalAlignment="Bottom" FontSize="24">Mural Digital</TextBlock>
</Grid>
<ContentControl Grid.Row="1" x:Name="navigationRegion">
<Grid x:Name="kinectRegionGrid" Margin="05 05 05 05">
<ScrollViewer Grid.Row="0"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled"
k:KinectRegion.IsScrollInertiaEnabled="True">
<ItemsControl Grid.Row="0" Name="itemsControl">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel VerticalAlignment="Top" Orientation="Horizontal" Margin="0 0 0 0" Button.Click ="ButtonClick" ></WrapPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>
</ContentControl>
</Grid>
</k:KinectRegion>
The XAML of the UserControl:
<UserControl xmlns:awe="http://schemas.awesomium.com/winfx" x:Class="MuralDigitalKinectWPF.WebContentBrowser"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:k ="http://schemas.microsoft.com/kinect/2014"
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:MuralDigitalKinectWPF"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid x:Name="kinectRegionGrid">
<awe:WebControl x:Name="webBrowser" />
</Grid>

How can set absolute position on stackpanel or grid in xaml WPF

Is it possible to set my StackPanel or Grid to be position absolute like CSS.
In CSS is have property Position of the elements and can set to be relative, absolute and is working good.
In XAML can make Grid, StackPanel to use position absolute.

You have to use Canvas in order to set absolute position in WPF.
In case of buttons in a window, here is a sample :
<Window x:Class="tobedeleted.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="350" Width="525">
<Canvas>
<Button Canvas.Left="10" Canvas.Bottom="20">Bottom left</Button>
</Canvas>
</Window>
The output is :
Feel free to ask if help is needed.

Absolute positioning defeats the purpose of WPF, but I agree, sometimes there is no other way so you have two basic options.
Elements under the root grid
Elements in a canvas that is the same size as the window (as Vasilievski pointed out)
Code example:
<Window x:Class="WpfApplication1.Window3"
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:WpfApplication1"
mc:Ignorable="d"
Title="Window3" Height="300" Width="300">
<Grid>
<Rectangle Fill="Red" Width="100" Height="120"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Panel.ZIndex="13"
Margin="12,34"
/>
<Rectangle Fill="Green" Width="100" Height="120"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="24,54"
/>
<Canvas>
<Rectangle Canvas.Left="5" Canvas.Top="5" Panel.ZIndex="2" Fill="Yellow" Width="120" Height="30" />
<Rectangle Canvas.Left="25" Canvas.Top="17" Panel.ZIndex="0" Fill="Blue" Width="120" Height="30" />
</Canvas>
</Grid>
</Window>

try this.
<StackPanel>
<Canvas>
<TextBlock Canvas.Left="10" Canvas.Top="6" Text="Choose a value from combobox:" Width="180"/>
<ComboBox Canvas.Left="190" Canvas.Top="4" Width="180"></ComboBox>
</Canvas>
</StackPanel>
RESULT:

How to translate Grid without knowing the size of the surrounding container

I'm working on a windows phone 8.1 project.
I'm trying to perform an animation of my grid.
Let's see the code first.
<Page
x:Class="CityBoxApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CityBoxApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Background="#353C3F">
<Grid.RowDefinitions>
<RowDefinition Height="20*"/>
<RowDefinition Height="80*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="Test" HorizontalAlignment="Center" VerticalAlignment="Center"
FontSize="35" FontStyle="Italic"/>
<Grid Height="15"
VerticalAlignment="Bottom"
Background="#EC641A"/>
</Grid>
<Grid Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">
<Border BorderBrush="Snow" BorderThickness="3" Padding="20, 40, 20, 40">
<StackPanel>
<Button Width="280" Content="Search around me" Margin="0, 0, 0 ,25"/>
<Button Width="280" Content="Search with an address"/>
</StackPanel>
</Border>
</Grid>
</Grid>
</Page>
I've been looking at lots of stuff on google but basically the problem is that the main grid always has a size in those cases. What i'm trying to perform is basically to translate my grid (Grid.Row 1) from outside of the screen from the right to the middle of the screen like it is now. What i would like it to be able to do something that would fit any size of screen. Any advice/example or documentation on this precise subject ?
Thank you guys a lot!

Adding a background image in Windows Store Apps

Recently I started making a Windows Store App in XAML and in C#. Unfortunately I failed with adding a background png image stored in '/Assets'. Looked everywhere for any glues but I couldn't find anything helpful.
Here is my code:
<Page
x:Class="BoggleV01.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BoggleV01"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Margin="160,100" Width="1040">
<Grid.Background>
<ImageBrush ImageSource="/Assets/Background.png" Stretch="UniformToFill" />
</Grid.Background>
<StackPanel x:Name="levelsStackPanel" HorizontalAlignment="Left" Height="568" VerticalAlignment="Top" Width="260"/>
<StackPanel x:Name="playersStackPanel" HorizontalAlignment="Left" Height="568" VerticalAlignment="Top" Width="260" Margin="260,0,0,0"/>
<StackPanel x:Name="statisticsStackPanel" HorizontalAlignment="Left" Height="568" VerticalAlignment="Top" Width="260" Margin="520,0,0,0"/>
<StackPanel x:Name="settingsStackPanel" HorizontalAlignment="Left" Height="568" VerticalAlignment="Top" Width="260" Margin="780,0,0,0"/>
</Grid>
</Page>

you can use the below mentioned code
<ImageBrush ImageSource="/Applicationname;component/Assets/Background.png"
Stretch="UniformToFill" />