How to keep page header sticky when soft keyboard shows?

How to keep page header sticky when soft keyboard shows? - c#

I have a very simple page with a header and several textboxes in my UWP app:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Page Title!" />
<ScrollViewer Grid.Row="1" VerticalScrollMode="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Margin="20" />
<TextBox Grid.Row="1" Margin="20" />
<TextBox Grid.Row="2" Margin="20" />
<TextBox Grid.Row="3" Margin="20" />
<TextBox Grid.Row="4" Margin="20" />
</Grid>
</ScrollViewer>
</Grid>
In Windows 10 mobile, when the bottom textbox get focus and soft keyboard appears, the full content of the page is scrolling up and I don't want this. I want the header to remain visible and the scrollviewer scrolls to the textbox to keep in view.
How can I achive this?
Thanks in advance.

You can use the CommandBar and add the TextBlock into CommandBar.Content, then the header will remain visible in the page. The page xaml code should look like this,
<Page.TopAppBar>
<CommandBar Background="Transparent" OverflowButtonVisibility="Collapsed">
<CommandBar.Content>
<TextBlock Text="Page Title!" Margin="20" />
</CommandBar.Content>
</CommandBar>
</Page.TopAppBar>
<Grid>
<ScrollViewer VerticalScrollMode="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Margin="20" />
<TextBox Grid.Row="1" Margin="20" />
<TextBox Grid.Row="2" Margin="20" />
<TextBox Grid.Row="3" Margin="20" />
<TextBox Grid.Row="4" Margin="20" />
</Grid>
</ScrollViewer>
</Grid>

Related

WPF: TreeView height

I'm using a TreeView in WPF that has an explicit height set. The vertical scrollbar is cut off at the bottom (independent of whether items are bound/shown or not; I've enabled the scrollbar to be able to reproduce the problem without items attached). XAML source below.
<Window x:Class="demo.TreeViewProblem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="..."
ResizeMode="CanResizeWithGrip"
SizeToContent="WidthAndHeight">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock
Grid.Column="0"
Grid.Row="0"
Margin="5,10,5,5"
Text="Some label"/>
<TextBlock
Grid.Column="1"
Grid.Row="0"
Margin="5,10,5,5"
Text="Some value"/>
<TreeView
ScrollViewer.VerticalScrollBarVisibility="Visible"
Grid.Column="1"
Grid.Row="1"
Height="200"
MinHeight="200"
Width="300"
Margin="5,10,5,5"
VerticalAlignment="Top" />
<TextBlock
Grid.Column="0"
Grid.Row="2"
Margin="5,10,5,5"
Text="Some label"/>
<TextBox
Grid.Column="1"
Grid.Row="2"
Width="80"
Margin="5,10,5,5"
HorizontalAlignment="Left"
Text="Some value"/>
<TextBlock
Grid.Column="0"
Grid.Row="3"
Margin="5,10,5,5"
Text="Some label"/>
<TextBox
Grid.Column="1"
Grid.Row="3"
Width="80"
Margin="5,10,5,5"
HorizontalAlignment="Left"
Text="Some value"/>
<Button
HorizontalAlignment="Center"
Margin="10,10,10,10"
Content="Close"
Grid.ColumnSpan="2"
Grid.Column="0"
Grid.Row="4"/>
</Grid>
</Window>

Change the RowDefinition for the row containing your TreeView to this:
<RowDefinition Height="Auto" />
When set to "Auto", the row will calculate how much space it needs.
EDIT: Alternatively, you could set the other rows to Auto and then make your TreeView stretch instead. With this approach your window will scale nicer when the user resizes it.
From the row definitions:
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
From the tree:
<TreeView VerticalAlignment="Stretch"
... />

How to access hub section control in c#

<Hub x:Name="Hub" x:Uid="Hub" Header="Clock +" Background="Black"
SectionsInViewChanged="Hub_SectionsInViewChanged">
<HubSection Tag="0" Name="WorldClock" x:Uid="WorldClock" Header="WORLD CLOCK"
DataContext="{Binding Groups}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}" FontSize="22" >
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Style="{StaticResource SubheaderTextBlockStyle}"
Grid.Row="1" Margin="0,10,0,0" TextWrapping="Wrap"
Text="" x:Name="date_time_block"/>
</Grid>
</DataTemplate>
</HubSection>
my main concern is that in the above code there is textblock I want to know how to access that textblock in c#. I know c# but a little knew to XAML.If I put textblock outside hub section it is accessible but when I put inside hub section it is not Please help!!

TextBlock not wrapping inside grid column windows phone

I've the following xaml definition. The textblock inside the stackpanel is not wrapping.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<toolkit:PhoneTextBox x:Name="NotesText" Grid.Row="0" Grid.ColumnSpan="2" Hint="Add Notes" AcceptsReturn="True" Height="290" VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" />
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="0" >
<CheckBox x:Name="showRequester" FontSize="{StaticResource PhoneFontSizeSmall}" HorizontalAlignment="Left" />
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Left" Text="option_show_to_requester" />
</StackPanel>
<CheckBox Grid.Row="1" Grid.Column="1" Content="Mail To Technicain" FontSize="{StaticResource PhoneFontSizeSmall}" HorizontalAlignment="Right" />
</Grid>
What I should do to make it wrap ? Thanks.
Update:
Problem with the alignment when using data template for check box content.

You can solve this by Providing Width of TextBlock.

You don't need to put a checkBox and a TextBlock into a StackPanel. To make the CheckBox's content Wrap, just use ContentTemplate of CheckBox.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<toolkit:PhoneTextBox x:Name="NotesText" Grid.Row="0" Grid.ColumnSpan="2" Hint="Add Notes" AcceptsReturn="True" Height="290" VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" />
<!--Use ContentTemplate of CheckBox-->
<CheckBox Grid.Row="1" Grid.Column="0">
<CheckBox.ContentTemplate>
<DataTemplate>
<TextBlock Text="option_show_to_requester" TextWrapping="Wrap"/>
</DataTemplate>
</CheckBox.ContentTemplate>
</CheckBox>
<CheckBox Grid.Row="1" Grid.Column="1" Content="Mail To Technicain" FontSize="{StaticResource PhoneFontSizeSmall}" HorizontalAlignment="Right" />
</Grid>
for a simple example:
<Grid Grid.Row="1" x:Name="ContentRoot" Tapped="ContentRoot_Tapped">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<CheckBox Grid.Column="0">
<CheckBox.ContentTemplate>
<DataTemplate>
<TextBlock TextAlignment="Center" Text="wrap123123123123wrap" TextWrapping="Wrap"/>
</DataTemplate>
</CheckBox.ContentTemplate>
</CheckBox>
<CheckBox Grid.Column="1">
<CheckBox.ContentTemplate>
<DataTemplate>
<TextBlock Text="nowrap" TextWrapping="Wrap"/>
</DataTemplate>
</CheckBox.ContentTemplate>
</CheckBox>
</Grid>
And the run image is:

Tabcontrol in WPF C#

now I'm using the tabcontrol to arrange my UI. At the first, I put my button outside my tabcontrol; however, when I put the button into the tabcontrol, it gave message, Object reference not set to an object instance. Does anyone know why I got this message ?
edited
Below is my xaml:
<Window x:Class="StudySystem.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="UI" Height="600" Width="811" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:my="clr-namespace:StudySystem" Loaded="Window_Loaded">
<Grid Width="791">
<Grid.RowDefinitions>
<RowDefinition Height="129*" />
<RowDefinition Height="432*" />
</Grid.RowDefinitions>
<TabControl Margin="2,0,0,42">
<TabItem Header="Book Info" >
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="178*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="22*" />
</Grid.RowDefinitions>
<TextBlock Text="Book Code:" Height="25" Margin="0,15,0,45"></TextBlock>
<TextBox Name="txtCode" Grid.Column="1" Margin="2,15,0,51"
Width="148"></TextBox>
<TextBlock Grid.Row="1" Text="Title:" Margin="0,1,0,33" Height="18"></TextBlock>
<TextBox Name="txtTitle" Grid.Row="1" Grid.Column="1" Margin="2,1,148,32" Grid.ColumnSpan="2"></TextBox>
<TextBlock Grid.Row="3" Text="Author:" Margin="0,5,0,33" Height="17"></TextBlock>
<TextBox Name="txtAuthor" Grid.Row="3" Grid.Column="1" Margin="0,6,0,30"></TextBox>
<Button Content="OK" Grid.Row="4" Grid.Column="1" Margin="0,1,0,37"></Button>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Window>

I've seen this before, its code that references things in your form before you create the form. Check the order of what you are calling.

Inside Windows tag i have added this code and for me its working fine...
<Grid Width="auto">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="432*" />
</Grid.RowDefinitions>
<TabControl Grid.Row="1">
<TabItem Header="Book Info" >
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="178*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="22*" />
</Grid.RowDefinitions>
<TextBlock Text="Book Code:" Height="25" Margin="0,15,0,45"> </TextBlock>
<TextBox Name="txtCode" Grid.Column="1" Margin="2,15,0,51"
Width="148"></TextBox>
<TextBlock Grid.Row="1" Text="Title:" Margin="0,1,0,33" Height="18"></TextBlock>
<TextBox Name="txtTitle" Grid.Row="1" Grid.Column="1" Margin="2,1,148,32" Grid.ColumnSpan="2"></TextBox>
<TextBlock Grid.Row="3" Text="Author:" Margin="0,5,0,33" Height="17"></TextBlock>
<TextBox Name="txtAuthor" Grid.Row="3" Grid.Column="1" Margin="0,6,0,30"></TextBox>
<Button Content="OK" Grid.Row="4" Grid.Column="1" Margin="0,1,0,37"></Button>
</Grid>
</TabItem>
</TabControl>
</Grid>
what you have mentioned in window_loaded??

WPF Grid Splitter is not splitting

I have listviews which have been ordered up to down. I put grid splitters between each listview. But the grid splitters are not working. I could not find out why they aren't working.
My codes are below.
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Disabled" CanContentScroll="True">
<ListView Margin="1" Background="Snow" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Attributes" Grid.Column="0" Grid.Row="0" Width="55" />
<local:ListViewExt Grid.Column="0" Grid.Row="1" Height="300" MinHeight="200"/>
<GridSplitter Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ResizeBehavior="PreviousAndNext" Height="4" Margin="0,0,0,35" />
<TextBlock Text="Aktivitäten" Grid.Row="3" Width="50"/>
<local:ListViewExt Grid.Column="0" Grid.Row="4" Height="300" MinHeight="200"/>
<GridSplitter Grid.Row="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="4" Margin="0,0,0,38" />
<TextBlock Text="Projekte" Grid.Column="0" Grid.Row="6" Width="50" />
<local:ListViewExt Grid.Column="0" Grid.Row="7" Height="300" MinHeight="200"/>
<GridSplitter Grid.Row="8" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="4" Margin="0,0,0,38" />
<TextBlock Text="Akcademy" Grid.Column="0" Grid.Row="9" Width="55" />
<local:ListViewExt Grid.Column="0" Grid.Row="10" Height="300" MinHeight="200"/>
</Grid>
</ListView>
</ScrollViewer>

try giving the grid splitter a Vertical Orientation

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

How to keep page header sticky when soft keyboard shows? - c#

Related

WPF: TreeView height

How to access hub section control in c#

TextBlock not wrapping inside grid column windows phone

Tabcontrol in WPF C#

WPF Grid Splitter is not splitting

Categories

Resources