Hello I have this Page XAML. The problem its that the text inside each PivotItem doesn't scroll correctly, just scroll a bit but no to the end. Pivot works correctly, you can flip Items Horizontally. How can i achieve the correct behavior on the scrolls?
<StackPanel>
<Pivot>
<PivotItem>
<ScrollViewer VerticalScrollMode="Enabled">
<StackPanel Margin="0,0,12,0">
<TextBlock HorizontalAlignment="Left"
TextWrapping="WrapWholeWords"
Foreground="#5D5B5D"
FontWeight="Light"
TextAlignment="Justify"
Margin="0,0,12,0"
Padding="0,0,4,0"
Text="Change for this a very large text so it can scroll!!! "></TextBlock>
<Button Content="OK"
HorizontalAlignment="Center"
Margin="0,18"
Padding="42,4"></Button>
</StackPanel>
</ScrollViewer>
</PivotItem>
<PivotItem>
<ScrollViewer VerticalScrollMode="Enabled">
<StackPanel Margin="0,0,12,0">
<TextBlock HorizontalAlignment="Left"
TextWrapping="WrapWholeWords"
Foreground="#5D5B5D"
FontWeight="Light"
TextAlignment="Justify"
Margin="0,0,12,0"
Padding="0,0,4,0"
Text="Change for this a very large text so it can scroll!!! "></TextBlock>
<Button Content="OK"
HorizontalAlignment="Center"
Margin="0,18"
Padding="42,4"></Button>
</StackPanel>
</ScrollViewer>
</PivotItem>
</Pivot>
From your code I saw that you use a StackPanel outside of the Pivot control, and you didn't set the orientation property, so by default the StackPanel stacks items vertically from top to bottom in the order they are declared. This will influence the Vertical-scroll-mode ScrollViewer inside of it.
A ScrollViewer works when its content's size bigger than the ScrollViewer's size, when a ScrollViewer is inside of a StackPanel, it has no limit of size, the size will fit the child inside of it, so can't a ScrollViewer work correctly.
In this case, you can change the StackPanel outside of your Pivot to Grid, it will solve the problem, or you can give your ScrollViewers a limit height like <ScrollViewer VerticalScrollMode="Enabled" Height="300">, this can also solve the problem.
Related
https://learn.microsoft.com/en-us/windows/uwp/design/motion/parallax
this is microsoft instruction to use the paralax they use the ListView to demo the effect
but my data is stored inside the Grid.View so can anyone show me how to implement into it ?
Microsoft said that we can use this with any element that contain the scrollviewer
ParallaxView works with GridView. The Source property of ParallaxView is for setting the element that either is or contains the ScrollViewer that controls the parallax operation. Here in your code snippet it bind the ForegroundElement to Source property but no such an element in. You need to name the GridView as ForegroundElement .
<GridView
x:Name="ForegroundElement"
IsItemClickEnabled="True"
ItemClick="Grid_Clicked"
ItemsSource="{x:Bind Icons}">
...
</GridView>
Besides this, the code snippet should work well. If you still cannot see the effects it may be caused by items count is not enough. ScrollViewer inside the GridView or ListView only be shown when the host control's layout space is being constrained smaller than the expanded content size, details please see ScrollViewer in a control template. You could try to add more items to check the effects.
Additionally, edit the question to add more details and avoid to put it as an answer.
<GridView Grid.Row="1" ItemsSource="{x:Bind Icons}" IsItemClickEnabled="True" ItemClick="Grid_Clicked">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Icon">
<StackPanel>
<Image Width="200" Height="200" HorizontalAlignment="Center" Source="{x:Bind ImageCover}"/>
<TextBlock FontSize="16" VerticalAlignment="Center" Text="{x:Bind Title}"/>
<TextBlock FontSize="10" VerticalAlignment="Center" Text="{x:Bind Room}"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
this is where the data stored
and this is the parallax
<ParallaxView Source="{x:Bind ForegroundElement}" VerticalShift="50">
<!-- Background element -->
<Image x:Name="BackgroundImage" Source="Assets/turntable.png"
Stretch="UniformToFill"/>
</ParallaxView>
This is my UserControl file:
<StackPanel>
<StackPanel HorizontalAlignment="Left" Margin="80,0,0,0">
<Grid Width="1110">
...
</Grid>
</StackPanel>
<ScrollViewer VerticalScrollBarVisibility="Visible" Margin="0 0 90 0">
<ItemsControl MinHeight="400" BorderThickness="0" ItemsSource="{Binding MyObjects}" ItemTemplateSelector="{StaticResource myObjectItemsTemplateSelector}" />
</ScrollViewer>
</StackPanel>
Even though the ItemsControl element has a lot of items, the scrollbar is diabled. Why? What am I doing wrong?
The scrollviewer is inside of a stack panel which will size to as much room as the it's child elements need. You can either set a max height on the scrollviewer or switch the parent container to a grid with verticalalignment of stretch which will size to as much room as available.
I have a LongListSelector where each item can contain variable number of images and hence can be of different height. Here's my XAML:
<phone:LongListSelector x:Name="Views" ItemsSource="{Binding}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding Imgs}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="#44AAAAAA" Margin="10,0,10,10">
<Image Source="{Binding photo.Source}" Stretch="UniformToFill"
Height="{Binding Converter={StaticResource ScaleHeight}, Path=photo}" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
The problem is while scrolling such LongListSelector when I come across a long item, the scroll position suddenly jumps a few items forward/backward (depending of scroll direction).
I suspect this has something to do with virtualization but I don't know how this can be fixed. Any suggestions?
You should use the Grouped version of the LongListSelector with an empty header, like this you will not have items with such different Height.
I've got a long list selector.
All I want to do is to align two elements inside the ItemTemplate:
1. a button to the right with a given, fixed width
2. a text panel to the left that fills the remaining space of the display.
But unfortunately the text panel is not strechted and the button is aligned to right end of text of the text panel. :(
This is my code:
<DataTemplate x:Key="AddrBookItemTemplate">
<StackPanel Orientation="Horizontal" Name="DummerContainer" HorizontalAlignment="Stretch">
<TextBlock FontWeight="Bold" Text="{Binding Name}" HorizontalAlignment="Stretch"/>
<Button HorizontalAlignment="Right" Width="120"/>
</StackPanel>
</DataTemplate>
and
<phone:LongListSelector
HorizontalAlignment="Stretch"
x:Name="AddrBook"
JumpListStyle="{StaticResource AddrBookJumpListStyle}"
Background="Transparent"
GroupHeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
ItemTemplate="{StaticResource AddrBookItemTemplate}"
LayoutMode="List"
IsGroupingEnabled="true"
HideEmptyGroups ="true"/>
So, this is my question: How can I align the two elements correctly?
That's a result of using a horizontal StackPanel...
Use a Grid rather than a StackPanel in your DataTemplate. Then you can define the ColumnDefinitions to assign the space as you require, i.e.:
define column 0 as Width="*" and put your TextBlock in it
define column 1 as Width="Auto" put your Button in it.
Afaik, Stackpanel is faster than Grid. So, i decided to find out the root of the problem. And i found it here: http://y2bd.me/blog/2013/08/16/fixing-alignment-issues-with-datatemplateselector/
Works fine for me.
In the following XAML, the word "Test" centers horizontally but not vertically.
How can I get it to center vertically?
<Window x:Class="TestVerticalAlign2343.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowStartupLocation="CenterScreen"
Title="Window1" Height="768" Width="1024">
<DockPanel LastChildFill="True">
<Slider x:Name="TheSlider"
DockPanel.Dock="Left"
Orientation="Vertical"
HorizontalAlignment="Center"
HorizontalContentAlignment="Center"
Minimum="0"
Maximum="10"
Cursor="Hand"
Value="{Binding CurrentSliderValue}"
IsDirectionReversed="True"
IsSnapToTickEnabled="True"
Margin="10 10 0 10"/>
<Border DockPanel.Dock="Right" Background="Beige"
Padding="10"
Margin="10"
CornerRadius="5">
<StackPanel Height="700">
<TextBlock
Text="Test"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="200" x:Name="TheNumber"/>
</StackPanel>
</Border>
</DockPanel>
</Window>
A stackpanel, no matter how you stretch it, will collapse around the children. you can't make it grow more than that. Basically, that "Height=700" is not helping you.
So either set VerticalAlignment on the StackPanel to "center" so that the stackpanel goes into the center of the dockpanel...or remove the stackpanel altogether and set VerticalAlignment="Center" on the TextBlock.
Seems I asked this question 10 months ago, I got the above scenario to work by replacing the StackPanel with DockPanel LastChildFill=True like this:
<DockPanel LastChildFill="True">
<TextBlock
DockPanel.Dock="Top"
Text="Test"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="200" x:Name="TheNumber"/>
</DockPanel>
I stumbled across this which seems to work perfectly:
<Grid>
<TextBlock Text="My Centered Text"
TextAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
The Grid ensures that the single TextBox within it fills the solitary cell in the grid and the VerticalAlignment in the TextBlock ensures that the text is centered within than.
Simply position/align your text horizontally however you require (the above snippet centers it in this axis also, but changing this doesn't alter the vertical centering).
Inside the StackPanel that surrounds the TextBlock, check out VerticalContentAlignment.