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>

How to open child window in mainwindow in MMVM WPF

I have 3 screens
Mainwindow.xaml
<Window x:Class="PatientAdminTool.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Window.DataContext>
<vm:MainViewModel></vm:MainViewModel>
</Window.DataContext>
<WindowChrome.WindowChrome>
<WindowChrome
CaptionHeight="0"/>
</WindowChrome.WindowChrome>
<ContentControl >
<v:PatientWindow DataContext="{Binding PatientVM}"/>
</ContentControl>
</Window>
PatientWindow.xaml
<UserControl x:Class="PatientAdminTool.View.PatientWindow"
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:vm="clr-namespace:PatientAdminTool.ViewModel"
xmlns:v="clr-namespace:PatientAdminTool.View"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" >
<UserControl.DataContext>
<vm:PatientSelectorVM/>
</UserControl.DataContext>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" LastChildFill="True" Height="40" Background="#646161" >
<StackPanel DockPanel.Dock="Left" Orientation="Horizontal">
<TextBlock Margin=" 10,5,0,0" HorizontalAlignment="Center" Text="Patients" FontSize="16" TextAlignment="Center" VerticalAlignment="Center" Foreground="#FFFFFF"/>
</StackPanel>
<StackPanel Margin="10,10,0,0" DockPanel.Dock="Right" Background="Transparent" Orientation="Vertical" HorizontalAlignment="Right" VerticalAlignment="Top" Width="50" >
<StackPanel Background="Transparent" Orientation="Horizontal" HorizontalAlignment="Right">
<Button Focusable="False" ToolTip="Close" VerticalAlignment="Center" Background="#646161" BorderThickness="0" BorderBrush="Transparent" Padding="-4" Command="{Binding CloseCommand,Mode=TwoWay}">
<Button.Content>
<Grid Width="45" Height="23">
<TextBlock Foreground="White" Text="r" FontFamily="Marlett" FontSize="20" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
</Button.Content>
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter Content="{TemplateBinding Content}"/>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
</StackPanel>
</DockPanel>
<ContentControl Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<v:PatientSelector DataContext="{Binding PatientSelectorVM}" />
</ContentControl>
</Grid>
</UserControl>
Result should be as per the below image
I need to show the child window by using corresponding view model.
I am not getting how to do this?

You can't access UI elements (including windows) in ViewModels directly.
Just make abstraction of the functionality "Open Window". The easiest way is to use interface:
interface IDialogService
{
public void OpenWindow(BaseViewModel windowViewModel);
}
//in viewmodel:
void OpenPatientWindow_CommandExecuted()
{
var patientWindowVM = new PatientWindowViewModel())
patientWindowVM.Parameter = "This way you can pass parameters";
_dialogService.OpenWindow(patientWindowVM);
}
go here for more inspiration: Handling Dialogs in WPF with MVVM

Bind the Content property of ContentPresenter to the PatientVM property of the MainViewModel in MainWindow.xaml and use define a DataTemplate per child view/view model type:
<ContentControl Content="{Binding PatientVM}">
<ContentControl.Resources>
<DataTemplate DataType="local:PatientSelectorVM">
<v:PatientWindow />
</DataTemplate>
<DataTemplate DataType="local:ThirdScreenType">
<v:ThirdScreenView />
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
You then set the PatientVM property of the MainViewModel to a PatientSelectorVM object to display the PatientWindow view and to a ThirdScreenType object (or whatever your class is actually called) to display the other view in the ContentControl.
Make sure that the MainViewModel implements the INotifyPropertyChanged interface and raise the PropertyChanged event in the setter of the PatientVM property:
public BaseViewModel PatientVM
{
get { return _patientVM; }
set
{
patientVM = value;
OnPropertyChanged();
}
}
For you to be able to set the property to both a PatientSelectorVM object and the other type of objects, these classes should derive from the same base class or implement the same interface.

How to embed WPF Window into another Window and adjust its size via XAML or code

First of all it's my first day using Xaml so this question might be dummy for you, but i totally got lost.
Overview
My technique is that i have MainWindow.xaml and it's split into three areas (using grid columns) the columns width being set automatically.
Based on some actions in the right column, the middle column with show a page let's say Page.xaml that exists in different namespace.
What i'm seeking for
The problem is i need to set the width and height for this page to be equal the middle column width and height as it will fit this area.
Notes
I have very small experience with xaml and binding techniques.
MainWindow.Xaml
<Window
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"
WindowState="Maximized"
ResizeMode="NoResize"
WindowStartupLocation="CenterScreen"
Title="MainWindow" d:DesignWidth="1366" d:DesignHeight="768">
<Grid x:Name="MainGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.2*" x:Name="LeftColoumn" />
<ColumnDefinition Width="3*" x:Name="CenterColoumn" />
<ColumnDefinition Width=".8*" x:Name="RightColoumn" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="2">
<StackPanel Orientation="Vertical" x:Name="RightStackPanel" Background="LightGray" >
<Border BorderBrush="{x:Null}" Height="50" >
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" FontWeight="SemiBold" FontStyle="Normal" Margin="3" FontSize="20" >Others</TextBlock>
</Border>
<Expander x:Name="Expander1" Header="Others" Margin="0,0,10,0">
<Button Margin="0,0,0,0" Width="{Binding ActualWidth, ElementName=RightStackPanel}" Background="White" Content="Add" Height="50" Click="Button_Click" ></Button>
</Expander>
</StackPanel>
</ScrollViewer>
<Frame Grid.Column="0" x:Name="LeftFrame" Background="LightGray" ></Frame>
<Frame Grid.Column="1" x:Name="CenterFrame" Background="DarkGray" ></Frame>
</Grid></Window>
Other Xaml file
<Page
x:Name="Page"
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"
Title="Any" d:DesignWidth="1364" d:DesignHeight="868"
>
<Grid>
<Frame Background="DarkGray" />
</Grid></Page>
MainWindow.xaml.cs
private void Button_Click(object sender, RoutedEventArgs e)
{
Frame middleFrame=CenterColumn;
Otherxaml other=new Otherxaml();
middleFrame.Source = new Uri("OtherxamlPage.xaml", UriKind.RelativeOrAbsolute);
}

Pertinent to your code snippet, you may place the OtherxamlPage.xaml inside the central frame and set the properties of that frame like shown below:
<Frame Grid.Column="1" x:Name="CenterFrame" VerticalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" Source="OtherxamlPage.xaml" Background="DarkGray" />
You can set the Source="OtherxamlPage.xaml" dynamically in event handler, e.g. Button.Click as per your example.
Alternatively, consider the creation of WPF UserControl (re: https://msdn.microsoft.com/en-us/library/cc294992.aspx) instead of that other XAML Window (or Page) and place it directly into the grid cell. In both cases set the content "Stretch" property in order to adjust its size automatically, thus you won't need to specify it in the code.
Hope this may help.

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!

can we have a control on brightness of the screen in wp7?

How to make the screen dim after few seconds and after a tap it should be bright.Is that possible ?

For now, there is no way to control programmatically the brightness of the screen.

I guess you could get creative with it - how about putting up a partially transparent control (maybe Background="#66000000") over the whole screen when you want to dim it, and on tap on that control it gets removed? That would give you the effect you're looking for without having to go into system internals. It really depends whether you want the controls on the page to be available for interaction while the screen is dimmed.
So your Page.xaml would look like this...
<phone:PhoneApplicationPage
x:Class="ScreenDimmer.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style=" {StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style=" {StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Name="ControlStacker">
<TextBlock Text="My input 1" />
<TextBox Name="Input1Value" TextChanged="Input1Value_TextChanged" />
<TextBlock Text="My input 2" />
<TextBox Name="Input2Value" TextChanged="Input1Value_TextChanged" />
<TextBlock Text="My input 3" />
<TextBox Name="Input3Value" TextChanged="Input1Value_TextChanged" />
</StackPanel>
</Grid>
<Canvas Grid.RowSpan="2" Margin="0" Height="800" Width="480" Background="#66000000" Name="DimmerControl" MouseLeftButtonUp="DimmerControl_MouseLeftButtonUp" Visibility="Collapsed" />
</Grid>
</phone:PhoneApplicationPage>
and in your code behind, something like this...
public partial class MainPage : PhoneApplicationPage
{
DispatcherTimer dimmerTimer;
// Constructor
public MainPage()
{
InitializeComponent();
dimmerTimer = new DispatcherTimer();
dimmerTimer.Tick += dimmerTimer_Tick;
dimmerTimer.Interval = TimeSpan.FromSeconds(5);
dimmerTimer.Start();
}
void dimmerTimer_Tick(object sender, EventArgs e)
{
DimDisplay();
}
void DimDisplay()
{
DimmerControl.Visibility = System.Windows.Visibility.Visible;
}
void UndimDisplay()
{
DimmerControl.Visibility = System.Windows.Visibility.Collapsed;
}
private void DimmerControl_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
UndimDisplay();
}
private void Input1Value_TextChanged(object sender, TextChangedEventArgs e)
{
UndimDisplay();
dimmerTimer.Stop();
dimmerTimer.Start();
}
}
Note : This is a very simple proof of concept, and doesn't handle resetting the undimming timer when you do anything other than change the textbox values, but it will give you an idea. It also doesn't handle dimming the SIP, but there's not too much you can do about that other than explicitly removing focus from an input box.