panorama control with scroll - c#

I'm really new to programming but decided I will start learning c# development for windows phone 8. I know they have a button control in the toolbox but I am looking to make the kind of buttons you see on the start screen for the phone. No idea how.
Also I would love to know how to use the panorama control and how to incorporate the buttons asks previously to have an image and put into a verticals scroll layout, separated by panorama items of course. Please note as I said before I'm super new and don't know much yet.

To make start screen buttons alike (a.k.a tiles) take a look here. Download the examples and look under HubTile.
Now for the second part of your question all you need is a panorama page with a WrapPanelthat can also be found in the toolkit mentioned earlier.
So what you should be doing is adding a WrapPanel inside the PanoramaItem, and then the HubTiles inside the wrap panel. Here is an example:
<controls:PanoramaItem Header="hubtiles">
<Grid>
<toolkit:WrapPanel Orientation="Horizontal">
<toolkit:HubTile/> <!-- Change accordingly -->
</toolkit:WrapPanel>
</Grid>
</controls:PanoramaItem>

Related

Disabling vertical (swipe) scrolling in a ListView

I am developing an application on the UWP primarily targeted to W10 mobile users, however I believe this issue will also be valid if attempted on a touchscreen W10 device.
I am using a ListView to lay out a set of buttons (ListViewItems, technically) which have text and an icon. They are in my SplitView and are used similar to how you see in the Windows default apps such as Groove Music and News, as pictured:
It works perfectly as I'd hoped, except that if the user pulls up or down on the ListView with their finger it will 'squash' the list up or down - a useful animation for lists of emails, for example, but something undesirable on the UI of my program.
Is there a way of disabling this behaviour? If not, is there an alternative control that could suit my needs, or should I use a custom control?
Set the ScrollViewer.VerticalScrollMode to Auto or Disabled on your ListView:
<ListView
x:Name="ListView"
ScrollViewer.VerticalScrollMode="Auto"
</ListView>
The default value is Enabled which will always "squash" the top and bottom. When set to Auto, then if there is no need to scroll (less elements than the viewport can fill), the "squash" effect will be disabled. And if you set the value to Disabled, then the scrolling will be disabled no matter how many elements need to be displayed.
For the official documentation see here.

Moving Control over a ScrollViewer

I'm developing a small WPF application which uses a ScrollViewer to show an Image in a Window.
I have generated the window and all his relative code (I will show it if needed but I think is not usefull for the point of this question) programmatically.
The question/ how to is the following. I have to show/hide (pressing a button) a control (basically a InkCanvas) over the image contained in the ScrollViewer. Except the part oh show/hide is pretty simple to use the button event) which is the best way to add a control (and which type of control/container) at the Window forcing him to be over the ScrollViewer and then be able to move around dragging it?
I'm relatively new to WPF I used a lot of WinForms (I can do this in WinForms but WPF is a new world for me).
Thanks in advance!
As for the container you should use a Grid which will center and put on top of each other the controls in a same cell.
As for drag and drop if you want to implement it yourself I've provided a minimal implementation here: https://stackoverflow.com/a/17014906/145757
Otherwise you can use the MouseDragElementBehavior behavior provided by Blend.
Here is a tutorial that demonstrates its usage from Blend itself: http://www.c-sharpcorner.com/uploadfile/nipuntomar/expression-blend-4-behaviors/
But you can use it without Blend by importing the Blend libraries and using it from your XAML with something like:
<InkCanvas ...>
<interactivity:Interaction.Behaviors>
<blendbehaviors:MouseDragElementBehavior />
</interactivity:Interaction.Behaviors>
</InkCanvas>
with interactivity and blendbehaviors being mapped to the Blend namespaces.

Custom transition between Pages in WinRT

I'd like to know if there is any way to create custom animations for transitions between to Pages in WinRT.
Currently the only way I've found to animate the entrance of a Page is to add this kind of stuff in its xaml :
<Page.Transitions>
<TransitionCollection>
<PaneThemeTransition Edge="Right" />
</TransitionCollection>
</Page.Transitions>
Which makes it slide in from the right. The problem is I also want the current page to slide out to the left at the same time. Currently it only disappears, leaving the screen black while the new page slides in. I also need to choose when to use the animation, depending on which page I'm coming from.
Check out the Frame.Navigate method.
You can use that to define the animation for a page you are navigating to by the NavigationTransitionInfo class.
With fine tuning your own animations you will probably want to try build your own PageTransition using StoryBoards.

Sync two listboxes

I have a layout where there are two listboxes, I was trying to make them sync and found some tutorials on the net like http://www.software-architects.com/TechnicalArticles/ScrollSync/tabid/101/Default.aspx or Listboxes, scrolling in sync but they dont seem to work under WP7 SDK because there are missing events or properties. Does anybody out there solved the problem of syncing two or more listboxes under windows phone 7?
Thanks in advance
See my answer in this question: WP7 ScrollViewer programatically scroll a background ScrollViewer in sync with front ScrollViewer
You will be able to keep the scrollviewers in sync, but it may not be smooth, as the WP7 scroll viewer does not have a Scroll event.
To get the ScrollViewer's generated by the ListBox's, use this solution by ColinE WP7 - Scrolling ListBox in external ScrollViewer.
I came up with a solution using the WarpPanel available from the Silverlight Toolkit for Wp7
<ListBox Height="350" HorizontalAlignment="Left" Margin="102,72,0,0" Name="lsScore" VerticalAlignment="Top" Width="450" HorizontalContentAlignment="Center">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemWidth="220" ItemHeight="50"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
This solution uses one listbox which is ofc always on sync and in order to seperate the data and align them I use the ItemWidth thats why it has such a high value. If you know any other way to seperate the data without using the ItemWidth property feel free to add an answer. Thanks in advance.

windows phone mango 7.1 API/controller for GUI

I'm new to wp development. I got the basic idea how to develop basic GUI. I would like to do something similar like this http://www.simile-widgets.org/timeline/ where we can scroll the contents in the same page by a mouse pointer drag. So which controller will be a right choice to startup my GUI. Thanks!
The basic control for scrolling a region of the UI via a drag operation is a ScrollViewer. Simply place your content, which is larger than the viewing are, within a ScrollViewer and off you go ...
<ScrollViewer>
... large content goes here
</ScrollViewer>

Categories