I have this following code on windows store app project.
<Grid x:Name="minutesGrid" Height="1000" Width="1024" Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="50"/>
<RowDefinition Height="100"/>
<RowDefinition Height="750"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1" Background="White" Height="50" Orientation="Vertical" >
<TextBlock x:Name="minutesTitle" Text="" FontFamily="Segoe UI Semilight" FontWeight="SemiLight" FontSize="24" TextAlignment="Center" Foreground="{StaticResource BrandBrush}" Margin="0,15,0,0"></TextBlock>
</StackPanel>
<StackPanel Grid.Row="2" Background="White">
<ScrollViewer HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled" VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Visible" Height="100">
<TextBlock x:Name="minutesDesc" Text="" FontFamily="Segoe UI Semilight" FontWeight="SemiLight" FontSize="24" Foreground="{StaticResource BrandBrush}" Margin="15,15,0,0" TextWrapping="WrapWholeWords"></TextBlock>
</ScrollViewer>
</StackPanel>
<StackPanel Grid.Row="3" Background="White">
<PdfViewer:SfPdfViewerControl x:Name="minutesPDF" Canvas.ZIndex="1"/>
</StackPanel>
</Grid>
And when i load the pdf it doesnt show the scrollbars or lets me do a scroll either with mousewheel or on tablet with fingers.
This is how i load my file, that is displayed correctly.
var datapdf = await objService.DownloadFileService("teste.pdf",minutes.gappFile._id);
PdfLoadedDocument pdf = new PdfLoadedDocument(Convert.FromBase64String(datapdf));
await minutesPDF.LoadDocumentAsync(pdf);
minutesPDF.ViewMode = Syncfusion.Windows.PdfViewer.PageViewMode.Normal;
Do i need to add something else?
I think that you've to remove the StackPanel and assign the Grid.Row to the PDFViewer ..
SF Ref :
http://help.syncfusion.com/winrt/pdfviewer/getting-started
Since StackPanel has a default behavior to grow in one direction, scroll of the control included in the StackPanel will not be initiated without the height property being set to it.
Please find the following link which illustrates the reason “Why the control cannot be scrolled inside StackPanel without setting its height property?”
How can I get ScrollViewer to work inside a StackPanel?
Code Snippet: XAML
<Grid x:Name="minutesGrid" Height="1000" Width="1024" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="50"/>
<RowDefinition Height="100"/>
<RowDefinition Height="750"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1" Background="White" Height="50" Orientation="Vertical" >
<TextBlock x:Name="minutesTitle" Text="" FontFamily="Segoe UI Semilight" FontWeight="SemiLight" FontSize="24" TextAlignment="Center" Foreground="{StaticResource BrandBrush}" Margin="0,15,0,0"></TextBlock>
</StackPanel>
<StackPanel Grid.Row="2" Background="White">
<ScrollViewer HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled" VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Visible" Height="100">
<TextBlock x:Name="minutesDesc" Text="" FontFamily="Segoe UI Semilight" FontWeight="SemiLight" FontSize="24" Foreground="{StaticResource BrandBrush}" TextWrapping="WrapWholeWords"/>
</ScrollViewer>
</StackPanel>
<StackPanel Grid.Row="3" Background="White">
<PdfViewer:SfPdfViewerControl x:Name="minutesPDF" Height="750" Canvas.ZIndex="1"></PdfViewer:SfPdfViewerControl>
</StackPanel>
</Grid>
Related
I've a split view (UWP) that inside a scrollviewer with horizontal scrolling enabled. The code shown below has a user control embedded with displays data in a horizontally stacked fashion. I've a header menu which upon clicked should open a split view from right to left. But, whenever there is a horizontal scrolling, the split view opened is not responsive. When i resize the window with splitview opened and horizontal scrolling enabled, I see the app not responsive. What should I do to make the split view response.
By default, I see the splitview responsive whenever there is no horizontal scrolling.
The user control (KanbanControl) shown below is basically a gridview that uses ItemsWrapGrid as it's panel template stacked horizontally
Things tried out:-
a) Tried to disable the horizontal scrolling when the split view is about to be opened, but it is of no help.
Any thoughts folks?
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto" Height="Auto"
x:Name="ContentView">
<Grid Name="ProjectKanbanGrid">
<kanban:KanbanControl x:Name="KanbanCtrl"/>
<SplitView Name="SplitViewPane"
IsPaneOpen="false"
DisplayMode="Overlay"
OpenPaneLength="500" HorizontalAlignment="Right"
FlowDirection="RightToLeft" PaneBackground="White"
BorderBrush="Red" BorderThickness="10"
PaneClosing="SplitViewPane_PaneClosing">
<SplitView.Pane>
<Border BorderThickness="1" CornerRadius="4" BorderBrush="LightGray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Background="#FAFAFB" Height="50" BorderBrush="#f0f0f0"
CornerRadius="4" BorderThickness="1">
<TextBlock Text="Edit a Task List" FontWeight="Bold"
HorizontalAlignment="Right" Margin="0,10,20,0"/>
</StackPanel>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="50"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<TextBlock Text="Task List" Foreground="Red"
HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBox Name="TaskListName" HorizontalAlignment="Right"
Margin="0,0,20,0" Grid.Row="1" VerticalAlignment="Top" BorderThickness="1"
BorderBrush="LightGray" Width="250"/>
<TextBlock Text="Related Milestone" Grid.Row="2"
HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,20,0"/>
<ComboBox Name="MilestoneList" Width="250" IsTextSearchEnabled="True" BorderThickness="1"
BorderBrush="LightGray" Grid.Row="3" Margin="0,0,20,0"
HorizontalAlignment="Right" VerticalAlignment="Center" >
<ComboBox.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<StackPanel Orientation="Horizontal" Grid.Row="4"
HorizontalAlignment="Right" Margin="0,0,20,0" VerticalAlignment="Center">
<Button Background="White" Margin="20,0,0,0" Content="Cancel" Click="Cancel_Click"/>
<Button Background="#1e5598" Foreground="White" Content="Update" Margin="5,0,0,0"/>
</StackPanel>
</Grid>
</Grid>
</Border>
</SplitView.Pane>
</SplitView>
<RelativePanel Visibility="{x:Bind kanban.IsShowResultGrid,Mode=TwoWay}"
HorizontalAlignment="Center">
<ProgressRing x:Name="LoadProgressRing"
Width="25"
Height="25"
RelativePanel.AlignVerticalCenterWithPanel="True"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"
IsActive="True" />
<TextBlock x:Name="LoadingMessage" Margin="10,0,0,0" HorizontalAlignment="Center"
Text="Fetching your project layouts"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.RightOf="LoadProgressRing"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"/>
<TextBlock x:Name="DisplayMsg" Margin="0,0,0,0"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="{x:Bind kanban.DisplayMessage,Mode=TwoWay}"/>
</RelativePanel>
</Grid>
</ScrollViewer>
Remove the outer scroll viewer from the splitview and wrap it inside the user control Kanban control. This would make the app responsive.
Code snippet is as follows
<Grid Name="ProjectKanbanGrid">
<kanban:KanbanControl x:Name="KanbanCtrl"/>
<SplitView Name="SplitViewPane"
IsPaneOpen="false"
DisplayMode="Overlay"
OpenPaneLength="500" HorizontalAlignment="Right"
FlowDirection="RightToLeft" PaneBackground="White"
BorderBrush="Red" BorderThickness="10"
PaneClosing="SplitViewPane_PaneClosing">
<SplitView.Pane>
<Border BorderThickness="1" CornerRadius="4" BorderBrush="LightGray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Background="#FAFAFB" Height="50" BorderBrush="#f0f0f0"
CornerRadius="4" BorderThickness="1">
<TextBlock Text="Edit a Task List" FontWeight="Bold"
HorizontalAlignment="Right" Margin="0,10,20,0"/>
</StackPanel>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="50"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<TextBlock Text="Task List" Foreground="Red"
HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBox Name="TaskListName" HorizontalAlignment="Right"
Margin="0,0,20,0" Grid.Row="1" VerticalAlignment="Top" BorderThickness="1"
BorderBrush="LightGray" Width="250"/>
<TextBlock Text="Related Milestone" Grid.Row="2"
HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,20,0"/>
<ComboBox Name="MilestoneList" Width="250" IsTextSearchEnabled="True" BorderThickness="1"
BorderBrush="LightGray" Grid.Row="3" Margin="0,0,20,0"
HorizontalAlignment="Right" VerticalAlignment="Center" >
<ComboBox.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<StackPanel Orientation="Horizontal" Grid.Row="4"
HorizontalAlignment="Right" Margin="0,0,20,0" VerticalAlignment="Center">
<Button Background="White" Margin="20,0,0,0" Content="Cancel" Click="Cancel_Click"/>
<Button Background="#1e5598" Foreground="White" Content="Update" Margin="5,0,0,0"/>
</StackPanel>
</Grid>
</Grid>
</Border>
</SplitView.Pane>
</SplitView>
<RelativePanel Visibility="{x:Bind kanban.IsShowResultGrid,Mode=TwoWay}"
HorizontalAlignment="Center">
<ProgressRing x:Name="LoadProgressRing"
Width="25"
Height="25"
RelativePanel.AlignVerticalCenterWithPanel="True"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"
IsActive="True" />
<TextBlock x:Name="LoadingMessage" Margin="10,0,0,0" HorizontalAlignment="Center"
Text="Fetching your project layouts"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.RightOf="LoadProgressRing"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"/>
<TextBlock x:Name="DisplayMsg" Margin="0,0,0,0"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="{x:Bind kanban.DisplayMessage,Mode=TwoWay}"/>
</RelativePanel>
</Grid>
KanbanControl.xaml
<Grid Margin="0,20,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto" Height="Auto"
x:Name="ContentView">
// Horizontally stacked listview goes here.
</ScrollViewer>
</Grid>
I´m trying to build a UWP app and I have the follow components:
MainPage:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Name="TituloStackPanel" Orientation="Horizontal">
<Button Name="HamburguerButton" Content="" FontFamily="Segoe MDL2 Assets" Height="50" Width="50" Click="HamburguerButton_Click"/>
<TextBlock Name="Titulo" Text="Estrutura de Dados" VerticalAlignment="Center" Margin="10"/>
</StackPanel>
<SplitView Name="PrincipalSplitView" DisplayMode="CompactOverlay" IsPaneOpen="False"
CompactPaneLength="50" OpenPaneLength="200" Grid.Row="1">
<SplitView.Pane>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Button Name="ListasButton" Content="L" Width="50" Height="50" Click="ListasButton_Click"/>
<TextBlock Text="Listas" VerticalAlignment="Center" Margin="10"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button Name="PilhasButton" Content="P" Width="50" Height="50"/>
<TextBlock Text="Pilhas" VerticalAlignment="Center" Margin="10"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button Name="FilasButton" Content="F" Width="50" Height="50"/>
<TextBlock Text="Filas" VerticalAlignment="Center" Margin="10"/>
</StackPanel>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<TextBlock Text="SplitView Content" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</SplitView.Content>
</SplitView>
</Grid>
The next Page will be loaded inside the Content of the SplitView.
<Page>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<ScrollViewer Background="Cyan" Grid.Column="1" VerticalScrollBarVisibility="Auto">
<RelativePanel Padding="20" MaxHeight="700" VerticalAlignment="Top">
<A lot of Components: TextBlocks, TextBoxes, RadioButtons, ... />
</RelativePanel>
</ScrollViewer>
</Grid>
</Page>
The ScrollViewer should work as a Toolbar on the right side of the window. But when I resize the window, the vertical scroll not works.
Full screen:
Resized:
The problem is because your SplitView is in the Row with the <RowDefinition Height="Auto"/>. This makes the SplitView higher than the Screen and does not scroll as a result.
Use <RowDefinition Height="*"/> for this row to make it as high as the screen is.
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<SplitView Grid.Row="1">
....
</SpitView>
I am using ad control in my xaml as below
<Page
x:Class="namespace"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:namespace"
xmlns:ViewModels="using:namespace.ViewModels"
xmlns:common="using:namespace.Classes"
xmlns:stringBind="using:namespace.Classes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:q42controls="using:Q42.WinRT.Controls"
xmlns:UI="using:Microsoft.Advertising.WinRT.UI"
Background="Gray"
mc:Ignorable="d">
<Page.Resources>
<ViewModels:ArticleViewModel x:Key="ViewModel" />
<DataTemplate x:Key="headerTest">
</DataTemplate>
<DataTemplate x:Key="pivotTemplate">
<StackPanel Margin="-15 0 -15 0">
<Grid>
<Image x:Name="PlaceHolderImage" Source="Assets/PlaceHolder.jpg"></Image>
<Image q42controls:ImageExtensions.CacheUri="{Binding ImageURL}" Tag="{Binding ImageURL}" Tapped="ImageView"></Image>
</Grid>
<StackPanel Background="White">
<TextBlock Text="{Binding UpdatedDate}" FontSize="15" HorizontalAlignment="Center"
VerticalAlignment="Center" Pivot.SlideInAnimationGroup="GroupTwo" Margin="10 10 0 10"
FontFamily="{StaticResource ContentControlThemeFontFamily}"
Foreground="#777"></TextBlock>
<Border VerticalAlignment="Bottom" Height="1" Background="Black" Opacity="0.1">
</Border>
<TextBlock x:Name="HeadLine" Text="{Binding HeadLine}"
Margin="10 5 10 -5" TextWrapping="Wrap"
FontSize="{Binding HeadlineFontSize}" Foreground="Black"
FontFamily="{StaticResource HeadlineCommonFamiy}"
Pivot.SlideInAnimationGroup="GroupTwo"/>
<TextBlock Text="{Binding Abstract}" TextWrapping="Wrap" FontSize="{Binding AbstractFontSize}"
Pivot.SlideInAnimationGroup="GroupTwo" Margin="10 5 10 10"
Foreground="#999"
FontFamily="{StaticResource AbstractCommonFamily}"/>
</StackPanel>
<StackPanel x:Name="descriptionSP" Background="White">
<Image Source="Assets/PlaceHolder.jpg" Width="300" Height="250"></Image>
<UI:AdControl
AutoRefreshIntervalInSeconds="60"
ApplicationId="3f83fe91-d6be-434d-a0ae-7351c5a997f1"
AdUnitId="10865270"
HorizontalAlignment="Center"
Height="250"
IsAutoRefreshEnabled="True"
VerticalAlignment="Top"
Margin="5,-240,5,5"
Width="300"
ErrorOccurred="AdControl_ErrorOccurred"/>
<RichTextBlock IsTextSelectionEnabled="False" x:Name="richTextBlock"
local:Properties.Html="{Binding ArticleDetail}" TextWrapping="Wrap"
FontSize="{Binding FontSize}"
Pivot.SlideInAnimationGroup="GroupTwo" Margin="10,10,10,-20"
FontFamily="{StaticResource ContentControlThemeFontFamily}">
</RichTextBlock>
<Image Source="Assets/PlaceHolder.jpg" Width="300" Height="250"></Image>
<UI:AdControl
AutoRefreshIntervalInSeconds="60"
ApplicationId="3f83fe91-d6be-434d-a0ae-7351c5a997f1"
AdUnitId="10865270"
HorizontalAlignment="Center"
Height="250"
IsAutoRefreshEnabled="True"
VerticalAlignment="Top"
Margin="5,-220,5,5"
Width="300" Loaded="AdControl_Loaded"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</Page.Resources>
<Page.BottomAppBar>
<CommandBar Foreground="Black" Background="White">
<CommandBar.PrimaryCommands>
<AppBarButton x:Uid="Share" Click="Share_Click" Label="Share">
<AppBarButton.Icon>
<BitmapIcon UriSource="/Assets/Share.png" Height="30" Margin="0,-5,0,0"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Icon="Favorite" Name="favIcon" Click="Favorite_Click" Label="Favorite" Margin="0,-2,0,0"></AppBarButton>
</CommandBar.PrimaryCommands>
</CommandBar>
</Page.BottomAppBar>
<Grid Background="#f2f2f2" x:Name="grid">
<Grid x:Name="LoadingGrid" Visibility="Visible">
<ProgressRing x:Name="progressRing" IsActive="True" Foreground="#d03438" HorizontalAlignment="Center" Width="60"
Height="50" VerticalAlignment="Center" Margin="0 20 0 0"></ProgressRing>
</Grid>
<Grid x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="logoImage" Grid.Row="0" Source="Assets/18600.png" HorizontalAlignment="Center" Margin="0,5,0,0"></Image>
<ScrollViewer x:Name="swipeBetweenPages" Grid.Row="1" Visibility="Collapsed">
<Pivot DataContext="{StaticResource ViewModel}" x:Name="pivot" Margin="0,-45,0,0"
HeaderTemplate="{StaticResource headerTest}"
ItemTemplate="{StaticResource pivotTemplate}" ItemsSource="{Binding Articles}" SelectionChanged="pivot_SelectionChanged">
</Pivot>
</ScrollViewer>
</Grid>
<Grid Visibility="Collapsed" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Black" Name="popUp">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image Source="/Assets/Close_White.png" HorizontalAlignment="Right" Grid.Row="1" Tapped="CloseImage"></Image>
<ScrollViewer x:Name="scroll" ZoomMode="Enabled" Grid.Row="2">
<Image x:Name="popUpImage" VerticalAlignment="Center" Margin="0,-50,0,0"></Image>
</ScrollViewer>
</Grid>
</Grid>
By using the above xaml piece of code, I can render ad properly, But i cant scroll the page when i scroll over the ad control. Please someone guide to solve the issue. Any help on this would be very much helpful to solve the issue
Expected output
Thanks in advance
By using the above xaml piece of code, I can render ad properly, But i cant scroll the page when i scroll over the ad control.
You need to set the height of your ScrollViewer explicitly:
<Grid x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="logoImage" Grid.Row="0" Source="Assets/18600.png" HorizontalAlignment="Center" Margin="0,5,0,0"></Image>
<ScrollViewer x:Name="swipeBetweenPages" Grid.Row="1" Visibility="Visible" Height="300">//here I set the height of ScrollViewer to 300
<Pivot DataContext="{StaticResource ViewModel}" x:Name="pivot" Margin="0,-45,0,0"
HeaderTemplate="{StaticResource headerTest}"
ItemTemplate="{StaticResource pivotTemplate}" ItemsSource="{Binding Articles}" SelectionChanged="pivot_SelectionChanged">
</Pivot>
</ScrollViewer>
</Grid>
I set the ScrollViewer's height to 300 and when the Content's height is bigger than 300. ScrollViewer will show correctly.
Update: Here is the complete demo: AdControlSample
To show the Pivot Header you need to set the margin of Pivot Control to Margin="0,0,0,0" and also you need to fill your defined header template headerTest:
<Page.Resources>
<DataTemplate x:Key="headerTest">
<StackPanel>
<TextBlock Text="{Binding HeadLine}"></TextBlock>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="pivotTemplate">
...
Fix the margin:
<Grid x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="logoImage" Grid.Row="0" Source="Assets/18600.png" HorizontalAlignment="Center" Margin="0,5,0,0"></Image>
<ScrollViewer x:Name="swipeBetweenPages" Grid.Row="1" Visibility="Visible">
<Pivot x:Name="pivot" Margin="0,0,0,0"
HeaderTemplate="{StaticResource headerTest}"
ItemTemplate="{StaticResource pivotTemplate}" SelectionChanged="pivot_SelectionChanged">
</Pivot>
</ScrollViewer>
</Grid>
And here is the result:
You need to put the ScrollViewer inside the PivotItem's DataTemplate.
Currently the ScrollViewer wraps the whole Pivot, but the pivot itself handles the scroll event which means the ScrollViewer does not receive it. You can confirm this when you hover the scroll bar with your mouse and scroll - in this case it will work, because the mouse is no longer inside the Pivot itself.
The solution would look like this:
<DataTemplate x:Key="pivotTemplate">
<ScrollViewer>
<StackPanel Margin="-15 0 -15 0">
...
</StackPanel>
</ScrollViewer>
</DataTemplate>
I have an issue:
I have a fixed height page in a scroll view:
Here is the page
When i popup the keyboard:
Now the keyboard has 50% of the screen, i want the visible part of the page to scroll - how to make it. Because if the user wont tape on the page - keyboard wont close, some user will try to scroll till they get to the Send button.
Here is my xaml:
<ScrollViewer HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch" Margin="0,0">
<Grid Margin="0" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="60"/>
<RowDefinition Height="80"/>
<RowDefinition Height="60"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Fill="#FFE3E2E2" Margin="0"></Rectangle>
<TextBlock x:Name="Comment" HorizontalAlignment="Center" Margin="10" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" Foreground="Black" FontSize="22"/>
<TextBlock Grid.Row="2" Margin="10" x:Name="FeedbackTitleLabel" HorizontalAlignment="Left" TextWrapping="NoWrap" Text="sgwrgggggg" VerticalAlignment="Center" Foreground="Black" FontSize="24"/>
<TextBox x:Name="FeedbackTitle" HorizontalAlignment="Stretch" Margin="0,0,0,0" Grid.Row="3" TextWrapping="NoWrap" Text="" VerticalAlignment="Center" FontSize="24" BorderBrush="#BF7B7B7B" Background="#BFC9C9C9"/>
<TextBlock Margin="10" x:Name="FeedbackContentLabel" HorizontalAlignment="Left" TextWrapping="NoWrap" Text="sgrsgsrgsegsg" VerticalAlignment="Center" Grid.Row="4" Foreground="Black" FontSize="24"/>
<TextBox x:Name="FeedbackContent" HorizontalAlignment="Stretch" Margin="0" Grid.Row="5" TextWrapping="Wrap" Text="" VerticalAlignment="Stretch" FontSize="24" BorderBrush="#BF7B7B7B" Background="#BFC9C9C9"/>
<StackPanel Grid.Row="6" Orientation="Horizontal">
<TextBlock Margin="10,0,10,0" x:Name="AdditionalItemsLabel" HorizontalAlignment="Left" TextWrapping="NoWrap" Text="sgsgsegsrg" VerticalAlignment="Center" Grid.Row="4" Foreground="Black" FontSize="24"/>
<local:Button2 Height="80" x:Name="Photo" HorizontalAlignment="Right" Margin="10" VerticalAlignment="Stretch" Width="177" Tap="Photo_Tap"/>
</StackPanel>
<local:Button3 x:Name="Send" HorizontalAlignment="Stretch" Margin="10" Height="80" Grid.Row="8" VerticalAlignment="Stretch" Tap="Send_Tap"/>
<Grid Margin="10" Name="AttachmentGrid" Grid.Row="7" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="0,10,10,10" Grid.ColumnSpan="2" x:Name="AttachedFilesLabel" HorizontalAlignment="Left" TextWrapping="NoWrap" Text="sgrsgsrgsegsg" VerticalAlignment="Center" Grid.Row="0" Foreground="Black" FontSize="24"/>
<StackPanel Grid.Row="2" x:Name="ImageThumbs" Orientation="Horizontal">
</StackPanel>
<Rectangle VerticalAlignment="Center" Grid.Row="0" Grid.ColumnSpan="2" Grid.RowSpan="2" Height="40" Width="40" Grid.Column="1" Fill="#FFC2C2C2" Stroke="Black" RadiusX="5" RadiusY="5" Tap="DeleteAttach_Tap"/>
<Image Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" Grid.Column="1" Height="30" Width="30" HorizontalAlignment="Center" VerticalAlignment="Center" Source="../*/delete.png"/>
</Grid>
<Grid Name="MessageGrid" Margin="10" Visibility="Collapsed" Grid.Row="1">
<Rectangle Fill="#00A7D1" Margin="0,0,0,0" Height="80" RadiusX="5" RadiusY="5"/>
<TextBlock x:Name="Message" HorizontalAlignment="Center" Margin="10" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" Foreground="White" FontSize="22"/>
</Grid>
</Grid>
</ScrollViewer>
Example of what i want it to look like, go to the contact adding in WP, add name:
The hightlighted area can be scrolled, i want it in my app...
I had the same issue. but at last i solved it, i just used the Height property to do this. Please do the following steps
First create a ScrollViewer
Indide the ScrollViewer create a container(eg: Grid/StackPanel/Border etc...) and put every controlls inside it.
Set fixed Height for ScrollViewer and the Container (Note: Height of container should be greater than ScrollViewer's Height)
See the below Code
<ScrollViewer Height="500">
<Grid Name="Container" Height="700">
<TextBox/>
<TextBox/>
<TextBox/>
</Grid>
</ScrollViewer>
Now you can scroll the container Grid Even the KeyBoard shown or even focus on a TextBox.
I have a stackpanel which sometimes contains more data than can fit on the screen. When this happens I'm unable to scroll down to see the rest of the list. So I added a ScrollViewer to fix this but I'm unable to get it working. This is the code:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer Height="500" Name="Scroller" VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical" Name="Stack" Height="2000">
<TextBlock Text="{Binding BookableExplanation}" Foreground="#336699" TextWrapping="Wrap"/>
<Button Visibility="{Binding ShowLinkToSite, Converter={StaticResource BooleanToVisibilityConverter}}" cal:Message.Attach="[Event Click] = [Action OpenStuntOnWebAsRegularOffer]" Foreground="#FFFFFF" Background="#336699" BorderThickness="0">neckermann.be</Button>
<ListBox x:Name="DepartureDates" MinHeight="2000"
cal:Message.Attach="[Tap]=[Action OpenStuntOnWeb(DepartureDates.SelectedItem)]">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid DataContext="{Binding}" Background="#336699" Margin="0,10,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="430"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="1" Orientation="Vertical" Margin="10,10,10,10">
<TextBlock Text="{Binding Date, StringFormat='dd/MM/yyyy'}" Foreground="#FFFFFF" TextWrapping="Wrap" TextAlignment="Center"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
</Grid>
Any ideas ? On other views I just have text that scrolls fine, it's only when adding items dynamically that I ran into issues. Saw some posts here also about problems with the scrollviewer but followed those advice such as setting scrollviewer height lower than the stackpanel but didn't work. It's probably something really simple but can't find it :) It does the scrolling movement but just doesn't allow me to go down.
Thanks,
Jorn
I managed to fix it by reworking my XAML. It seems the stackpanel was the problem. Behavior is slightly different now but I can live with it.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="0,0,0,5">
<TextBlock Text="{Binding BookableExplanation}" Foreground="#336699" TextWrapping="Wrap"/>
<Button Visibility="{Binding ShowLinkToSite, Converter={StaticResource BooleanToVisibilityConverter}}" cal:Message.Attach="[Event Click] = [Action OpenStuntOnWebAsRegularOffer]" Foreground="#FFFFFF" Background="#336699" BorderThickness="0">neckermann.be</Button>
</StackPanel>
<ListBox Grid.Row="1" x:Name="DepartureDates"
cal:Message.Attach="[Tap]=[Action OpenStuntOnWeb(DepartureDates.SelectedItem)]">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid DataContext="{Binding}" Background="#336699" Margin="0,10,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="430"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="1" Orientation="Vertical" Margin="10,10,10,10">
<TextBlock Text="{Binding Date, StringFormat='dd/MM/yyyy'}" Foreground="#FFFFFF" TextWrapping="Wrap" TextAlignment="Center"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
Listbox has inbuilt Scroll viewer. So if you manually add scroll viewer, both controls will fight each other.
Do remove your scroll viewer. Will work.