lock a scrollviewer in place - windows-phone-7

I have an inkpresenter inside a scrollviewer for a Windows Phone 7 application. Often when the user starts to draw, the scrollviewer takes over mid stroke, making it hard to actually draw stuff. I tried disabling the ScrollBarVisibility when the inkpresenter needs to be used, but then the scroll viewer automatically pans back up to the top. So how can I prevent the scrollviewer from scrolling when the inkpresenter is in use, while still maintaining the scroll position?
<ScrollViewer Name="ScrollBars" VerticalScrollBarVisibility="{Binding ScrollEnabled}" >
<Canvas Height="2000">
...
<InkPresenter Name="InkCanvas" Strokes="{Binding Strokes}" Canvas.Top="500" />
</ Canvas >
</ScrollViewer >
Edit:
So I tried using the scrolling function in the codebehind to update the vertical offset, where I have a button linked to the following code:
var offset = scrollViewer.VerticalOffset;
ScrollEnabled = ScrollBarVisibility.Disabled;
scrollViewer.ScrollToVerticalOffset(offset);
Again, it just goes back up to the top. Any idea whats wrong?

After disabling the VerticalScrollBarVisibility call Scrollviewer.ScrollToVerticalOffset to manually bring the InkPresenter into view.

Related

Xamarin Forms label animation at bottom of screen

I'm essentially making a 'shopping cart' UI and I want it so that when the user hits the 'Add' button, a little tiny box-label appears at the bottom of the screen that says 'Added Item' or something like that.
My question is how to do that with my current set up. I am currently using a nested Grid inside of a Scroll view for the main content of the page. I want the box-label to fade in at the bottom of the screen and stay located at the bottom of the screen ontop of everything else even if you scroll, until the animation fades.
Now i figure it doesn't make sense to add it into the grid since the grid's end will be out of view in the scrolling part of the scroll view, and same for the Scroll View. I am considering nesting the entire scroll view inside of a stack layout but i fear the button will just be located at the end of the stack layout under the scroll view instead of on TOP of the scroll view. How do you recommend I achieve this effect?
I prefer not to use a custom renderer if possible due to my lack of experience in the three separate platforms.
Thanks
Make vertically oriented stack layout. When you need to add you animation add it programmatically to the stack. When it finishes remove it from stack. Your scroll view will not affect animation

How to hide SystemTray

I am having an issue with SystemTray.
My app has Panorama and Pivot screens. So i wish to make SystemTray invisible on both screens.
My code was:
<phone:PhoneApplicationPage shell:SystemTray.IsVisible="False"
The headache mostly was because tray reappears after gesture is received like flick or any other actions
I have made the following changes also:
shell:SystemTray.Opacity="0"
shell:SystemTray.ForegroundColor="Transparent"
shell:SystemTray.IsVisible="True"
It became worse. Tray became visible and with White color in spite of setting it as Transparent.
Regards.
Try setting visibilty in the code behind using
SystemTray.IsVisible = false;
If it doesn't work, in the constructor of the page or in the OnNavigatedTo function try the following line of code
SystemTray.SetForegroundColor(this, (Color)App.Current.Resources["PhoneBackgroundColor"]);
(Color)App.Current.Resources["PhoneBackgroundColor"] will set the foreground color as backgroud giving it a transparent effect.
**Will only work if you haven't manually added any custom background.
Let me know if it doesn't work.
try to delete shell:SystemTray.IsVisible="False" from the top of you xaml page. Then try it.
If this not works, then use the code behind on the main page loading event like SystemTray.IsVisible = false;
The visibility of the SystemTray needs to be set this way in the code behind per MSDN.
SystemTray.SetIsVisible(this, false);
Alternatively, if you just want to simulate the same "invisible" effect, set the opacity to 0 to hide most of the bar and the foreground color to transparent to hide the time. The one caveat is that the rest of your controls will still know it is there, so you'll need to adjust the top margin of at least the first control on the page up by 32 pixels (ie Margin="0,-32,0,0) in order to finish off producing the exact same effect as setting it to false in the XAML.
SystemTray.SetOpacity(this, 0);
SystemTray.SetForegroundColor(this, Color.FromArgb(0, 0, 0, 0));

howto make a grid in a WP7 app bigger than the screen size?

i have a problem with my WP7 app. i'm creating a screen where the user can make some input and then generate something.
but i can't fit the whole input into the screen size, so i would need a element which has a scroll bar or something and i can add so many elements as i which and then the user scrolls up and down. how to make this?
There is a ScrollViewer control that you can use. Put the grid in the ScrollViewer and you can then scroll around.
encapsulate your content in a <scrollviewer> That should show a scrollable content.

Windows Phone 7 WrapPanel within a ScrollViewer

I've got a page with the following XAML in my application.
<ScrollViewer VerticalScrollBarVisibility="Auto">
<toolkit:WrapPanel x:Name="WrapPanelImages" />
</ScrollViewer>
In the page constructor I load a set of images into the WrapPanel. These images are being displayed correctly but scrolling isn't working very well. I'm testing this on the emulator. The problem is that if I drag and scroll downwards as soon as I let the mouse go the ScrollViewer is scrolling back to the top. So it is impossible to get to the bottom of the WrapPanel. If I add the HorizontalScrollBarVisibility property to the ScrollViewer and set it to Auto I get a long line of images that flows off the screen horizontally, but the scrolling works in that case i.e. if I scroll to the right and let go of the mouse it doesn't scroll back to the left automatically.
How can I fix this scroll-to-the-top behavior? Or is this a bug in the emulator? My AppHub registration has not been approved yet so I can't sideload the app on my phone to test it.
At a glance this sounds like the same problem you get when wrapping a TextBlock in a ScrollViewer and you haven't constrained the ScrollViewer's size to the device height.
Check your ScrollViewer isn't some very large height such that the content is fitting entirely in it without needing to scroll.
If that is the case the action of it bouncing back is normal for trying to scroll past the beginning or end of the content.

How to automatically scroll to the bottom of an HTML document loaded in a WebBrowser or Frame?

I'm using an HTML document to show text output in my application - this gives me the flexibility of HTML and the power of CSS, and I can publish the generated HTML as a log file openable in any browser. When new information is available, I update the HTML file and then call Refresh() on my WebBrowser control. Naturally, I want the user to see the newest information without having to manually scroll down, so I need to automatically scroll to the bottom of the document after the browser refreshes and changes have been rendered.
I have the code to scroll to the bottom:
(this.browser.Document as HTMLDocument).body.scrollIntoView(false);
The issue is that I've tried many events, and all of them fire BEFORE the web browser control has actually finished rendering the updated source, so I end up scrolling to the bottom before the new content is displayed! This is incredibly frustrating - does anyone know how to solve this problem? How can I know when the new content is COMPLETELY finished displaying so that I can scroll to the bottom of it?
EDIT: I tried enclosing a Frame inside a ScrollViewer:
<ScrollViewer x:Name="scrollBar" Grid.Row="1" Grid.Column="0">
<Frame Name="browserBox" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" NavigationUIVisibility="Hidden"/>
</ScrollViewer>
This works fine for application pages (Page class) because the Frame grows large enough to fit the entire page, causing the enclosing ScrollViewer to adjust and fire a ScrollChanged event. I was momentarily very excited, but then discovered that unfortunately, when I load an HTML file into the frame instead, the frame does NOT resize to fit the content, but rather introduces its own scroll bar, so now I've got one scroll bar inside of another, and I can't subscribe to events for the inner scroll bar. :(
OMG! I found the answer! Based on a hint I found in this post:
Wrap a frame with a scroll viewer and subscribe to the frame's ContentRendered event:
<ScrollViewer x:Name="scrollViewer">
<Frame x:Name="frame" Source="pack://siteoforigin:,,,/HTMLPage1.htm" NavigationUIVisibility="Hidden" ContentRendered="Frame_ContentRendered" />
</ScrollViewer>
On render, measure the HTML content and update the size of the frame (add a reference to .NET assembly Microsoft.mshtml):
using mshtml;
private void Frame_ContentRendered(object sender, EventArgs e)
{
HTMLDocument htmlDoc = ((this.frame.Content as WebBrowser).Document as mshtml.HTMLDocument);
if (htmlDoc != null && htmlDoc.body != null)
{
mshtml.IHTMLElement2 body = (mshtml.IHTMLElement2)htmlDoc.body;
this.frame.Width = body.scrollWidth;
this.frame.Height = body.scrollHeight;
}
this.scrollViewer.ScrollToEnd();
}
Finally, eliminate the scroll bar housed within the Frame by disabling scrolling within your HTML document itself:
<body scroll="no">
Woohoo! I'll go throw a party now. Scrolling to the bottom of an HTML doc should not have taken a week (but it did).

Resources