Scrollviewer back to the old position after scrolling - c#

Here's my scrollviewerr to scroll a Grid. I'm testing in my phone and when I scroll the page up or down it back to the first position :( How can I solve this problem ?
<ScrollViewer Grid.Row="2"
Grid.RowSpan="3"
Grid.ColumnSpan="3" Margin="0"
VerticalAlignment="Top"
VerticalScrollBarVisibility="Visible"
Background="#CC000000"
HorizontalScrollBarVisibility="Disabled">
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" >
<Image Height="100" Width="100" Margin="10,10,346,560" Source="/HoroscopeImages/bachduong.png"/>
<TextBlock HorizontalAlignment="Left" Margin="10,115,0,0" TextWrapping="Wrap" Text="Bạch Dương" VerticalAlignment="Top" Height="36" Width="117"/>
<TextBlock HorizontalAlignment="Left" Margin="10,151,0,0" TextWrapping="Wrap" Text="(21/3 - 19/4" VerticalAlignment="Top" Height="36" Width="117"/>
<Image Height="100" Width="100" Margin="169,10,187,560" Source="/HoroscopeImages/kimnguu.png"/>
</Grid>

just make sure that the container in which ur scrollViewer lies has enough height or set it auto.

Related

how to vertically align a child item in centre of its parent height

I have a stack panel which has another stack panel and I would like the second panel to be at the centre of first stack panel.I changed orientation of these panels and vertical alignment nothing works..
Anybody worked on this ? I would like to have your help.
Update:
<StackPanel Grid.Row="0" Grid.RowSpan="4" Background="White" Visibility="Visible" Orientation="Vertical">
<StackPanel VerticalAlignment="Center" Grid.Row="0">
<ProgressBar Margin="0,15,0,0"
IsIndeterminate="True"
IsEnabled="True" Foreground="Black"/>
<TextBlock Visibility="Visible" Margin="6,6,6,15" Foreground="Black" FontSize="21" TextWrapping="WrapWholeWords" HorizontalAlignment="Center" Text="Loading..."/>
</StackPanel>
</StackPanel>
The problem here is the StackPanel. What stack panel does is that it stacks the items from one side (top, left...) so it's not possible to fully center an item in StackPanel. When items are stacked vertically, the VerticalAlignment property has no effect on items that are direct children of the panel. The same applies for HorizontalAlignment and horizonal stacking.
You should use Grid or Border to center items (I also removed the Visibility values since Visible is the default state):
<Grid Grid.Row="0"
Grid.RowSpan="4"
Background="White"
>
<StackPanel HorizontalAlignment="Center"
VerticalAlignment="Center"
Grid.Row="0"
>
<ProgressBar Margin="0,15,0,0"
IsIndeterminate="True"
IsEnabled="True"
Foreground="Black"
/>
<TextBlock Margin="6,6,6,15"
Foreground="Black"
FontSize="21"
TextWrapping="WrapWholeWords"
HorizontalAlignment="Center"
Text="Loading..."
/>
</StackPanel>
</Grid>
Try this... You have to set Orientation to Horizontal of parent StackPanel.
<StackPanel Grid.Row="0" Grid.RowSpan="4" Background="White" Visibility="Visible" Orientation="Horizontal">
<StackPanel VerticalAlignment="Center" Grid.Row="0">
<ProgressBar Margin="0,15,0,0"
IsIndeterminate="True"
IsEnabled="True" Foreground="Black"/>
<TextBlock Visibility="Visible" Margin="6,6,6,15" Foreground="Black" FontSize="21" TextWrapping="WrapWholeWords" HorizontalAlignment="Center" Text="Loading..."/>
</StackPanel>
</StackPanel>

Buttons resize with page when i dont want them toWPF

Hello I added some buttons to my Main_Page.xaml and they resize with the window while running the application and i dont want that. I want them to stay the same proportion when i run the app.
Button names are: Exercise_tab_left_button, Exercise_tab_right_button
<Page x:Class="TrackFit_Project.Main_Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:TrackFit_Project"
mc:Ignorable="d"
d:DesignHeight="453.635" d:DesignWidth="855.207"
Title="Main_Page"
ShowsNavigationUI = "false" >
<TabControl Margin="10,10,10.333,10.333">
<TabItem Header="Exercise"
HorizontalAlignment="Left"
Width="58"
Height="22"
Margin="-2,-2,0,0"
VerticalAlignment="Top">
<Grid Background="#FFE5E5E5">
<Button x:Name="Exercise_Tab_Profile_Button" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Click="profileButtonClick">
<Image>
<Image.Source>stock profile image.png</Image.Source>
</Image>
</Button>
<Rectangle x:Name="Exercise_tab_rectangle" Fill="#FFCFC6C6" HorizontalAlignment="Left" Height="295" Margin="137,50,0,0" Stroke="Black" VerticalAlignment="Top" Width="625"/>
<TextBlock HorizontalAlignment="Left" Height="234" Margin="169,87,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="548"/>
**<Button x:Name="Exercise_tab_left_button" Content="<" Margin="148,189,655,154" FontSize="18" FontWeight="Bold"/>
<Button x:Name="Exercise_tab_Right_button" Content=">" Margin="717,189,83,155" FontSize="18" FontWeight="Bold"/>**
<TextBlock x:Name="Log_Out_Text_Block" HorizontalAlignment="Left" Margin="10,105,0,0" TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold">
<Hyperlink x:Name="Log_out_hyperlink" Click="Log_out_hyperlink_Click">Log out</Hyperlink>
</TextBlock>
</Grid>
</TabControl>
You have to specify the properties Height and Width instead of setting these values indirectly using the Margin property.
Currently the Margin property determines the width and height of the buttons when they are arranged in the Grid. This can be useful when the UI is static and must not resize when the window is resized.
Assuming you want the UI to dynamically adapt to the size you should embed the Rectangle, TextBlock and the Buttons in a second Grid in a way like this (you might want to figure out the right values for the Margin and size of the buttons):
<Grid Margin="137,50,10,10">
<Rectangle x:Name="Exercise_tab_rectangle" Fill="#FFCFC6C6" Stroke="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<TextBlock HorizontalAlignment="Stretch" Height="234" Margin="32,37" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Stretch" />
<Button x:Name="Exercise_tab_left_button" Content="<" Margin="11" VerticalAlignment="Center" HorizontalAlignment="Left" Width="20" Height="50" FontSize="18" FontWeight="Bold"/>
<Button x:Name="Exercise_tab_Right_button" Content=">" Margin="11" VerticalAlignment="Center" HorizontalAlignment="Right" Width="20" Height="50" FontSize="18" FontWeight="Bold"/>
</Grid>

Remove Margin Button ContentDialog Windows 10 Mobile - XAML

In my ContentDialog. On focus any element, type TextBox, the keyboard appear. When Keyboard appear, have a big margin above( so 20-30 px maybe). This space is the same height of the space allocated for Primary and Secondary Buttons. If have this margin, my content have a scrollbar and I do not want it. I have space sufficient to show all content of my dialog if remove this margin/padding of course.
This topic is related with: ContentDialog Windows 10 Mobile XAML - FullScreen - Padding
<StackPanel Orientation="Horizontal">
<TextBox x:Name="txtUser" IsSpellCheckEnabled="False"
Background="Black" Foreground="Red BorderBrush="Red" BorderThickness="1"
PlaceholderText="Digit your username"
GotFocus="txtUser_GotFocus" Style="{StaticResource TextBoxStyle}"
TextChanged="txtUser_TextChanged"
/>
<Button x:Name="MakeOff"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton x:Name="btnRegisterTwo"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button x:Name="MakeOffThree"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
</StackPanel>
</Grid>
Someone help to remove this?
Thanks
Interestingly, the ContentScrollViewer inside the style is given a fixed height during run-time, and a hack is to remove this x:Name from the ScrollViewer.
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled" Margin="{ThemeResource ContentDialogContentScrollViewerMargin}" IsTabStop="False">
Also, you will need to add the RowDefinitions back to the root panel LayoutRoot in the style.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

WPF TextBlock inside a Scrollviewer cuts off some text

So I have this problem, a textblock's text gets cut off, even though you can still scroll with scrollviewer to the end.
You can see the scrollviewer is still able to scroll to where the text should be.
Heres the XAML:
<Grid>
<ScrollViewer Height="Auto" VerticalScrollBarVisibility="Auto" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" >
<TextBlock x:Name="text" Padding="5" Margin="0" TextWrapping="Wrap" Text="" FontSize="24" TextTrimming="WordEllipsis" VerticalAlignment="Bottom" />
</ScrollViewer>
</Grid>
EDIT the whole pivot control code:
<controls:Pivot x:Name="pivot" Margin="0" Grid.Row="1" Title="title" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
<controls:PivotItem Header="Straipsnis">
<Grid>
<ScrollViewer Height="Auto" VerticalScrollBarVisibility="Auto" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" >
<Border BorderBrush="White" BorderThickness="1">
<TextBlock x:Name="text" Padding="5" TextWrapping="Wrap" Text="" FontSize="24"/>
</Border>
</ScrollViewer>
</Grid>
</controls:PivotItem>
<controls:PivotItem Header="Komentarai">
<Grid>
<ListBox x:Name="commentsListBox" ItemTemplate="{StaticResource CommentsList}" Height="Auto" Width="Auto" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" FontSize="20"/>
<TextBlock x:Name="errorText" TextWrapping="Wrap" Text="Nėra komentarų..." FontSize="36" HorizontalAlignment="Left" Margin="10,0,0,0"/>
</Grid>
</controls:PivotItem>
</controls:Pivot>
Well, turns out the TextBlock has limits, 2048x2048 or something like that, after which the text just gets cut off.
So, I found this custom text control that bypasses this limitation :) Maybe someone will find it useful, I did.
Creating Scrollable TextBlock for WP7.
Download link

Grid won't stretch in Landscape

I have this grid in my Page and i have a problem that in landscape mode it rotate and the textbox and the button are stuck in the center and not stretch,any idea how to fix it?
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0" >
<StackPanel Orientation="Vertical" Margin="0,0,0,0" Width="480">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center">
<TextBox Name="searchTextBox" Height="72" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Margin="10,0,0,0" TextChanged="SearchTextDidChange" HorizontalContentAlignment="Left" VerticalContentAlignment="Top" Width="349" HorizontalAlignment="Left"/>
<Button Content="Search" Margin="0,-3,0,0" VerticalAlignment="Top" Height="77" Click="DidPressSearchButton" HorizontalContentAlignment="Right" VerticalContentAlignment="Top" Padding="14,5,10,6" HorizontalAlignment="Right"/>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
It is because you use stackpanel, use only the grid instead and set the column definition like this!
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="130" />
</Grid.ColumnDefinitions>
<TextBox Name="searchTextBox"
Grid.Column="0"
Height="72"
TextWrapping="Wrap"
Text=""
VerticalAlignment="Top"
Margin="10,0,0,0"
TextChanged="SearchTextDidChange"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Top"
/>
<Button Content="Search"
Grid.Column="1"
Margin="0,-3,0,0"
VerticalAlignment="Top"
Height="77"
Click="DidPressSearchButton"
HorizontalContentAlignment="Right"
VerticalContentAlignment="Top"
Padding="14,5,10,6"
HorizontalAlignment="Right" />
</Grid>
First remove the Width="480" attribute from the first StackPanel. Also remove the Width="349" attribute from the TextBox element.
That should allow the elements to stretch on landscape mode.

Categories