locked
Name of this element

    Question

  • Does anyone was this is called (the item with a red circle around it)?

    Friday, May 23, 2014 1:44 PM

Answers

  • Don't put the items that you want to scroll inside the ScrollViewer. Anything inside the ScrollViewer will scroll together.

    Also take a look at the Hub control rather than writing your own.

    • Marked as answer by m.findlay93 Thursday, May 29, 2014 1:46 PM
    Wednesday, May 28, 2014 8:24 PM
    Owner

All replies

  • The circled part is not a separate control. The overall control is a Grid View. The circled part is one group within the Grid View.
    Friday, May 23, 2014 2:23 PM
    Owner
  • Is it possible to define a group in XAML?
    Friday, May 23, 2014 2:32 PM
  • Generally you'd define it in your code and data bind the GridView to the grouped data.

    Saturday, May 24, 2014 12:57 AM
    Owner
  • The version I want to create doesn't need data binding a I want a stack panel full of text boxes one on top of the other. How can I create a Group Item in XAML without data binding?
    Tuesday, May 27, 2014 8:00 AM
  • Skip the GroupView then - it may be easier this way:

    <ScrollViewer>
       <StackPanel Orientation="Horizontal">
          <!-- group starts here -->
          <StackPanel>
             <TextBlock Text="Group x"/>
             <WrapGrid>
                <!-- put grouped items here.  -->
             </WrapGrid>
          </StackPanel>
          <!-- group ends right above this line -->
         
          <!-- group starts here -->
          <StackPanel>
             <TextBlock Text="Group x"/>
             <WrapGrid>
                <!-- put grouped items here.  -->
             </WrapGrid>
          </StackPanel>
          <!-- group ends right above this line -->
    
       <StackPanel>
    </ScrollViewer>
      
    To do: set the modes and styles for each stackpanel and the scrollviewer.


    Darin R.

    Tuesday, May 27, 2014 8:45 PM
  • Why is there no forward slash for the last StackPanel tag? I get these errors but I'm can't see what's wrong (except for that possibly).

    <Page
        x:Name="pageRoot"
        x:Class="Exits_Expert_London.Emirates_Greenwich_Peninsula"
        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:Exits_Expert_London"
        xmlns:common="using:Exits_Expert_London.Common"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Page.Resources>
            <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
            <x:String x:Key="AppName">My Application</x:String>
        </Page.Resources>
    
        <!--
            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
        -->
        <Grid Background="#FFC2142D">
            <Grid.ChildrenTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition/>
                </TransitionCollection>
            </Grid.ChildrenTransitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="140"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!-- Back button and page title -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="120"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                            Style="{StaticResource NavigationBackButtonNormalStyle}"
                            VerticalAlignment="Top"
                            AutomationProperties.Name="Back"
                            AutomationProperties.AutomationId="BackButton"
                            AutomationProperties.ItemType="Navigation Button"/>
                <TextBlock x:Name="pageTitle" Text="Page Title" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                            IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40" Foreground="White"/>
            </Grid>
            <Grid Grid.Row="1">
                <ScrollViewer>
                    <StackPanel Orientation="Horizontal">
                        <!-- group starts here -->
                        <StackPanel>
                            <TextBlock Text="Group x"/>
                            <WrapGrid>
                                <!-- put grouped items here.  -->
                            </WrapGrid>
                        </StackPanel>
                        <!-- group ends right above this line -->
    
                        <!-- group starts here -->
                        <StackPanel>
                            <TextBlock Text="Group x"/>
                            <WrapGrid>
                                <!-- put grouped items here.  -->
                            </WrapGrid>
                        </StackPanel>
                        <!-- group ends right above this line -->
                    </StackPanel>
                </ScrollViewer>
            </Grid>
        </Grid>
    </Page>
    

    Wednesday, May 28, 2014 4:34 PM
  • The error "WrapGrid can only be used to display items within an ItemsControl" means exactly what it says: you can't use the WrapGrid outside of an ItemsControl such as a ListView or GridView.

    Instead you'll need to use a different container. For hard-coded elements I'd use a Grid and place the subitems in specific row/column spots. If you want TextBoxes one on top of another then consider a StackPanel.

    The missing / in Darin's closing </StackPanel> looks like a typo. It's required but not related to your WrapPanel problem.

    Wednesday, May 28, 2014 5:07 PM
    Owner
  • OK, I've fixed that so thanks.

            <GridView Grid.Row="1">
                <ScrollViewer>
                    <StackPanel Orientation="Horizontal">
                        <!-- group starts here -->
                        <StackPanel>
                            <TextBlock Text="Group x"/>
                            <StackPanel>
                                <!-- put text blocks here.  -->                            
                            </StackPanel>
                        </StackPanel>
                        <!-- group ends right above this line -->
    
                        <!-- group starts here -->
                        <StackPanel>
                            <TextBlock Text="Group x"/>
                            <StackPanel>
                                <!-- put text blocks here.  -->
                            </StackPanel>
                        </StackPanel>
                        <!-- group ends right above this line -->
                    </StackPanel>
                </ScrollViewer>
            </GridView>
    

    1) Out of interest based to the image above what is the default font size used for 'Group Title: 1>'?

    2) Also in Windows Phone there are 2 text styles I regularly use: PhoneTextLargeStyle (font size 32) and PhoneTextSubtleStyle (font size 20). Is it a good idea to use those font sizes to get the same sort of appearance in my Windows Store app?

    3) What is the default width & height (in pixels used) for groups?

    Wednesday, May 28, 2014 6:50 PM
  • You can find the GridView styles and templates (Windows)‎  in the documentation or you can select the GridView in the designer and choose Edit Template & Edit Additional Templates... to create editable copies of the defaults.

    See the Guidelines for Fonts for information about when to use which fonts and sizes. Also check out the other design Guidelines .

    --Rob


    Wednesday, May 28, 2014 7:23 PM
    Owner
  • Just like with a Windows Phone Panorama Item I want the 'title' text to stay where it is and I want a scroll viewer underneath it containing a stack of text blocks. I already know how to do this but when I scroll, the other grid items move as well. How can I prevent this from happening?

    <Page
        x:Name="pageRoot"
        x:Class="Exits_Expert_London.Emirates_Greenwich_Peninsula"
        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:Exits_Expert_London"
        xmlns:common="using:Exits_Expert_London.Common"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <!--
            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
        -->
        <Grid Background="#FFC2142D">
            <Grid.ChildrenTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition/>
                </TransitionCollection>
            </Grid.ChildrenTransitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="140"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!-- Back button and page title -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="120"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                            Style="{StaticResource NavigationBackButtonNormalStyle}"
                            VerticalAlignment="Top"
                            AutomationProperties.Name="Back"
                            AutomationProperties.AutomationId="BackButton"
                            AutomationProperties.ItemType="Navigation Button"/>
                <TextBlock x:Name="pageTitle" Text="Page Title" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                            IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40" Foreground="White"/>
            </Grid>
            <GridView Grid.Row="1">
                <ScrollViewer>
                    <StackPanel Orientation="Horizontal">
                        <!-- group starts here -->
                        <StackPanel Margin="0,0,50,0">
                            <TextBlock Text="item 1" FontSize="42"/>
                            <StackPanel>
                                <!-- put text blocks here.  -->                            
                            </StackPanel>
                        </StackPanel>
                        <!-- group ends right above this line -->
    
    
                        <!-- group starts here -->
                        <StackPanel Margin="0,0,50,0">
                            <TextBlock Text="item 2" FontSize="42"/>
                            <StackPanel>
                                <!-- put text blocks here.  -->
                            </StackPanel>
                        </StackPanel>
                        <!-- group ends right above this line -->
    
    
                        <!-- group starts here -->
                        <StackPanel Margin="0,0,50,0" Width="500">
                            <TextBlock Text="item 3" FontSize="42"/>
                            <ScrollViewer>
                                <StackPanel>
                                    <!-- put text blocks here.  -->
                                    <StackPanel>
                                        <TextBlock Text="London Buses" TextAlignment="Center" FontSize="20"/>
                                    </StackPanel>
                                </StackPanel>
                            </ScrollViewer>
                        </StackPanel>
                        <!-- group ends right above this line -->
    
                    </StackPanel>
                </ScrollViewer>
            </GridView>
        </Grid>
    </Page>
    

    Wednesday, May 28, 2014 7:48 PM
  • Don't put the items that you want to scroll inside the ScrollViewer. Anything inside the ScrollViewer will scroll together.

    Also take a look at the Hub control rather than writing your own.

    • Marked as answer by m.findlay93 Thursday, May 29, 2014 1:46 PM
    Wednesday, May 28, 2014 8:24 PM
    Owner
  • Never heard of the Hub Control but I will use that so thanks for the suggestion.
    Thursday, May 29, 2014 1:44 PM