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.
Related
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.
I have a HubSection with StackPanel inside. i would like to move StackPanel to the Bottom of Hub Section.
Here is my XAML:
<HubSection Width="783">
<DataTemplate>
<StackPanel VerticalAlignment="Bottom">
<TextBlock ...
</StackPanel>
But I have StackPanel on the Top of the HubSection. How can I fix it ?
You simply need to place your StackPanel inside another container that will fill the entire HubSection, leaving your StackPanel able to align to the bottom of that container:
<HubSection Width="783" VerticalContentAlignment="Stretch">
<DataTemplate>
<Grid>
<StackPanel VerticalAlignment="Bottom">
<TextBlock ...
</StackPanel>
</Grid>
I have created info inside a PivotItem but for some reason the items do not scroll, I've tried scrolling but it creates a sort of compressed effect and not scrolling down.
I have tried wrapping it with a ScrollViewer and also tried
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer VerticalScrollBarVisibility="Visible" VerticalScrollMode="Enabled">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
With no luck - can anyone identify what could be wrong?
<PivotItem Header="unread">
<ItemsControl ItemsSource="{Binding Categories}" >
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer VerticalScrollBarVisibility="Visible" VerticalScrollMode="Enabled" BringIntoViewOnFocusChange="True">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
// ---
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</PivotItem>
Just put the ScrollViewer around the ItemsControl, not inside it. Something like this:
<Pivot TabNavigation="Once">
<PivotItem Header="unread">
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Categories}">
//Some ItemsControl properties and stuff
</ItemsControl>
</ScrollViewer>
</PivotItem>
</Pivot>
Solved
For everyone reading this - the problem was that the Pivot was in a StackPanel. And ScrollViewers do not work inside of StackPanels, because these panels have unlimited height (or width, depending on the Orientation), and then there's nothing to scroll as everything fits. You could use a StackPanel inside a ScrollViewer, though.
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.
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.