C# windows 8 app scrollview - c#

I can't seem to set up the scrollview right. I can use scrollbar scrollview or whatever, I just want the scroll function.
Code:
<ScrollViewer>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</ScrollViewer>
Not sure what I'm doing wrong.


You can only use Grid.RowDefinitions under a grid:
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</Grid>
</ScrollViewer>
I suspect that was your problem.
Simplified example:
You can use just one scroll viewer for the entire page. This scroll viewer can have a grid with several rows (or columns). Then you can add any control and assign them to a row:
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="1" Grid.Row="0" FontSize="400"/>
<TextBlock Text="2" Grid.Row="1" FontSize="400"/>
<TextBlock Text="3" Grid.Row="2" FontSize="400"/>
</Grid>
</ScrollViewer>
To Not Shift the Whole Page
You can create a grid outside the scroll viewer like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" VerticalAlignment="Top">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="1" Grid.Row="0" FontSize="400"/>
<TextBlock Text="2" Grid.Row="1" FontSize="400"/>
<TextBlock Text="3" Grid.Row="2" FontSize="400"/>
</Grid>
</ScrollViewer>
<Grid Grid.Row="1">
<TextBlock
Text="outside of ScrollView control"
Foreground="Red" FontSize="50"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
</Grid>

Related

Xamarin button broken?

I make a simple page apps like that
<ContentPage.Content>
<ScrollView>
<Grid>
<Button Clicked="test1"/>
<Button Clicked="test2"/>
</Grid>
</ScrollView>
</ContentPage.Content>
It's just an exemple, but seem the button cannot be clicked...

Set the height and width to * and set the row and column for button. The code below works well.
<ContentPage.Content>
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Clicked="test1" Grid.Row="0" Grid.Column="0" />
<Button Clicked="test2" Grid.Row="1" Grid.Column="0"/>
<Button Clicked="test3" Grid.Row="2" Grid.Column="0" />
<Button Clicked="test4" Grid.Row="3" Grid.Column="0"/>
<Button Clicked="test5" Grid.Row="4" Grid.Column="0" />
<Button Clicked="test6" Grid.Row="5" Grid.Column="0"/>
<Button Grid.Row="6" Grid.Column="0"></Button>
<Button Grid.Row="7" Grid.Column="0"></Button>
<Button Grid.Row="8" Grid.Column="0"></Button>
<Button Grid.Row="9" Grid.Column="0"></Button>
<Button Grid.Row="10" Grid.Column="0"></Button>
<Button Grid.Row="11" Grid.Column="0"></Button>
<Button Grid.Row="12" Grid.Column="0"></Button>
<Button Grid.Row="13" Grid.Column="0"></Button>
</Grid>
</ScrollView>
</ContentPage.Content>
Screenshot:

How to keep page header sticky when soft keyboard shows?

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>

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

How to make GridSplitter to resize non-adjacent rows?

I have following layout:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="4" />
<RowDefinition Height="20" MinHeight="20" MaxHeight="20" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
<GridSplitter Grid.Row="1" ResizeBehavior="PreviousAndNext" ResizeDirection="Rows" Background="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<DockPanel Grid.Row="2" x:Name="toolbox" Background="Chocolate" />
<TextBox Grid.Row="3" Height="50" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</Grid>
How to make grid splitter to adjust size between rows 0 and 3?

How about this
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Background="Blue"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
<GridSplitter Grid.Row="1" Height="4" Background="Red"
ResizeBehavior="PreviousAndNext" ResizeDirection="Rows"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
<DockPanel Grid.Row="2" Height="20" x:Name="toolbox" Background="Chocolate" />
<TextBox Grid.Row="3" Background="Blue"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</Grid>

Try this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="SkyBlue" />
<GridSplitter Grid.Row="1" Height="4" ResizeBehavior="PreviousAndNext" ResizeDirection="Rows" Background="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Grid Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Height="20" x:Name="toolbox" Background="Chocolate" />
<TextBox Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Green" />
</Grid>
</Grid>

Have a grid in grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<GridSplitter Grid.Row="1" Height="4" ResizeBehavior="PreviousAndNext" ResizeDirection="Rows" Background="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Grid Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Height="20"/>
<TextBox Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
</Grid>

Categories

Resources