Choosing between XAML's ListView and GridView in WinRT - windows-8

The GridView and the ListView in XAML seem to be the same control.
How does a developer choose between the two?

The GridView control typically scrolls horizontally. Also, you will see some native spacing between items that is greater than that in the ListView. This spacing is there because of the intent for how the controls will be used in Windows Store apps. (read on)
Like the ListView it inherits from ItemsControl.
Like the ListView groups using GroupStyle.
Like the ListView it supports the two new Virtualization strategies.
Like the ListView it supports the different Selection modes.
Sample syntax:
<GridView>
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
</GridView>
The ListView control typically scrolls vertically.
Sample syntax:
<ListView>
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
</ListView>
THIS IS THE ANSWER
The general differentiation between the two is their occurance in views. A GridView tends to appear in FullView, FillView, and Portait. The ListView, because of its vertical orientation, tends to appear in the SnapView. Either control can appear in either view, but this is the local diversion of the two controls.
MSDN: The ListView and GridView controls are both used to display
collections of data in your app. They have similar functionality, but
display data differently. They are both derived from the ItemsControl
class. When we talk about an ItemsControl, the info applies to both
the ListView and GridView controls.
The ListView displays data stacked vertically. It's often used to show
an ordered list of items, such as a list of emails or search results.
It's also useful in master-detail scenarios, where the list items
contain only a small amount of info and the details of the selected
item are shown separately.
The GridView displays data stacked horizontally. It's often used when
you need to show a rich visualization of each item that takes more
space, such as a photo gallery.*

The only difference the user will notice is the touch selection gesture. For GridView the selection gesture is an Up->Down swipe. For ListView it's a Left->Right swipe. I assume this is so the list can differentiate a selection swipe from a scroll attempt.
In Xaml you'll also notice that the default ItemsPanel is different. ItemsWrapGrid for GridView and ItemsStackPanel for ListView (as of Win8.1 virtualizing panels; in 8.0 it's WrapGrid and StackPanel). This could affect what properties are available to you for customization in your Xaml.

Related

UWP mediaplayerelement how to display extra text on top part of transport media control?

I am writing a UWP 14393 app using mediaplayerelement in xaml file, I am wondering how can I display extra information in text on top of custom transport media control so that when player control is up, the text will show up at the same time?
For example, for a video player showing an online stream, and at the top left corner shows streamer name, view count, etc. The information only shows up when player control shows up.
Obviously, the best way to do this is to put the text inside custom transport media control, is it doable? If not, how can I achieve this?
I am a newbie at UWP, so any help will be welcome, thanks.
You can custom the MediaTransportControls's style, and add your own content to <Border x:Name="ControlPanel_ControlPanelVisibilityStates_Border">. See my test.
First download MediaTransportControls's style from my gist.
Or you can find it in your pc's generic.xaml file.
Then add this style to App.xaml.
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/MediaTransportControls.xaml"/>
</ResourceDictionary.MergedDictionaries>
Then you can use your style in MediaTransportControls.
<MediaPlayerElement
Width="300" Height="500"
AreTransportControlsEnabled="True"
Source="ms-appx:///Assets/elephantsdream-clip-h264_sd-aac_eng-aac_spa-aac_eng_commentary-srt_eng-srt_por-srt_swe.mkv">
<MediaPlayerElement.TransportControls>
<MediaTransportControls Style="{StaticResource myMediaTransportControlsStyle}">
</MediaTransportControls>
</MediaPlayerElement.TransportControls>
</MediaPlayerElement>
<MediaPlayerElement AreTransportControlsEnabled="True">
<MediaPlayerElement.TransportControls>
<MediaTransportControls>
<Grid>
<...Put any content here like textblocks and buttons all this content will be part of controls so they will appear and disappear along with the controls, this Grid covers all the area on the screen ( above the controls bar )...>
</Grid>
</MediaTransportControls>
</MediaPlayerElement.TransportControls>
</MediaPlayerElement>

Capturing Pointer Move Events for Canvas inside ScrollViewer

I have a Canvas that overrides PointerMoved event do some stuff if the user "paints" on it. Now I'm trying to move this Canvas inside a ScrollViewer to add Zoom and Scroll effects which works perfectly.
<ScrollViewer x:Name="MainScrollViewer" Grid.Column="1"
VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"
ZoomMode="Enabled" MinZoomFactor="0.5" MaxZoomFactor="2.0" >
<Canvas x:Name="MainCanvas" Background="#000000"
HorizontalAlignment="Left" VerticalAlignment="Top"
PointerMoved="MainCanvas_PointerMoved" />
</ScrollViewer>
However, the ScrollViewer captures all the Pointer move Events and this caused the main paint procedure not working anymore.
Any idea on how to fix this?
Drawing with touch while still allowing zooming/panning - this is currently not supported in XAML. You will need to turn OFF zooming/panning in order to be able to draw with Pointer events and it is not possible to obtain system zooming and panning behaviors simultaneously with custom manipulations. You can however try to use Manipulation events by setting ManipulationMode=All and handle two finger scrolling and pinch zoom using Scale and Translate values manually.
See more at: Touch based drawing app with a Canvas inside a ScrollViewer
I didn't work with canvas and scrollview but I think which I found will help you :)
There is a trick! You can add a tool button (like hand) to switch in two conditions.
First condition enable drawing: you can disable HorizontalScrollMode and VerticalScrollMode of ScrollViewer which gives you ability to use pointer events of Canvas.
In second one you should enable the HorizontalScrollMode and VerticalScrollMode for ScrollViewer, and it works!
To change ScrollViewer properties programmatically:
MainScrollViewer.HorizontalScrollMode = ScrollMode.Auto;
MainScrollViewer.VerticalScrollMode = ScrollMode.Auto;
MainScrollViewer.ZoomMode = ZoomMode.Enabled;

Sticky header in ListView and GridView WinRT xaml

How could one accomplish behavior in which a header of a ListView or GridView group doesn't scroll with the content, but stays fixed until the content comes to an end and the following header then comes in focus.
The behavior can be observed in Finance app on Windows 8 Release Preview when you scroll through GridView items.
I am not expecting the whole code, but I'd like to hear some ideas, links, code snippets, samples etc. which would help me get started.
Thanks
You might be able to embed a listview in a datatemplate of the main listview. Then you can embed a gridview and gridviewcolumns in the templated listviews and get your column headers that way.
Wrap the ListView in a ScrollViewer. The ListView's internal SrollViewer won't be used, and you'll have control of the outer ScrollViewer, which will allow you to set its TopHeader.
<ScrollViewer>
<ScrollViewer.TopHeader>
... Your header content here ...
</ScrollViewer.TopHeader>
<ListView HorizontalAlignment="Left" VerticalAlignment="Top">
... Your body content here ...
</ListView>
</ScrollViewer>

How to synchronize two scroll viewers

I have a custom WPF control to display a list of items using an ItemsControl. The ItemsPresenter is defined in the template to display the list and it is embedded inside a ScrollViewer for scrolling purposes:
<ControlTemplate TargetType="ItemsControl">
<Grid x:Name="LayoutRoot">
<ScrollViewer Margin="3">
<ItemsPresenter/>
</ScrollViewer>
</Grid>
</ControlTemplate>
My application creates two instances of the custom control to show the list side by side.
What I want is when user selects an item on the first one, the second control automatically scrolls so that the same item is displayed in the same position relative to the top. To accomplish this I need to know
How to get the position (in pixels) of the selected item in the first control?
How to scroll to the same position in the second control?
Are there any other ways to do this?

Binding width of Gridview to width of ScrollViewer

I have a project that in which I have a RadGridView inside of a Scrollviewer. I've been trying to bind the width of the RadGridView to the width of the ScrollViewer. The ScrollViewer's width is set to Auto so that it will expand to fit the size of it's containing object, but when I bind the width of the RadGridView to the ScrollViewer it only expands to fit the information inside of the RadGridView instead of filling the remaining space of the ScrollViewer. What I would like is for the RadGridView to expand to auto fit the ScrollViewer, which also expands automatically to fit the parent object. However I haven't been able to find a workable solution for this problem, any ideas?
You don't really need to bind the width of the RadGridView to the ScrollViewer, just don't set the size of the RadGridView, like the following,
<ScrollViewer Margin="60" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<telerik:RadGridView ItemsSource="{Binding Collection}"/>
</ScrollViewer>
Please let me know if I misunderstood your question.