We Keep Coding

UWP Navigation Pane Issues - c#

I am looking for a way to create a navigation pane using SplitView and other XAML controls.
I have tried creating something like the code below, but I failed as the controls aren't placed precisely in the center (vertically).
Also the buttons have this weird default animation that skews them when they are clicked. I want to turn it off but I don't know how.
All in all, I want to create a hamburger menu that is similar to Start menu in Windows 10 Anniversary Update. All opinions would be pretty appreciated.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView x:Name="hamburgerMenu" HorizontalAlignment="Left" Width="319" DisplayMode="CompactOverlay">
<SplitView.Pane>
<StackPanel>
<Button x:Name="HamburgerButton" Width="320" Height="48" Click="HamburgerButtonClick" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left">
<StackPanel Orientation="Horizontal" Margin="-8,0,0,0">
<TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" Margin="0,1,0,0" />
<TextBlock Text="MENU" Margin="0,0,0,0" FontWeight="Bold" />
</StackPanel>
</Button>
<Button x:Name="TasksButton" Width="320" Height="48" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left">
<StackPanel Orientation="Horizontal" Margin="-8,0,0,0">
<TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" VerticalAlignment="Center" />
<TextBlock Text="Tasks" Margin="0,0,0,0"/>
</StackPanel>
</Button>
<Button x:Name="ArchivedButton" Width="320" Height="48" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left">
<StackPanel Orientation="Horizontal" Margin="-8,0,0,0">
<TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" VerticalAlignment="Center" />
<TextBlock Text="Archived" Margin="0,0,0,0"/>
</StackPanel>
</Button>
</StackPanel>
</SplitView.Pane>
</SplitView>
</Grid>
Here is what I want to achieve:
Screenshots: http://imgur.com/a/utNmC

MessiKing's Template 10 is a good idea and will save you a lot of time. No doubt in that. But that doesn't help you learn how XAML handles controls because they are all handled already by experts. However if you want to learn how it works in pure XAML without any 3rd Party Libraries, see below.
Your XAML will look something like below
<SplitView x:Name="hamburgerMenu" HorizontalAlignment="Stretch" OpenPaneLength="150" DisplayMode="CompactOverlay" IsPaneOpen="True">
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button x:Name="HamburgerButton" Click="HamburgerButtonClick" Style="{StaticResource TextBlockButtonStyle}" FontWeight="Bold" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" >
<TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" Padding="5" />
<TextBlock Text="MENU" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/>
</StackPanel>
</Button>
<Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button x:Name="TasksButton" Style="{StaticResource TextBlockButtonStyle}" Grid.Row="1">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" Padding="5" />
<TextBlock Text="Tasks" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/>
</StackPanel>
</Button>
<Button x:Name="ArchivedButton" Style="{StaticResource TextBlockButtonStyle}" Grid.Row="2">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" Margin="5" />
<TextBlock Text="Archived" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/>
</StackPanel>
</Button>
</Grid>
</Grid>
</SplitView.Pane>
</SplitView>
Output
Now for the styling for buttons. Default Styling provided by Microsoft includes a StaticResource called TextBlockButtonStyle which will change your button styling to that of a TextBlock. Take a look at this.
Also there is a reason why I wrapped the List Items inside a Grid. because if you change
<Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Top">
to
<Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Bottom">
you will see it something like below.
Good Luck and Happy Coding.

Dziewulski,
If you want to make a hamburgerMenu, using Template 10 would save you much time.
When you install the Template 10 in visual studio, you will be easy to create a project which contained a hamburgerMenu in it.
Please refer to these videos for details:Template 10 for Windows 10 Apps
Template 10: How to Build Your Universal Windows App

try the UWP Toolkit from Microsoft. It contains a hamburger menu:
https://github.com/Microsoft/UWPCommunityToolkit

Related

I'm currently developing universal windows app as school work and I have big problem with keeping things visible to the user no matter the windows or screen size.
I made menu and frame, and they seem to resize correctly, frame keeps same distance from window border no matter the size ( as long as its empty), but the frame content just disappear when window height or width is changed, as shown below:
(grey area is the frame)
All I wish is that for example, one text box would have 25% of the frame width, some other block next 25% and so on...
I checked few solutions from MSDN and stackoverflow, but non seem to work so far.
Thanks for your help & time in advance
XAML code of my project in current state:
<Page
x:Class="Fublisher.real_program"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Fublisher"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition FromHorizontalOffset="480" />
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid x:Name="GR_STRAN" Margin="0" Padding="0">
<Grid x:Name="GR_MENU" HorizontalAlignment="Left" Width="60" d:LayoutOverrides="TopPosition, BottomPosition">
<Button x:Name="BT_MENU" Content="" VerticalAlignment="Top" HorizontalAlignment="Stretch" d:LayoutOverrides="LeftPosition, RightPosition" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" FontSize="20" Click="CL_MENU"/>
<Button x:Name="BT_MENU_DOMOV" Content="" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" d:LayoutOverrides="LeftPosition, RightPosition" Margin="0,65,0,0" FontSize="20" Click="CL_DOMOV"/>
<Button x:Name="BT_MENU_VSEBINA" Content="" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" Margin="0,130,0,0" d:LayoutOverrides="LeftPosition, RightPosition" FontSize="20" Click="CL_VSEBINA"/>
<Button x:Name="BT_MENU_ABOUT" Content="" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" d:LayoutOverrides="LeftPosition, RightPosition" FontSize="20"/>
<Button x:Name="BT_MENU_USER" Content="" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" Margin="0,0,0,65" d:LayoutOverrides="LeftPosition, RightPosition" FontSize="20"/>
<Button x:Name="BT_MENU_OBLIKA" Content="" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" Margin="0,195,0,0" d:LayoutOverrides="LeftPosition, RightPosition" FontSize="20"/>
</Grid>
<Grid x:Name="GR_VSEBINA" Margin="60,0,0,0" Background="#FFF1F1F1">
<Frame x:Name="frame6" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition" Margin="10" Background="#FFE2E2E2"/>
</Grid>
</Grid>
</Grid>
</Page>
And code of page showed in frame:
<Page
x:Class="Fublisher.home"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Fublisher"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Width="1860" Height="1080">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="1080"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0"/>
<ColumnDefinition Width="1860"/>
</Grid.ColumnDefinitions>
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition FromHorizontalOffset="480" />
</TransitionCollection>
</Grid.ChildrenTransitions>
<Viewbox Grid.ColumnSpan="2" HorizontalAlignment="Center" Height="336" VerticalAlignment="Center" Width="601">
<Grid Height="336" Width="601">
<TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="Hey!" FontSize="120" TextAlignment="Center" FontFamily="Segoe UI Light" Margin="23,0" Height="143" VerticalAlignment="Top" d:LayoutOverrides="LeftPosition, RightPosition"/>
<Button x:Name="button" Content="" FontFamily="Segoe MDL2 Assets" FontSize="53.333" VerticalAlignment="Bottom" Margin="0,0,0,66" HorizontalAlignment="Left" Background="{x:Null}" Height="99" Width="187"/>
<Button x:Name="button_Copy" Content="" HorizontalAlignment="Stretch" FontFamily="Segoe MDL2 Assets" FontSize="53.333" VerticalAlignment="Bottom" Margin="207,0,207,66" Background="{x:Null}" Height="99" d:LayoutOverrides="LeftPosition, RightPosition"/>
<Button x:Name="button_Copy1" Content="" FontFamily="Segoe MDL2 Assets" FontSize="53.333" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,1,64" Background="{x:Null}" Height="101" Width="187"/>
<TextBlock x:Name="textBlock1" TextWrapping="Wrap" Text="Write" FontSize="26.667" TextAlignment="Center" Height="46" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="187"/>
<TextBlock x:Name="textBlock1_Copy" Margin="207,0" TextWrapping="Wrap" Text="Design" FontSize="26.667" TextAlignment="Center" Height="46" VerticalAlignment="Bottom" d:LayoutOverrides="LeftPosition, RightPosition"/>
<TextBlock x:Name="textBlock1_Copy1" TextWrapping="Wrap" Text="Publish" FontSize="26.667" TextAlignment="Center" Height="46" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="187"/>
</Grid>
</Viewbox>
</Grid>
</Page>

Hardcoded widths and heights will be difficult, and probably, impossible to make work in a truly UWP App. This is why Microsoft has Design adaptive UI with adaptive panels. Much like HTML pages, objects should flow relative to each other. See the RelativePanel in the link, and then you can add code like
RelativePanel.RightOf="textBox1"
to indicate a button is to be to the RightOf textBox1, as in their example.

I'm currently programming a UWP application for my school and would like to separate some items on a StackPanel, however I have no idea how to do it, and googling only returns static methods rather than dynamic ones, meaning if the window is resize, it screws up. I am trying to move "My Account" and "Settings" to the bottom of the stackpanel bar
<Page
x:Class="G_Student.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:G_Student"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="mainGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView x:Name="navBar"
DisplayMode="CompactOverlay"
IsPaneOpen="False"
CompactPaneLength="50"
OpenPaneLength="200">
<SplitView.Pane>
<StackPanel Background = "#2b2b2b" >
Button x:Name="hamburgerButton"
FontFamily="Segoe MDL2 Assets"
Content=""
Width="50"
Height="50"
Background="#0063b1"
Foreground="#ffffff"
Click="hamburgerButton_Click"/>
<StackPanel Orientation = "Horizontal" Background="#15476e">
<Button x:Name="homeButton"
FontFamily="Segoe MDL2 Assets"
Content=""
Width="50"
Height="50"
Background="#15476e"
Foreground="#ffffff"/>
<TextBlock Text = "Home"
FontSize="14"
VerticalAlignment="Center"
Foreground="#ffffff"/>
</StackPanel>
<StackPanel Orientation = "Horizontal" Background="Transparent">
<Button x:Name="locateButton"
FontFamily="Segoe MDL2 Assets"
Content=""
Width="50"
Height="50"
Background="Transparent"
Foreground="#ffffff"/>
<TextBlock Text = "Class Finder"
FontSize="14"
VerticalAlignment="Center"
Foreground="#ffffff"/>
</StackPanel>
<StackPanel Orientation = "Horizontal" Background="Transparent">
<Button x:Name="classButton"
FontFamily="Segoe MDL2 Assets"
Content=""
Width="50"
Height="50"
Background="Transparent"
Foreground="#ffffff"/>
<TextBlock Text = "Class List"
FontSize="14"
VerticalAlignment="Center"
Foreground="#ffffff"/>
</StackPanel>
<StackPanel Orientation = "Horizontal" Background="Transparent">
<Button x:Name="daymapButton"
FontFamily="Segoe MDL2 Assets"
Content=""
Width="50"
Height="50"
Background="Transparent"
Foreground="#ffffff"/>
<TextBlock Text = "DayMap"
FontSize="14"
VerticalAlignment="Center"
Foreground="#ffffff"/>
</StackPanel>
<StackPanel Orientation = "Horizontal" Background="Transparent">
<Button x:Name="plannerButton"
FontFamily="Segoe MDL2 Assets"
Content=""
Width="50"
Height="50"
Background="Transparent"
Foreground="#ffffff"/>
<TextBlock Text = "Planner"
FontSize="14"
VerticalAlignment="Center"
Foreground="#ffffff"/>
</StackPanel>
<StackPanel Orientation = "Horizontal" Background="Transparent">
<Button x:Name="accountButton"
FontFamily="Segoe MDL2 Assets"
Content=""
Width="50"
Height="50"
Background="Transparent"
Foreground="#ffffff"/>
<TextBlock Text = "My Account"
FontSize="14"
VerticalAlignment="Center"
Foreground="#ffffff"/>
</StackPanel>
<StackPanel Orientation = "Horizontal" Background="Transparent">
<Button x:Name="settingsButton"
FontFamily="Segoe MDL2 Assets"
Content=""
Width="50"
Height="50"
Background="Transparent"
Foreground="#ffffff"/>
<TextBlock Text = "Settings"
FontSize="14"
VerticalAlignment="Center"
Foreground="#ffffff"/>
</StackPanel>
</StackPanel>
</SplitView.Pane>
</SplitView>
</Grid>
</Page>
Thanks so much in advance!

Instead of a StackPanel, you could use a Grid with RowDefinitions.
Wrap account and settings in one StackPanel (or another Grid with two auto rows) and set it as the last row that fills available space. Then alignment to bottom to have it at the position you want.
Example code:
<Grid Background="#2b2b2b">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="*" /> // fills available space
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" /> // hamburger
<StackPanel Grid.Row="1" /> // home
<StackPanel Grid.Row="2" /> // locate
<StackPanel Grid.Row="3" /> // class
<StackPanel Grid.Row="4" /> // daymap
<StackPanel Grid.Row="5" /> // planner
<StackPanel Grid.Row="6" VerticalAlignment="Bottom"> // wrapper
<StackPanel /> // account
<StackPanel /> // settings
</StackPanel>
</Grid>

After installing update 1 for Visual Studio 2015, SplitView control for UWP broken on Windows 10. As you know, SplitView have 2 sub items, an object grid and pane.
Now, an XAML error says that, "You cannot insert a object into SplitView".
I'm trying move object grid outside of SplitView. It is running at this case. However, the grid could not fitting the UI.
In addition to this, when I try adding new SplitView control to the page, it thrown a NullReferenceException.
I have not any issues like that on VS 2015 RTM. Are anyone encountered with this issue ?
Thanks...
My XAML Code is here:
<SplitView x:Name="MenuViewer" Margin="0" OpenPaneLength="200" PaneBackground="{StaticResource BorderColor}" RequestedTheme="Light" DisplayMode="CompactOverlay" FontSize="16" PaneClosing="MenuViewer_PaneClosing">
<SplitView.Pane>
<Grid x:Name="PanelGrid" ManipulationCompleted="PanelGrid_ManipulationCompleted" ManipulationMode="TranslateX">
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid x:Name="MenuButtonGrid" Margin="0" Background="{StaticResource Dark Main Color}" RequestedTheme="Light">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" Background="Transparent" Click="HamburgerButton_Click" VerticalAlignment="Center" Foreground="White" HorizontalAlignment="Center" RequestedTheme="Light" FontSize="16" Width="48" Height="48"/>
<TextBlock x:Name="MenuText" Grid.Column="1" Margin="10,12" TextWrapping="Wrap" Text="Menu" Foreground="White" RequestedTheme="Light" FontSize="16"/>
</Grid>
<Grid x:Name="MenuStack" Margin="0,10,0,0" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.Transitions>
<TransitionCollection>
<EdgeUIThemeTransition Edge="Bottom"/>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.Transitions>
<StackPanel x:Name="UserDetailPanel" Orientation="Vertical">
<Image x:Name="UserImage" Source="ms-appx:///Images/ProfileHolder.png" Width="100" Height="100" Margin="0"/>
<TextBlock x:Name="UserName" TextWrapping="Wrap" Text="" FontSize="16" Margin="10,0" TextAlignment="Center"/>
<Border x:Name="LogoutBorder" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="0,0,0,1" Margin="0,10,0,0" PointerEntered="LogoutBorder_PointerEntered" PointerExited="LogoutBorder_PointerExited" PointerPressed="LogoutBorder_PointerPressed" BorderBrush="{StaticResource TextColor}" >
<TextBlock x:Name="LogoutText" TextWrapping="Wrap" Text="Logout" Foreground="#FF777777" TextAlignment="Center"/>
</Border>
</StackPanel>
<ListView x:Name="MenuList" ItemsSource="{Binding Menu}" ItemTemplate="{StaticResource ListView_TripItemTemplate}" FontSize="16" SelectionChanged="MenuList_SelectionChanged" Margin="-10,10,0,0" Grid.Row="1" VerticalAlignment="Top" />
<ListView x:Name="MenuList_2" ItemsSource="{Binding Second_menu}" ItemTemplate="{StaticResource ListView_TripItemTemplate}" FontSize="16" VerticalAlignment="Bottom" SelectionMode="None" Margin="-10,0,0,48" Grid.Row="2" />
</Grid>
</Grid>
</SplitView.Pane>
<Grid x:Name="Main" Background="{StaticResource Background}" ManipulationMode="TranslateX" ManipulationCompleted="Main_ManipulationCompleted">
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid x:Name="Header" Margin="0" Background="{StaticResource Dark Main Color}">
<Grid.Transitions>
<TransitionCollection/>
</Grid.Transitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="64"/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition Width="64"/>
</Grid.ColumnDefinitions>
<Button x:Name="HamburgerButton2" FontFamily="Segoe MDL2 Assets" Content="" Background="Transparent" Click="HamburgerButton_Click" VerticalAlignment="Center" Margin="0" HorizontalAlignment="Center" Foreground="White" FontSize="16" RequestedTheme="Light" Visibility="Collapsed"/>
<Button x:Name="AddButton" FontFamily="Segoe MDL2 Assets" Content="" Background="Transparent" Click="AddButton_Click" VerticalAlignment="Center" Margin="0" HorizontalAlignment="Center" Foreground="White" FontSize="16" Grid.Column="3" RequestedTheme="Light" Width="64" Height="48"/>
<AutoSuggestBox x:Name="SearchBar" Grid.Column="2" VerticalAlignment="Center" Margin="10,0" PlaceholderText="Search" FontSize="16" Style="{StaticResource AutoSuggestBoxStyle_TripLog}" BorderThickness="0" QuerySubmitted="SearchBar_QuerySubmitted" Background="#B2E9E9E9">
<AutoSuggestBox.QueryIcon>
<SymbolIcon Symbol="Find"/>
</AutoSuggestBox.QueryIcon>
</AutoSuggestBox>
<Button x:Name="Search_Button" FontFamily="Segoe MDL2 Assets" Content="" Background="Transparent" Click="Search_Button_Click" VerticalAlignment="Center" Margin="0" HorizontalAlignment="Right" Foreground="White" FontSize="16" Grid.Column="2" RequestedTheme="Light" Width="64" Height="48" Visibility="Collapsed"/>
<TextBlock x:Name="Operation_Header" Margin="10,12" TextWrapping="Wrap" Text="Test" FontSize="16" Foreground="White" RequestedTheme="Light" Grid.ColumnSpan="2"/>
</Grid>
<Grid x:Name="MobileSearch_Grid" Grid.Row="1" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition/>
</Grid.RowDefinitions>
<AutoSuggestBox x:Name="SearchBar_Mobile" VerticalAlignment="Stretch" Margin="10,5" PlaceholderText="" FontSize="16" Style="{StaticResource AutoSuggestBoxStyle_TripLog}" BorderThickness="0,0,0,13" QuerySubmitted="SearchBar_QuerySubmitted" Background="#B2E9E9E9"/>
</Grid>
</Grid>
</SplitView>

Answer which comes from Microsoft Connect solves my issue. Thanks for contiributions.
Hi.
We have worked with the Windows SDK team to get this fixed in a future
version of the Windows Software Development Kit. We have a workaround
that should fix the issue for you. Please "repair" the install, by
opening "Add or remove programs," and repairing the "Windows Software
Development Kit" matching the version 10.0.10586.15.
Thank you!
Jeremiah

In my ContentDialog. On focus any element, type TextBox, the keyboard appear. When Keyboard appear, have a big margin above( so 20-30 px maybe). This space is the same height of the space allocated for Primary and Secondary Buttons. If have this margin, my content have a scrollbar and I do not want it. I have space sufficient to show all content of my dialog if remove this margin/padding of course.
This topic is related with: ContentDialog Windows 10 Mobile XAML - FullScreen - Padding
<StackPanel Orientation="Horizontal">
<TextBox x:Name="txtUser" IsSpellCheckEnabled="False"
Background="Black" Foreground="Red BorderBrush="Red" BorderThickness="1"
PlaceholderText="Digit your username"
GotFocus="txtUser_GotFocus" Style="{StaticResource TextBoxStyle}"
TextChanged="txtUser_TextChanged"
/>
<Button x:Name="MakeOff"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton x:Name="btnRegisterTwo"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button x:Name="MakeOffThree"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
</StackPanel>
</Grid>
Someone help to remove this?
Thanks

Interestingly, the ContentScrollViewer inside the style is given a fixed height during run-time, and a hack is to remove this x:Name from the ScrollViewer.
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled" Margin="{ThemeResource ContentDialogContentScrollViewerMargin}" IsTabStop="False">
Also, you will need to add the RowDefinitions back to the root panel LayoutRoot in the style.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

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.