Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I may have a solution. In my projet, I had to create a list of contacts in alphabetic order, like the People app.</p> <p>I used a <a href="http://msdn.microsoft.com/en-US/library/windows/apps/windows.ui.xaml.controls.gridview" rel="nofollow noreferrer">GridView</a> (with this <a href="http://code.msdn.microsoft.com/windowsapps/GroupedGridView-77c59e8e" rel="nofollow noreferrer">sample</a>), a <a href="http://msdn.microsoft.com/fr-fr/library/system.windows.data.collectionviewsource.aspx" rel="nofollow noreferrer">CollectionViewSource</a> and a wrappanel I found in the <a href="http://winrtxamltoolkit.codeplex.com/" rel="nofollow noreferrer">WinRT XAML Toolkit</a> (you can get with NuGet package or copy/paste the source code). It allow you to put your items in columns.</p> <p><strong>Example</strong></p> <p><img src="https://i.stack.imgur.com/ESbUS.jpg" alt="enter image description here"></p> <p><strong>ViewModel</strong></p> <pre><code>class ContactListViewModel { public ContactListViewModel() { ContactSource = new CollectionViewSource(); Contacts = new ObservableCollection&lt;Contact&gt;(); Contacts.Add(new Contact("Gates","Bill")); Contacts.Add(new Contact("Bush","Georges")); Contacts.Add(new Contact("Obama","Barack")); Contacts.Add(new Contact("Hollande","François")); Contacts.Add(new Contact("Affleck","Ben")); Contacts.Add(new Contact("Allen","Woody")); Contacts.Add(new Contact("Hendrix","Jimi")); Contacts.Add(new Contact("Harrison", "Georges")); Contacts = new ObservableCollection&lt;Contact&gt;(Contacts.OrderBy(c =&gt; c.Name)); ContactSource.Source = GetGroupsByLetter(); ContactSource.IsSourceGrouped = true; } #region Contacts public ObservableCollection&lt;Contact&gt; Contacts { get; protected set; } public CollectionViewSource ContactSource { get; protected set; } #endregion internal List&lt;GroupInfoList&lt;object&gt;&gt; GetGroupsByLetter() { List&lt;GroupInfoList&lt;object&gt;&gt; groups = new List&lt;GroupInfoList&lt;object&gt;&gt;(); var query = from item in Contacts orderby ((Contact)item).Name group item by ((Contact)item).Name[0] into g select new { GroupName = g.Key, Items = g }; foreach (var g in query) { GroupInfoList&lt;object&gt; info = new GroupInfoList&lt;object&gt;(); info.Key = g.GroupName; foreach (var item in g.Items) { info.Add(item); } groups.Add(info); } return groups; } public class GroupInfoList&lt;T&gt; : List&lt;object&gt; { public object Key { get; set; } public new IEnumerator&lt;object&gt; GetEnumerator() { return (System.Collections.Generic.IEnumerator&lt;object&gt;)base.GetEnumerator(); } } } </code></pre> <p><strong>View</strong></p> <pre><code> &lt;DataTemplate x:Key="contactTemplate"&gt; &lt;Grid Width="225" Height="75" Background="#55FFFFFF"&gt; &lt;Grid Margin="10"&gt; &lt;Grid.RowDefinitions&gt; &lt;RowDefinition/&gt; &lt;RowDefinition/&gt; &lt;/Grid.RowDefinitions&gt; &lt;TextBlock VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="20"&gt; &lt;Run Text="{Binding FirstName}"/&gt; &lt;Run Text="{Binding Name}"/&gt; &lt;/TextBlock&gt; &lt;TextBlock Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="{Binding Email}" FontSize="13" Foreground="#FFDDDDDD"/&gt; &lt;/Grid&gt; &lt;/Grid&gt; &lt;/DataTemplate&gt; &lt;DataTemplate x:Key="letterTemplate"&gt; &lt;Grid Margin="5,0,0,5" Width="225"&gt; &lt;Grid.RowDefinitions&gt; &lt;RowDefinition Height="Auto"/&gt; &lt;RowDefinition Height="Auto"/&gt; &lt;/Grid.RowDefinitions&gt; &lt;TextBlock Text="{Binding Key}" Style="{StaticResource GroupHeaderTextStyle}" VerticalAlignment="Center"/&gt; &lt;Rectangle Grid.Row="1" Fill="#BBEEEEEE" Height="1" Margin="0,7,0,0"/&gt; &lt;/Grid&gt; &lt;/DataTemplate&gt; &lt;/Page.Resources&gt; &lt;!-- This grid acts as a root panel for the page that defines two rows: * Row 0 contains the back button and page title * Row 1 contains the rest of the page layout --&gt; &lt;Grid Style="{StaticResource LayoutRootStyle}"&gt; &lt;Grid.RowDefinitions&gt; &lt;RowDefinition Height="140"/&gt; &lt;RowDefinition Height="*"/&gt; &lt;/Grid.RowDefinitions&gt; &lt;!-- Back button and page title --&gt; &lt;Grid&gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width="Auto"/&gt; &lt;ColumnDefinition Width="*"/&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;Button x:Name="backButton" Click="GoBack" Style="{StaticResource BackButtonStyle}" Opacity="0"/&gt; &lt;TextBlock x:Name="pageTitle" Grid.Column="1" Text="Manager" Style="{StaticResource PageHeaderTextStyle}"/&gt; &lt;/Grid&gt; &lt;GridView Grid.Row="1" ItemsSource="{Binding Path=ContactSource.View}" SelectionMode="Multiple" IsSwipeEnabled="false" IsItemClickEnabled="True" Padding="116,10,40,46" ItemTemplate="{StaticResource contactTemplate}"&gt; &lt;GridView.ItemsPanel&gt; &lt;ItemsPanelTemplate&gt; &lt;local:WrapPanel Orientation="Vertical"/&gt; &lt;/ItemsPanelTemplate&gt; &lt;/GridView.ItemsPanel&gt; &lt;GridView.GroupStyle&gt; &lt;GroupStyle HeaderTemplate="{StaticResource letterTemplate}"&gt; &lt;GroupStyle.Panel&gt; &lt;ItemsPanelTemplate&gt; &lt;VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/&gt; &lt;/ItemsPanelTemplate&gt; &lt;/GroupStyle.Panel&gt; &lt;/GroupStyle&gt; &lt;/GridView.GroupStyle&gt; &lt;/GridView&gt; &lt;/Grid&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POGrouping GridView in Windows 8 Metro App
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USMax
    1. USMax
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYou forgot to put <Controls1:WrapPanel Orientation="Vertical" /> but does not look as the image.
      singulars
      1. PO
      1. USetragu
    2. COYes, my bad, I've used several WrapPanel and I forgot to add the orientation for this one. What do you mean by "does not look as the image" ? When you add a lot of contacts with the same first letter, yes it will create a separated colomn. If you want exactly the image of the question, you'll need to do it by hand, like Jmix90 says.
      singulars
      1. PO
      1. USMax
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload