In my WPF application, I have a Stackpanel containing several controls inside them. How can I add a Scrollbar to this stackpanel.
Put it into a ScrollViewer.
Stackpanel doesn't have built in scrolling mechanism but you can always wrap the StackPanel in a ScrollViewer
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel ... />
</ScrollViewer>
It works like this:
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Disabled" Width="340" HorizontalAlignment="Left" Margin="12,0,0,0">
<StackPanel Name="stackPanel1" Width="311">
</StackPanel>
</ScrollViewer>
TextBox tb = new TextBox();
tb.TextChanged += new TextChangedEventHandler(TextBox_TextChanged);
stackPanel1.Children.Add(tb);
For horizontally oriented StackPanel, explicitly putting both the scrollbar visibilities worked for me to get the horizontal scrollbar.
<ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto" >
<StackPanel Orientation="Horizontal" />
</ScrollViewer>
If you mean, you want to scroll through multiple items in your stackpanel, try putting a grid around it. By definition, a stackpanel has infinite length.
So try something like this:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Width="311">
<TextBlock Text="{Binding A}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontStretch="Condensed" FontSize="28" />
<TextBlock Text="{Binding B}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</Grid>
You could even make this work with a ScrollViewer
Related
I'm trying to add vertical scrolling to my GridView / AdaptiveGridView, but no success so far(Horizontal scrolling works).
I have already attempted with internal scrollviewer with the "ScrollViewer.---" in the GridView without luck.
I have also tried to place a ScrollViewer outside of the GridView without luck.
XAML
<ScrollViewer
HorizontalScrollBarVisibility="Disabled"
HorizontalScrollMode="Disabled"
VerticalScrollBarVisibility="Auto"
VerticalScrollMode="Auto">
<Grid Name="ChangeMe">
<controls:AdaptiveGridView
Name="MyPolls"
Margin="0,10,0,0"
DesiredWidth="320"
IsItemClickEnabled="True"
ItemClick="MyPolls_ItemClick"
ItemHeight="180"
ItemsSource="{x:Bind oc}"
SizeChanged="MyPolls_SizeChanged">
<controls:AdaptiveGridView.ItemTemplate>
<DataTemplate x:DataType="local:Poll">
<Grid ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Auto">
<Image Source="../Assets/Square44x44Logo.png" Stretch="UniformToFill" />
<StackPanel
Height="60"
Padding="12"
VerticalAlignment="Bottom"
Background="{ThemeResource SystemBaseLowColor}"
Orientation="Horizontal">
<StackPanel>
<TextBlock Text="{x:Bind poll_title}" />
<TextBlock
Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"
Style="{ThemeResource CaptionTextBlockStyle}"
Text="{Binding poll_description}" />
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</controls:AdaptiveGridView.ItemTemplate>
</controls:AdaptiveGridView>
</Grid>
</ScrollViewer>
Code Behind
private void MyPolls_SizeChanged(object sender, Windows.UI.Xaml.SizeChangedEventArgs e)
{
ChangeMe.Height = MyPolls.Height;
ChangeMe.Width = MyPolls.Width;
}
Does anyone know a way to enable vertical scrolling for a GridView / AdaptiveGridView for when the gridview items go out of frame so you can scroll down and see them? (AdaptiveGridView inherits from GridView)
I've got the following piece of XAML code:
<Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
<ScrollViewer>
<ItemsControl ItemsSource="{Binding History}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Tapped="HistoryItemTapped">
<FlyoutBase.AttachedFlyout>
<Flyout>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ScrollViewer>
<TextBlock Foreground="{ThemeResource PhoneMidBrush}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Left" Text="{Binding Expression}" />
</ScrollViewer>
<ScrollViewer>
<TextBlock FontSize="{ThemeResource TextStyleExtraLargePlusFontSize}" HorizontalAlignment="Right" Text="{Binding Result}" />
</ScrollViewer>
</StackPanel>
</Flyout>
</FlyoutBase.AttachedFlyout>
<TextBlock Foreground="{ThemeResource PhoneMidBrush}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Left" Text="{Binding Expression}"
TextTrimming="CharacterEllipsis"/>
<TextBlock FontSize="{ThemeResource TextStyleExtraLargePlusFontSize}" HorizontalAlignment="Right" Text="{Binding Result}"
TextTrimming="CharacterEllipsis"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
There are two problems I can't solve:
The flyout is shown upon tapping on one of items:
private void HistoryItemTapped(object sender, TappedRoutedEventArgs e)
{
FlyoutBase.GetAttachedFlyout((FrameworkElement)sender).ShowAt((FrameworkElement)sender);
}
However, no matter how I set up the flyout it always shows on the top of the screen, not over the tapped item. Why?
The flyout contains two TextBlocks on separate ScrollViewers. The text on one of them exceeds width of the flyout, bt the scrollviewer does not appear to be working (I cannot scroll horizontally the textblock). Why is that?
So let's knock these out real quick. Your #1 would be expected result, it's just going off the default FlyoutPlacementMode enumeration wherein generally your flyout is just meant to appear over the top in one of 5 spots, Top, Bottom, Left, Right, or Full(Center)
How to fix it, ditch the flyout control and just animate your own panel to do the same thing on a tap event or whatever, not hard at all.
Your #2, if I remember right the default on ScrollViewerfor something like the HorizontalScrollBarVisibility is False by default. So just add HorizontalScrollBarVisibility="Auto" to it.
Hope this helps, cheers
I have a Grid which has a TextBox inside a ScrollViewer:
<Grid DockPanel.Dock="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ScrollViewer>
<StackPanel Height="271" Width="258">
<Label FontSize="15" Margin="10"> Suggestions </Label>
<Expander x:Name="expander" Margin="10" />
</StackPanel>
</ScrollViewer>
<GridSplitter Grid.Column="0" Width="5" />
<ScrollViewer Grid.Column="1">
<TextBox x:Name="textBox" AcceptsReturn="True"
AcceptsTab="True" FontSize="15"
VerticalScrollBarVisibility="Visible"
HorizontalScrollBarVisibility="Visible"
TextWrapping="WrapWithOverflow" Language="en-US"
SpellCheck.IsEnabled="True"/>
</ScrollViewer>
</Grid>
Even if I set HorizontalScrollBarVisibility to Visible, the horizontal scroll bar is not visible, and when I type some text that goes beyond the TextBox's width, I can't scroll:
Looking at the implementation of the TextBox: http://referencesource.microsoft.com/#PresentationFramework/src/Framework/System/Windows/Controls/TextBox.cs#1473
it seems that this is the normal behavior: the horizontal scrollbar is not visible when TextWrapping is WrapWithOverflow.
Based on that, the only possible way to show the horizontal scrollbar of the TextBox is to set the TextWrapping to NoWrap.
A workarount to what (I think that) you want to achieve with the outer ScrollViewer might be:
<ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Visible">
<TextBox x:Name="textBox" AcceptsReturn="True"
AcceptsTab="True" FontSize="15"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Hidden"
TextWrapping="WrapWithOverflow" Language="en-US"
SpellCheck.IsEnabled="True"/>
</ScrollViewer>
It appears to me that the TextBox element is not being entirely displayed. I'd bet that the scroll bar is there, you just cannot see it without re-sizing your current window or scrolling downwards in the main window.
I have a listbox with objects but I cannot scroll to the bottom of the page. What is the problem? This is the code that I'm using.
<Grid>
<Image Name="Nietcomment" Source="write.png" Width="70" Margin="350,-850,0,0" Tap="Login_popup" Visibility="Visible"/>
<Image Name="welcomment" Source="write2.png" Width="70" Margin="350,-850,0,0" Tap="Login_popup_remove" Visibility="Collapsed"/>
<ScrollViewer Name="scrollview" VerticalScrollBarVisibility="Visible" Margin="0,0,0,0" Foreground="Black">
<StackPanel>
<TextBlock x:Name="NTitelComment" Text="{Binding}" TextWrapping="Wrap" FontSize="25" Margin="10,0,10,0" Foreground="#FFE5001b"/>
<Line Stretch="Fill" Stroke="Black" X1="0" X2="1" Y1="0" Y2="0" Margin="10,0,10,0"/>
<TextBlock x:Name="tijdComment" Text="{Binding}" Margin="50,0,10,0" Foreground="Black"/>
<Image Height="20" Width="20" Margin="-380,-20,0,0" Source="/PostDateIcon.png"/>
<ListBox Margin="0,0,0,20" Name="lbComments" VerticalAlignment="Top" />
</StackPanel>
</ScrollViewer>
</Grid>
If you put a border around your ScrollViewer, can you see if it goes outside of the screen maybe? Will it help to set a fixed height of the Grid or ScrollViewer?
Keep in mind the phone has built in scroll, so your ScrollViewer maybe doesn't play well with it.
With so much fixed margins, your layout will be impossible to manage, especially when dealing with differents screen resolutions and especially with negative margins.
Anyway, right now, you have two scrollviewers, as your listbox contains one as well.
You should disable the listbox scrollviewer or it will prevent your page to scroll.
Just change your listbox:
<ListBox
Margin="0,0,0,20"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
Name="lbComments"
VerticalAlignment="Top" />
It will disable it's scrollviewer and allow it to scroll with the rest of the page.
I have some Canvases in a ListBox. Inside these Canvases I have some TextBlocks which have their text bound to them. However when I try to use a MaxWidth/Height property on the text block (or the standard Height/Width), the properties are ignored! So I end up with the text overspilling the Canvas in cases.
I would much appreciate any help on the matter, and I hope I'm not just being a blind idiot!
Oh, and here's the code (the TextBlock I'm talking about is the first one):
<ListBox Margin="0,-9,-12,0" ItemsSource="{Binding}" Name="listBoxNotes" HorizontalAlignment="Left" VerticalAlignment="Top" Width="400" Height="548">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Canvas Height="175" Width="360" Background="{StaticResource PhoneAccentBrush}" toolkit:TiltEffect.IsTiltEnabled="True" Name="canvasNote" Tap="canvasNote_Tap">
<TextBlock Text="{Binding Title}" FontWeight="Bold" FontSize="26" Foreground="White" Canvas.Left="10" Canvas.Top="5" x:Name="Title" Width="100" MaxWidth="100"/>
<TextBlock Text="{Binding Details}" TextWrapping="Wrap" Width="352" FontSize="24" Foreground="White" Canvas.Left="10" Canvas.Top="35" />
</Canvas>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The problem with this is Canvas does not limit the size of their children, and especially theTextBlock control will grow as much as it needs.
Many ways to solve your problem :
Do not use TextBlock but a TextBox
Do not use Canvas but another container such as Border, Grid, StackPanel...
Try to clip the TextBlock content
<TextBlock.Clip>
<RectangleGeometry Rect="0, 0, 50, 30"/>
</TextBlock.Clip>