It is easy to reproduce. Just create a new project and paste the following code:
<StackPanel Grid.Row="0" Name="Header" Height="0">
<TextBlock Text="This text is hidden" />
<ScrollViewer>
<TextBlock Margin="2" TextWrapping="Wrap" FontSize="32" Text="This text isn't."/>
</ScrollViewer>
</StackPanel>
The question is the stact panel height is 0 thus the content is supposed to be invisible.
How do I fix it?
Just messing around with the settings.
Found that by adding the CacheMode="BitmapCache" to Stackpanel worked.
Googled it and it seems it is not recommend to do this way considering the performance.
Still looking for the proper answer;)
If you want to make the StackPanel invisible, set Visibility to Collapsed instead. Or you wish to make the ScrollViewer invisible in certain cases?
It sounds like you are trying to make the ScrollViewer and its content disappear when the height of the StackPanel goes to zero. If that is the case, then just trigger off the SizeChanged event of the StackPanel to handle when you should show or hide the Scrollviewer.
private void Header_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (Header.Height.Equals(0))
{
scroller.Visibility = System.Windows.Visibility.Collapsed;
}
else
{
scroller.Visibility = System.Windows.Visibility.Visible;
}
}
Related
I want to enable user to resize the NavigationView in my UWP app. Couldn't find any resources how I could do that.
I see some of the apps have "Resizable splitView" but for SplitView also, I cannot see any such resize property exposed to set by default.
Pls help.
Thanks in Advance
There are no such property can resize SplitView and NavigationView, you need to custom layout to implement a similar effect. You could use Slider control and bind the OpenPaneLength Property of SplitView to Slider.Value to do this. Please refer to the following code.
<Grid>
<SplitView Name="CoreSplitView"
DisplayMode="Inline"
IsPaneOpen="True"
OpenPaneLength="{Binding Value, ElementName=MasterSlider, Mode=OneWay}">
<SplitView.Pane>
<Grid Name="PaneGrid" Background="Gray">
<Slider Name="MasterSlider"
MinWidth="480"
VerticalAlignment="Stretch"
Maximum="480"
Minimum="10"
Opacity="0"
Value="150"
/>
<StackPanel Name="PaneStackPanel"
Margin="0,0,10,0" Background="LightGray">
<TextBlock TextWrapping="Wrap" Text="Use a slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).A slider is a good choice when you know that users think of the value as a relative quantity" />
</StackPanel>
</Grid>
</SplitView.Pane>
<Grid Name="ContentGrid" Background="LightSteelBlue">
</Grid>
</SplitView>
</Grid>
The StackPanel that is directly under our slider, acts like a cover for our Slider. Notice the StackPanel has Margin="0,0,10,0", this translates to a 10px distance from the right wall, which allows the Slider area to be exposed as a gray strip that is used to drag the Pane, again the 10px is arbitrary but it has to match the Minimum of the Slider.
I have a ScrollViewer around a Grid to vertically scroll it's content.
<ScrollViewer>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
...
</Grid>
</ScrollViewer>
Inside of this Grid i have another Scrollviewer with horizontal content.
<Grid>
<ScrollViewer Name="ScrollViewer" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled" HorizontalScrollBarVisibility="Hidden">
...
</ScrollViewer>
<Button Name="ButtonRight" HorizontalAlignment="Right" VerticalAlignment="Stretch" Tapped="ButtonRight_Tapped" />
<Button Name="ButtonLeft" HorizontalAlignment="Left" VerticalAlignment="Stretch" Tapped="ButtonLeft_Tapped" />
<Grid>
The HorizontalScrollMode is disabled and HorizontalScrollBarVisibility is hidden because with mouse input, i want to scroll the content with the left/right buttons. The HorizontalScrollMode is disabled to prevent horizontal scrolling when the mouse is inside the ScrollViewer.
private void ButtonRight_Tapped(object sender, TappedRoutedEventArgs e)
{
ScrollViewer.ChangeView(ScrollViewer.HorizontalOffset + ScrollViewer.ActualWidth, 0, 1);
}
With this configuration i can scroll the page vertically even when the mouse is inside the horizontal ScrollViewer. Here is an image to give you an idea:
The problem is with touch. How can i still scroll horizontally when the user is using a touch device? When i enable HorizontalScrollMode touch works as desired, but with a mouse it scrolls horizontally which i try to prevent.
Is there a way to ignore the horizontal scrolling with nested ScrollViewers?
I found a pretty simple solution to solve my problem.
I've added a PointerEntered to my nested horizontal ScrollViewer
<ScrollViewer Name="ScrollViewer" PointerEntered="ScrollViewerImages_PointerEntered" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled" HorizontalScrollBarVisibility="Hidden">
...
</ScrollViewer>
and enabled the HorizontalScrollMode when the PointerDeviceType is Touch.
private void ScrollViewerImages_PointerEntered(object sender, PointerRoutedEventArgs e)
{
if (e.Pointer.PointerDeviceType == PointerDeviceType.Touch)
ScrollViewerImages.HorizontalScrollMode = ScrollMode.Enabled;
else
ScrollViewerImages.HorizontalScrollMode = ScrollMode.Disabled;
}
I put StackPanel into ScrollViewr, When scrolling to last item it returns back to its old position.
<ScrollViewer Margin="0,0,0,20">
<StackPanel>
//Textblocks and Textboxes ...
</StackPanel>
</ScrollViewer>
After search i found that:
ItemsControl, VirtualizingStackPanel and ScrollViewer height
I changed my code to:
<StackPanel>
//Textblocks and Textboxes ...
</StackPanel>
<ScrollViewer>
<VirtualizingStackPanel />
</ScrollViewer>
I can't set CanContentScroll="True" as i can't find it.
Also make exception:
System.InvalidOperationException: A VirtualizingPanel is not nested in an ItemsControl. VirtualizingPanel must be nested in ItemsControl to get and show items.
What must i do, to enable scrolling without returning back to its old position?
Regards,
After search again ...
I found this Post which solve the problem of Scrolling return to old position when open keyboard.
Scrolling page with keyboard shown
code after updates:
<ScrollViewer Height="500" VerticalAlignment="Top">
<StackPanel Height="700">
//Textblocks and Textboxes ...
</StackPanel>
</ScrollViewer>
I'm facing two issues with the code following while I'm making a simple chat app.
The code shows a textblock at the top of the page and two textbox stack at the bottom. Plus a listbox which will be auto height to fill the remaining gap.
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle Height="1" Fill="White" VerticalAlignment="Top"/>
<TextBlock Text="Hello World!" Grid.Row="0" FontSize="36"/>
<Listbox Grid.Row="1"/>
<TextBox Grid.Row="2"/>
<TextBox Grid.Row="3"/>
</Grid>
When I click on one of the top textboxes, the SIP keyboard becomes visible and all content in the page is pushed up. The main issue here is that the top textblock disappears and hides over the top. How can I keep it on top and not moving while the SIP keyboard is viewed?
When the most bottom textbox has focus, the SIP keyboard appears and pushes all content up. In this case, the keyboard will just fit and be sticky to that textbox. However, when the other textbox has focus, the keyboard will make a gap between them. How can I make the keyboard behave as it does when the most bottom one is focused?
When the keyboard pops and unpops, a TranslateTransform runs on the PhoneApplicationFrame, translating the whole screen up and down.
Based on this article, you should be able to get the value of the translation. As you can observe an animation moves the Y property from zero to a specific negative value (based on the control you took focus on).
Option 1: I have not been able to write a descent way of handling this value but you should be able to resize your controls to fit in what's left of the screen.
Option 2.0 (bad): You can cancel or remove this animation. The keyboard will be on top of the screen without any movement. Your turn now to move/resize your controls to fit the remaining space.
public MainPage()
{
this.InitializeComponent();
PhoneApplicationFrame frame = (App.Current as App).RootFrame;
var group = (frame.RenderTransform as TransformGroup);
group.Children.RemoveAt(0); // remove translate transform
}
Option 2.1: There's an issue with 2.0: removing the transform will prevent you from being notified about the keyboard. Setting up a reverse animation on your page's child when the Y property changes will "kind of cancel" the original translation.
<Grid x:Name="LayoutRoot" Background="Transparent" VerticalAlignment="Stretch">
<Grid.RenderTransform>
<TransformGroup>
<TranslateTransform />
</TransformGroup>
</Grid.RenderTransform>
static void OnRootFrameTransformChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
{
// ... edit from the blog article ...
MainPage page = source as MainPage;
page.lb.Items.Add(newvalue);
var oppositeTransform = (TranslateTransform)((TransformGroup)page.RenderTransform).Children[0];
if (newvalue < 0.0)
{
page.IsSipVisibleGuess.IsChecked = true;
oppositeTransform.Y = -newvalue;
}
else if (newvalue == 0.0)
{
page.IsSipVisibleGuess.IsChecked = false;
oppositeTransform.Y = 0;
}
I'm sorry none of these options will magically solve the problem but it may help you code what fits best for your app.
If you find a better solution out of this, please post it as an answer.
Is there any way to display scrollabletext in loose xaml? The equivalent in HTML would be
<div style="overflow:scroll">some long bit of text here</div>
Can you do this in loose xaml?
From my experiments so far it seems that in loose xaml:
You cannot use TextBox -- it must be TextBlock.
TextBlock doesn't seem to have any styling settings which would make it scrollable.
ScrollViewer doesn't seem to be allowed in loose xaml.
Any help gratefully appreciated.
You can use a textbox for scrolling text e.g.:
<TextBox Text="{Binding YourText}" VerticalContentAlignment="Top"
TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto"
MaxHeight="200" MaxWidth="300"/>
This will show scrollbars if your text doesn't fit in the displayed area.
<ScrollViewer Height="239" VerticalScrollBarVisibility="Auto">
<toolkit:PhoneTextBox x:Name="newcTextBox" AcceptsReturn="True" TextWrapping="Wrap"/>
</ScrollViewer>