I have a scrollviewer in which I have 2 WrapPanels. I would like to know how I would go about getting the scroll viewer position once a user scrolled to the last end of the last panel. I am trying to show and hide an on screen arrow that indicates there is more content, but off to the right of the screen, but I would like to hide the button once they get to the end of the scroll viewer.
Can someone point me in the direction of what I would do in the code behind to get the horizontal offset position of the scrollviewer based on the panning. Mainly I want to get the far right position and hide the Arrow button when it gets to that point. My width for each Panel is currently 1920, so the window is currently 1920 width which hides the next panel in the Stack.
My XAML currently is below:
<ScrollViewer x:Name="scrVwrProductCategories" Style="{DynamicResource scrVwrFullWidthHorizontal}" PanningMode="HorizontalOnly" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled">
<StackPanel Width="Auto" Height="750" HorizontalAlignment="Right" Orientation="Horizontal">
<WrapPanel Style="{DynamicResource wrpPnlProductCategoriesPanels}" x:Name="wrpPnlProductCategories">
<!-- Constant currently for count of buttons per WrapPanel = 6-->
<!-- This is filled in dynamically at runtime
<controls:btnLarge Height="325" Width="500" Margin="20,0" TitleText="My Item" NoteText="" ShowNote="Collapsed" ShowSubTitle="Collapsed"/>
-->
</WrapPanel>
<WrapPanel Style="{DynamicResource wrpPnlProductCategoriesPanels}" x:Name="wrpPnlProductCategories2">
<!-- Constant currently for count of buttons per WrapPanel = 6-->
<!-- This is filled in dynamically at runtime
<controls:btnLarge Height="325" Width="500" Margin="20,0" TitleText="My Item" NoteText="" ShowNote="Collapsed" ShowSubTitle="Collapsed"/>
-->
</WrapPanel>
</StackPanel>
<Kiosk:SwipeForMoreArrow x:Name="ctrlSwipeForMoreArrow" HorizontalAlignment="Right" VerticalAlignment="Center" Visibility="Collapsed"/>
</ScrollViewer>
Do you aim to make this possible only through XAML? Otherwise you could try to get the this.HorizontalOffset of the Scrollviewer via the OnScrolledChanged Event to identify wether it´s 0 or max.
Maybe this link might help too:
How to find that ScrollViewer is scrolled to the end in WPF?
Related
Currently I have a stackpanel with 2 buttons which I have placed in a single row whithin my grid. I want to draw a border around the stackpanel, but the stackpanel is filling the whole row, it doesnt stop at the last button (as expected I suppose):
Image of border around stackpanel
How can I modify this so the stackpanel or border stops at the last element without hardcoding or dynamically calculating a bottom margin?
<Border Background="#FF303841"
Margin="5"
CornerRadius="3"
Grid.Row="2"
Grid.Column="4">
<StackPanel>
<TextBlock Text="OTHER"
Foreground="White"
FontWeight="Medium"
FontFamily="Poppins"
FontSize="16"
HorizontalAlignment="Left"
Margin="5,5,0,0"/>
<Button Style="{StaticResource linkBtn}">TEST1</Button>
<Button Style="{StaticResource linkBtn}">TEST2</Button>
</StackPanel>
</Border>
As per emoacht's comment above, the solution was to simply add VerticalAlignment="Top" to the border. That made it stop filling the parent which was the grid row.
The cause of this behavior is that the default parameter for VerticalAlignment is stretch, so it needs to be overridden.
I have a stack panel and it has one grid and I'd like the grid to have same height as stack panel.
I tried playing with VerticalAlignment stretch or height 100% nothing works
I tried setting the values programatically OnNavigatedTo but it doesn't have the effect
Any suggestions to resolve this are welcome
Please find the code below
<StackPanel Grid.Row="0" Grid.RowSpan="4" Background="#CFFF" Visibility="Visible" Orientation="Vertical" Name="ProgressOverlay">
<Grid Name="Overlaygrid"">
<StackPanel VerticalAlignment="Center" Grid.Row="0">
<ProgressBar
IsIndeterminate="True"
IsEnabled="True" Foreground="Black"/>
<TextBlock Visibility="Visible" Foreground="Black" FontSize="25” T HorizontalAlignment="Center" Text="Loading"/>
</StackPanel>
</Grid>
</StackPanel>
A StackPanel takes by default the size needed by its content and shrinks to the size required, while a container control like Grid stretches to the full size available (e.g full page).
If you want to keep the outer StackPanel, you will have to set VerticalAlignment="Stretch" on the StackPanel, not on the Grid.
But since the Grid is the only single content item in your outer StackPanel, you can remove it and move the properties Grid.RowSpan="4" Background="#CFFF" Visibility="Visible" to the Grid. Always try to keep your XAML structure as simple as possible.
Alright, so I have a XAML page with a TextBlock in a Windows Phone 8 application. My dilemma is this:
I pragmatically add more content (formatted lines with Inlines.Add(new Run...) to the TextBlock. The text block is currently filled from bottom to up because of the ScrollViewer in the sense that a line appears in the bottom after another. I would also be fine with them starting to appear from the top as long as the TextBlock would continue to scroll down (actually this might look better) once it is full. My TextBlock is inside a ScrollViewer as below:
<Popup x:Name="send_message_xaml" Grid.Row="1" VerticalOffset="0" Width="750" Height="auto">
<StackPanel Orientation="Vertical" Margin="0,0" Width="auto" Height="auto">
<ScrollViewer Height="345" HorizontalAlignment="Left" Margin="0,0,0,0" Name="scrollViewer1" VerticalAlignment="Bottom" Width="420" VerticalScrollBarVisibility="Auto">
<TextBlock x:Name="message_log" Margin="40,50,0,0" TextWrapping="Wrap" Width="420" VerticalAlignment="Top" FontSize="22"/>
</ScrollViewer>
<TextBox x:Name="message_to_send" InputScope="Chat" Width="480" KeyDown="message_to_send_KeyDown" Margin="15,0"/>
</StackPanel>
</Popup>
How can I get the textblock to scroll so that the newest appended message is always at the bottom? I found a bunch of these threads but none seem to solve my problem so far. Do I need to add some code somewhere with the appending?
You need to update the VerticalOffset based on the ScrollableHeight. When you add new inlines to the TextBlock, its height is going to change and that will notify the parent ScrollViewer. So, after you add new items to the inlines, run the Measure method and update the VerticalOffset.
Here is an example.
I have a a TreeView that fills the top part of the application, but since the number of items in the TreeView changes, my Apply button changes its position vertically. Is there a way to anchor it to the bottom part of the window, so it's always on the right bottom part of the window, i.e. 10x10 distance from the right bottom edge.
You can either set the HorizontalAlignment and VerticalAlignment on the TreeView or Button (I cannot tell which control you are trying to anchor), or you could place the control inside a DockPanel.
To space the control away from others use the Margin.
Margin="0 0 10 10"
will give you the margin only on the right and bottom
I hope this makes it a bit clearer:
<Window>
<DockPanel VerticalAlignment="Stretch">
<TreeView DockPanel.Dock="Top" />
<Button DockPanel.Dock="Bottom" Margin="0 0 10 10" />
</DockPanel>
</Window>
To achieve anchoring, Set following properties:
Width="auto"
Height="auto"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Set margins as needed.
Example:
<TabControl
Name="tabControl1"
HorizontalAlignment="Stretch"
Margin="40,40,40,40"
Width="auto"
Height="auto"
VerticalAlignment="Stretch">
I think you need this in the XAML of your button:
HorizontalAlignment="Right" VerticalAlignment="Bottom"
Is there a way to zoom a viewbox content, excpet for one control?
I have a viewbox with a grid, and in this grid I have some controls and I'm trying to zoom all the controls in the viewbox except one, is it possible?
Many thanks,
Paulo
You can use a grid to add layers to your layout. That way, you can zoom one set of items, and leave another set un-zoomed.
<Grid>
<Viewbox>
<!-- Controls to zoom -->
</Viewbox>
<!-- Control to exclude from zoom -->
</Grid>
The order of the view box and the other controls in XAML will depend upon which layer appears on top.
If that doesn't quite do what you want, leave a comment and I'll revisit the answer.
EDIT You want the unzoomed control to be positioned relative to the (0,0) of the Viewbox. That will happen in this situation because both children of the grid are in cell (0,0) which means that their top-left corners are aligned. Can you give an example of what you have in XAML, and what's wrong with it (perhaps edit your original question)?
Here's some XAML to try:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Background="Green">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Viewbox>
<Rectangle Fill="Yellow" Width="10" Height="10" />
</Viewbox>
<TextBlock>I am positioned at (0,0)</TextBlock>
<TextBlock Margin="50,50">I am positioned at (50,50)</TextBlock>
</Grid>
</Page>
That gives a layout like this:
http://img20.imageshack.us/img20/2045/layout1m.png
But note that when the height is reduced, the grid becomes wider than the view box, and so the content is layed out like this:
http://img20.imageshack.us/img20/9397/layout2i.png
I guess that's not what you want. In that case, you use a canvas and go for something like this:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Background="Green">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Viewbox>
<Rectangle Fill="Yellow" Width="10" Height="10" />
</Viewbox>
<Canvas>
<TextBlock>I am positioned at (0,0)</TextBlock>
<TextBlock Margin="50,50">I am positioned at (50,50)</TextBlock>
</Canvas>
</Grid>
</Page>
Which looks like this:
http://img20.imageshack.us/img20/6743/layout3i.png