What is VerticalPanningRoot (C# Metro ScrollBar Template) - c#

I am currently looking at the C# Metro default controltemplate for scrollbar. And in it the scrollbar template, there is this portion that called verticalpanningroot. Do you have any idea which part of the scrollbar UI is it responsible to render?
<Grid x:Name="VerticalPanningRoot" VerticalAlignment="Top" MinHeight="66">
<Border x:Name="VerticalPanningThumb"
Background="{StaticResource ScrollBarPanningBackgroundThemeBrush}"
BorderBrush="{StaticResource ScrollBarPanningBorderThemeBrush}"
BorderThickness="{StaticResource ScrollBarPanningBorderThemeThickness}"
Width="4" MinHeight="17"/>
</Grid>
Thanks.

If you mean x:Name="VerticalPanningRoot", it just means that you can access your Grid by it's name in your code behind (C#) which is VerticalPanningRoot.
Example:
VerticalPanningRoot.HorizontalAlignement = // something
Edit:
Your Grid is actually holding the "thumb" (the Border element) of the ScrollBar (the thumb is the part you can drag and drop to go down and up more faster).
You can see here all the ScrollBar parts, this image is taken from this tuto.

Related

ScrollViewer scrollbars not appearing

I'm working on updating previously working app. Testing shows the ScrollViewer acting oddly when the Zoom makes part of the contained images fall off the screen. The original app was created with VS 2013 as a Universal Windows app. The new app is created with VS 2015 as a Universal Windows app though the target build has been shifted to the anniversary release.
My XAML is defined so:
<ScrollViewer x:Name="SV1" Grid.Row="1" HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
SizeChanged="SV1_SizeChanged" ZoomMode="Enabled" >
<StackPanel x:Name="ImagePanel" Orientation="Horizontal" HorizontalAlignment="Center"
VerticalAlignment="Top" >
<Image x:Name="ImageLeft" Stretch="Uniform" />
<Image x:Name="ImageRight" Stretch="Uniform" />
</StackPanel>
</ScrollViewer>
The user can change the ZoomLevel of the ScrollViewer. The zoom change is implemented using SV1.ChangeView(null, null, zoomFactor).
The images visibly change size on the screen, but as they fall off the right or bottom the scrollbars don't appear. Even changing the visibility properties to "Visible" instead of "Auto" doesn't cause the scrollbars to appear. When the size changes and for a brief instant a thin line will appear where the bars should be and then disappear. Additionally, user input that would normally scroll like moving the mouse wheel does nothing.
Based on other commentary, I've tried replacing the StackPanel with a Grid with no apparent effect.
I'm drawing a blank. Any ideas?
It appears the answer is the next control which shares the same visual space needs to be set to Visibility="Collapsed" in the XAML. The visibility is controlled programmatically, but without the XAML tag the scrollbars of the previous control don't appear and with the tag they do.

WP8: ListBox last row won't remain scrolled into view

When vertically scrolling into view, I can pull the last row into view, but on releasing the drag, the last row springs back (partially) out of view. I think inaccuracy of measure can be attributed to a grid that I'm using as the listbox's header but I'm currently unable to fix this to that they work together correctly.
<Border>
<StackPanel>
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto">
<StackPanel>
<Grid x:Name="_headers"/>
<ListBox x:Name="_dataGrid"/>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Border>
**Update
This example removes the scroll and also suffers from the same truncated row problem as the example above. The header grid row also doesn't scroll horizontally with the listbox rows which is an even bigger problem for my solution.
<Border>
<StackPanel>
<Grid x:Name="_headers"/>
<ListBox x:Name="_dataGrid"/>
</StackPanel>
</Border>
It's because you put ScrollViewer inside StackPanel. StackPanel doesn't limit control's size so the ScrollViewer can grow forever and never scroll properly. Its size must be limited. Grid can do it perfectly (if only the height of the row is set to *, not Auto).
Also, in my opinion you shouldn't put ListBox inside ScrollViewer, because ListBox already has its own scroll feature.
Never ever use a ListBox inside a ScrollViewer, you will run into scrolling conflicts.
As far as I can see, you need to add a header to your list. LongListSeelctor might be the best option, since it has got a Header property (also Footer):
See: http://www.geekchamp.com/articles/the-new-longlistselector-control-in-windows-phone-8-sdk-in-depth

WPF Facebook like scrollbar behavior using scrollviewer

I have a simple scrollviewer setup in my wpf application. Everything works fine, Now I want my scrollviewer's content should use the space of my the scollbar as well, As my scrollbar is transparent it could easily display the content.
Just like the scrollbars in facebook. Attached is the image of the output. Green Section is the content and red section is scollviewer's area.
I am using WrapPanel in my scrollviewer, this is the code snippet
<ScrollViewer x:Name="ScrollViewer1"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Hidden">
<WrapPanel x:Name="WrapPanel1" SizeChanged="WrapPanel1_SizeChanged" />
</ScrollViewer>
You have to edit the ScrollViewer's ControlTemplate which should look like the one in this page : http://msdn.microsoft.com/en-us/library/aa970847(v=vs.110).aspx
In the ScrollViewer Control Template Example, you can see that the ScrollContentPresenter is inside a Border which is inside the first row of a 2-rows Grid.
Setting the RowSpan to 2 for this Border would achieve the effect you want.

ElementFlow element disables controls

I am using the Fluidkit ElementFlow control that I use to display a UserControl that contains textblock with a ScrollViewer as well as button and when they are displayed in the ElementFlow control, all of the buttons and the ScrollViewer seem to be disabled because I can't scroll the ScrollViewer scrollbar and even a simple action as hovering over a button doesn't do anything to the button.
Below is an example of the TextBlock in a ScrollViewer that does not allow for scrolling when used in the ElementFlow.
How can this be fixed?
<ScrollViewer
Height="1200" Width="800"
MaxHeight="1200" MaxWidth="800"
VerticalScrollBarVisibility="Auto">
<TextBlock
Height="Auto" Width="800"
MaxWidth="800"
FontSize="20"
Text="Super long text"
TextWrapping="Wrap"/>
</ScrollViewer>
Just looking over the source code for the project, it looks like it is creating a 3D mesh, and painting the controls on the mesh. This would prevent all user interaction. I don't think there is an easy way to work around this.
However, since you have the source code, you can do the work yourself to make it happen. You're going to need to modify how the ElementFlow represents its items. Look at the CreateMeshModel function. It is currently creating a mesh and applying a VisualBrush to it. Instead, look at the blog post Interacting with 2D on 3D in WPF to figure out what needs to happen.

wpf canvas won't resize

I am trying to learn WPF, but I have reached an impasse. The problem is that I have a control derived from UIControl, relevant parts:
<Grid>
<Border x:Name="OuterBorder" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" BorderThickness="2" BorderBrush="Black">
<Canvas x:Name ="InternalCanvas" Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Ivory">
</Canvas>
</Border>
</Grid>
This gives me a little black dot, when I render the control; I assume this is the border.
I then add code to the constructor after InitizializeComponents:
Label l = new Label();
l.Content = "HELLO";
l.BorderThickness = new Thickness(2);
l.BorderBrush = Brushes.Bisque;
if (this.GetType() == typeof(SO.SOGraphNode))
this.InternalCanvas.Children.Add(l);
The intent of the code is that if the class is not inherited, it should show some kind of placeholder. Which it does.
The problem is that InternalCanvas and it's ecplipsing OuterBorder won't resize around the newly created nice label.
The border remains a dot-border and InternalCanvas' Ivory background is not seen behind the label.
I have googled this alot, beliving that I needed to refresh or update the canvas/control elements, but I'm not so sure anymore. Mainly through watching a lot of Dispatcher.Invoke variations, which I have applied very liberally through out the code at different points, every time with no change in behavior.
WPF is a bit oblique to me still, if anyone knows how I could resolve this problem I do indeed have a shiny "Correct Answer" to dole out. :)
Edit 1 - Screenshot of the results:
Notice the general lack of Ivory background and OuterBorder still remains a small artifact in the topright corner of the control while the childelement is obviously much larger.
Is it important for you that the "InternalCanvas" element is type of canvas?
Because if you use for example a Grid instead, the sample works fine:
<Border x:Name="OuterBorder" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" BorderThickness="2" BorderBrush="Black">
<Grid x:Name ="InternalGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Ivory">
</Grid>
</Border>
edit:
The reason for this behaviour you can read in the remarks section in MSDN:
Canvas is the only panel element that has no inherent layout characteristics. A Canvas has default Height and Width properties of zero, unless it is the child of an element that automatically sizes its child elements. Child elements of a Canvas are never resized, they are just positioned at their designated coordinates. This provides flexibility for situations in which inherent sizing constraints or alignment are not needed or wanted. For cases in which you want child content to be automatically resized and aligned, it is usually best to use a Grid element.
Can you show us how it rendered? I tried your xaml in a new project and I can't figure out what the problem is

Categories