i need a registeration form within my application, i need scrolling so i did the following
<ScrollViewer VerticalScrollBarVisibility="Visible" Height="780" MaxHeight="1800"
MaxWidth="477" VerticalAlignment="Top">
<ScrollViewer.Content>
<Grid Width="477" Height="728" MaxHeight="1800">
<!-- .......Form's Elements..... -->
</Grid>
</ScrollViewer.Content>
</ScrollViewer>
there is no scrolling, what am i missing?
You shouldn't set the height properties when working with a ScrollViewer. If you strip it down to just the following and it still doesn't work, then it is something else in your project that is preventing it to work.
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="Hello" FontSize="320" />
<TextBlock Grid.Row="1" Text="World" FontSize="320" />
</Grid>
</ScrollViewer>
Remove the ScrollViewer.Content - part, I have an app that has this structure and it works fine:
<ScrollViewer x:Name="ContentScrollViewer" Margin="0,0,0,8">
<Grid Height="562">
<!-- My elements -->
</Grid>
</ScrollViewer>
Your scrollviewer has a height of 780 and your grid is only 728. Why would there be any scrolling? You'll only be able to scroll if the grid is higher than 780.
Related
I have a pretty simple page with a header, a footer, and scrollable content. My iOS and UWP app seems to work fine. When I enter the page iOS and UWP starts with the ScrollView Scrolled at the top, but Android seems to scroll down until you can see at least one button.
My page looks something like this (Header, big scrollable content and footer):
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Height="64"
Background="Blue">
<TextBlock Text="Header"
Margin="20" />
</Grid>
<ScrollViewer Grid.Row="1">
<StackPanel>
<TextBlock Text="Top"
VerticalAlignment="Top"
Height="500" />
<TextBlock Text="Content"
FontSize="66"
Margin="0,0,0,300" />
<Button Content="button"
Margin="0,0,0,300"/>
<TextBlock Text="Bottom"
VerticalAlignment="Bottom" />
</StackPanel>
</ScrollViewer>
<Grid Height="44"
Background="Green"
Grid.Row="2">
<TextBlock Text="Footer"
Margin="10" />
</Grid>
</Grid>
This arises from an interaction between the native Android scroll viewer (which is implicitly nested inside the Xaml ScrollViewer), which tries to scroll elements into view when they receive focus, and the Button, which takes focus when the Page first loads.
As a workaround to disable this behavior, you can use the BringIntoViewOnFocusChange property:
<ScrollViewer Grid.Row="1"
BringIntoViewOnFocusChange="False">
<StackPanel>
<TextBlock Text="Top"
VerticalAlignment="Top"
Height="500" />
<TextBlock Text="Content"
FontSize="66"
Margin="0,0,0,300" />
<Button Content="button"
Margin="0,0,0,300"/>
<TextBlock Text="Bottom"
VerticalAlignment="Bottom" />
</StackPanel>
</ScrollViewer>
<DataTemplate>
<ScrollViewer>
<Grid>
... same rows and controls 20% of screen
</Grid>
<ListView>
</ListView>
</ScrollViewer>
</DataTemplate>
With this template there are
fixed Grid first
scrollable ListView second
How create template with
scrollable ListView at top
fixed Grid at bottom
?
P.S. There are online or compiled demo different xaml layout/templates?
Don't put a ListView inside a ScrollViewer because you will lose virtualization if you are using it, which will degrade performance significantly.
If you want the Grid to always be visible then use the following:
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0"/>
<Grid Grid.Row="1" Height="100"/> <!-- Set any fixed height -->
</Grid>
</DataTemplate>
If you want the Grid to scroll with the list use a Footer:
<DataTemplate>
<ListView>
<ListView.Footer>
<!-- Set any fixed height -->
<Grid Height="100"/>
</ListView.Footer>
</ListView>
</DataTemplate>
I have a TextBlock inside a ScrollViewer which resides inside a HubSection. "Summary" binding has a long text so I want it to wrap at the end of the line but it doesn't wrap and the HubSection stretches as wide as the text inside TextBlock. I have tried to set the HorizontalScrollMode to disabled without any success. I also tried putting the TextBlock inside the grid instead of outside it such that it wraps the summary TextBlock. Again this didn't solve my problem.
I can give a width to HubSection but I want my application to work in different resolutions without a problem so I don't want to do that.
I have been trying to find an answer to this problem without any success.
Thanks for your answers in advance.
<HubSection x:Uid="MyHubSection" Header="{Binding Path=DisplayName}" Width="Auto" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
<DataTemplate>
<ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid x:Name="MyGrid" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="40" />
<RowDefinition Height="Auto" MinHeight="40" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text ="{Binding Path=Summary}" TextWrapping="Wrap" />
<TextBlock Grid.Row="1" TextWrapping="Wrap">
<Run Text="Last Edit Date " />
<Run Text="{Binding Path=LastEditDate}" />
</TextBlock>
</Grid>
</ScrollViewer>
</DataTemplate>
</HubSection>
Is there a way to dock a Windows Phone control to the bottom of a StackPanel? This is my basic layout:
<StackPanel Orientation="Vertical">
<TextBlock />
<TextBlock />
<UI:AdControl />
</StackPanel>
My StackPanel is filling up the whole window. The TextBlocks are aligned toward the top of the panel, that's what I want.
But I want the AdControl to dock at the bottom of the StackPanel (and therefore the bottom of the window).
I've found controls like DockPanel, but they seem to only work for WPF or Silverlight as far as I can tell.
This can easily be accomplished with a simple grid
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<Grid.RowDefinitions>
<StackPanel>
<TextBlock />
<TextBlock />
</StackPanel>
<UI:AdControl Grid.Row="1"/>
</Grid>
If you want exactly DockPanel for future use, make sure you look into open source implementations, there should be plenty of those out there!
In this XAML I can scroll Contents grid up and down a bit even though it does not exceed the ScrollViewer height.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="Controller" Grid.Row="0">
<controls:SearchField x:Name="Searcher" />
</Grid>
<ScrollViewer x:Name="Scroller" Grid.Row="1">
<ScrollViewer.Content>
<Grid x:Name="Contents">
<TextBlock Text="HI" />
</Grid>
</ScrollViewer.Content>
</ScrollViewer>
</Grid>
I guess it is a standard behavior of some kind but I don't like it too much. It it possible to make ScrollViewer not to scroll it's contents if they don't exceed ScrollViewer's height?