How do I move a canvas on the listview? - xaml

I want to keep an always topmost canvas on a listview. Canvas should be stretch on window and if the user tries to scroll listview, listview must scroll but canvas must be topmost transparently and user can see listview. My XAML tree like below that:
<Grid>
<ScrollViewer>
<ListView>
</ListView>
</ScrollViewer>
<Canvas Name="DxPanel"></Canvas>
</Grid>
I am trying to make a note taking app. The reqirements like that:
Each listview has image or richeditbox control (I have already done it)
The user can draw something on image or rich text
The listview must have infinite scroll ability and data of list view must retrieve from database and data and UI recycling must be supported.
The drawing layer must be endless scroll
I know this is hard challenge. I am planning to save stroke , and text data in db and image data in disk.

First of all, I need to say, there is no need to put a ListView inside a ScrollViewer, by default ListView can be scrolled if there are many items, this is because there is a ScrollViewer inside the template of ListView, you can refer to the default ListView styles and templates.
Then, if your Canvas keeps covering the ListView, there is no way for your ListView to get focused, let alone make the ListView scrolling. So I suggest you to rethink about this, why should your Canvas be topmost transparently?
If you want your ListView can be scrolled/focused, and in the meanwhile your layout in the Canvas can be seen, then you can put the ListView above the Canvas, by default the background of ListView is transparent.
You can leave a comment to tell us what is in your Canvas, why this Canvas should be stretch and placed on the top of the ListView, maybe we can try to find other way to solve your problem.

Related

Xamarin forms Horizontal listview showing images from ObservableCollection

I want to display Images/Thumbnails of photos that I've been taking in a horizontal view as a part of my content page.
I've stored the images paths as strings in a ObservableCollection. What's the best approach to do this in XAML and PCL.
Would be great if 3 or something images are shown on the screen, and standard image if no images have been added or if string is null, and to have these in a scrollview or listview so that all of the images in the ObservableCollection could be displayed.
maybe something like this
/Oliver
Use Bindable (Horizontal) Scroll View. see this link it's help you.
http://www.fabiocozzolino.eu/a-little-and-simple-bindable-horizontal-scroll-view/

Xamarin Forms changing the size of a viewcell dynamically

Using a Xamarin Forms ListView with a custom ViewCell, is it possible to have a list item expand based on an event? Please ignore the orange lines, but reference the below picture...
Regular cell not expanded
User has tapped the triple dots causing the ViewCell to expand to show additional content
Is this possible? What is the technique to make that work?
You can have containers or elements inside your viewcell whose Visibility can be controlled based on the click. You will have to re render the elements once its expanded or collapsed for the viewcell to resize. Or else you will have the Viewcell being the size it was initially rendered, but the contents inside it overflowing.
Check out the following links :
How to implement Expandable/Collapsible ListView in xamarin forms?
CollapseListView-in-xamarin.forms
ExpandableListView

Scrolling through page Windows Phone 8

i want to make my page scrollable.
as you can see in image that, there are 9 buttons and no room for adding more buttons
so, how can i add more buttons and make page scrollable so that any button can be selected?
i already tried to enclose all these button in scroll viewer but it didn't worked, it scrolls but when i release my finger from screen it quickly goes back i.e. i can see buttons which are at bottom but can't select those.
You have to give a particular height to your scrollviewer because by default s always get to set to the height of the contents in it so no scrolling :).
Just Set the Height Property of your Scrollviewer to some value. Like:-
<ScrollViewer Height="700">
Content..
</ScrollViewer>
cheers :)

How can I create an AppBar in Metro that works in a WebView?

So I got a normal AppBar to work in a C# metro app, but the problem is I need the app to display an html page. I create a WebView that takes up 100% of the width and height of the page, and by doing so, the AppBar doesn't show up anymore on right clicks and edge swipes. Is there a way for the AppBar to work with such a WebView in place?
--Resolved--
What I ended up doing was adding a 1px border around the WebView so that swipes could be detected. Since what I included in my WebView dynamically changes with time, WebViewBrush didn't work out for me. Instead I just shrunk the size of the WebView when the AppBar is opened and then expanded it when it was closed.
Not trying to steal Filip's answer, but I think a few more details are necessary to fully answer the question.
Even with a WebView running full-screen, the AppBar tries to show itself when you right-click or swipe. You can prove this by subscribing to the AppBar.Opened event. What's interesting is that the AppBar appears to somehow know it's obscured and automatically closes itself. Even if it didn't close itself, you wouldn't be able to see it because it's obscured under the WebView.
Filip had the right idea about hiding the WebView and using WebViewBrush while the AppBar is open. You can find a good example of doing that here:
http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webviewbrush.aspx
As for when to swap between WebView and WebViewBrush, I'd simply do it on AppBar.Opened and reverse it on AppBar.Closed. AppBar is light dismiss, meaning as soon as you tap anywhere outside of it's client area it will close.
One last word of advice: In my testing it seemed that the swipe gesture was getting swallowed sometimes. That problem seemed to go away when I put a 1 pixel boarder on top and bottom of the WebView. Your mileage may vary.
You need to hide the WebView while displaying XAML UI on top of it and use the WebViewBrush instead.
As suggested above, the 1px border can help with ensuring the top/bottom swipe is honored for the AppBar. However, similar to #matthieu I was still having issues getting the AppBar to open reliably when using the mouse and right-click method.
The issue was that I included the XAML element as a peer to the WebView, rather than as a parent as the MSDN reference for AppBar.Closed suggests:
<Border BorderBrush="Gray" BorderThickness="2" Margin="100,20,100,20">
<Grid>
<WebView x:Name="contentView" Source="http://www.contoso.com"/>
<Rectangle x:Name="contentViewRect"/>
</Grid>
</Border>
If I apply the border this way, the AppBar also reliably opens with the mouse.
One last thing to note is that using a BorderBrush="Transparent" works fine as well, so you don't have to actually see the ugly border. My final XAML was something like:
<Border BorderThickness="0,1,0,1" BorderBrush="Transparent">
<Grid>
<WebView x:Name="WebView"></WebView>
<Rectangle x:Name="RectWebViewBrush"></Rectangle>
</Grid>
</Border>

Paging Horizontally with vertical scroll on each page!

In my app I use a page control and a UIScrollView to page horizontally, I'd like to be able to enable vertical scrolling on each page. Now I know you can nest UIScrollViews in order to achieve this, there is however one problem in my project. Each of the pages uses a view controller consisting of a view, with a background image (different image for each page). This background image should not move while scrolling up and down.
Now what I want is the ability to have buttons, regular rect buttons, which I create in Interface Builder (since I want to be able to design and update the positions easily) and which then can be scrolled vertically.
So it should be like this:
You see a screen with a page-control on the bottom, above it an image with buttons over it. When you scroll sideways, you go to another page, again with an image (another one) and with different buttons. Now whenever you scroll vertically on a page, the buttons should be scrollable (so I can have a LOT of buttons on 1 page), but the image should maintain it's position.
So I figured, I just add another scroll view on top of the view with the background image. This works fine since I now have my buttons hovering over the background image and I have a separate nib file for each page including the buttons. But when I do it like this, the scrollview with the buttons becomes un-scrollable vertically. I don't know why this is happening, so could anyone suggest me how to achieve the wanted result?
I'd be really really grateful!
Thanks,
Fabian