locked
How to I apply snapview hubsection

    Question

  • How to I apply snapview hubsection
    Monday, February 16, 2015 9:43 PM

All replies

  • Hi Javier,

    Could you explain your question in more detail? I'm not able to understand what do you mean by snapview, as I know snapview is used in Win8.0 but not Win8.1 while hub section is the new feature of Win8.1, I don't think you can work together with them.

    If you are questioning for the different layout, you may need this: Narrow layouts

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Tuesday, February 17, 2015 3:23 AM
    Moderator
  • snapview

    <Hub>

    <hubsection x:name="Section1">

    </hubsection>

    <hubsection x.name="Section2">

    </hubsection>

    <Hubsection x:name="Section3">

    </hubsection>

    </hub>

    Tuesday, February 17, 2015 10:44 AM
  • Still not understand your question...

    Do you mean something you like to snap the Hubsection for instance while we are looking at Section 2, Section 1 should hide? Re-set the width of the HubSection should help.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, February 18, 2015 3:40 AM
    Moderator
  • hello

    It is to put the HubSection in vertical mode snapped for the verification of the store

    Wednesday, February 18, 2015 8:19 AM
  • you cant do with the hub section. you needd to make scrollviewer and put your content in there

    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Wednesday, February 18, 2015 8:58 AM
  • Hello

    I want to make snapview with hubSection to give vertical format for table and multi-tasking

    Wednesday, February 18, 2015 10:59 AM
  • Hi Javier,

    Then you need to re-design your layout base on the screen width, by default HubSection will not automatically change to vertical mode.

    Orientation property for Hub is a good thing that you can use base on different width.

    A good layout sample could be found: Layout for windows that resize to 320 pixel width sample

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, February 19, 2015 6:42 AM
    Moderator
  • Hello:

    as I could do it with vertical orientation but keeping the hotizontal Tablet

    Saturday, February 21, 2015 4:57 PM
  • Hi Javier,

    Put your items into a Grouped Gridview and set the GridView ItemsPanel's orientation as Horizontal

    See a similar discussion this this topic: https://social.msdn.microsoft.com/Forums/windowsapps/en-US/e64cd6f3-b632-4c1d-89a8-a39200e3fa3f/gridviewlistview-content-orientation-problems?forum=winappswithcsharp#76e3614f-8381-4fc1-af20-81988eaea93e

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, February 23, 2015 7:15 AM
    Moderator
  • this is problem here i use hubsection, i want put in vertical  los hubsection but the screen horizontal.
    Monday, February 23, 2015 9:13 PM
  • How can I re-desing with this code for snapped  and portrait
    <Grid.ChildrenTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition/>
                </TransitionCollection>
            </Grid.ChildrenTransitions>
    
            <Grid.RowDefinitions>
                <RowDefinition Height="140"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <Grid Grid.Row="1" x:Name="contentRegion" >
    
    
    
                <Hub >
    
                    <HubSection x:Uid="section1Header" Margin="88,-42,0,0" Width="500" >
    
                        <DataTemplate>
                            <StackPanel Margin="0,-3,0,0" Height="647" x:Name="sdescription" Orientation="Vertical">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="300"/>
                                    </Grid.RowDefinitions>
    
    
    
    
                                    <Image Source="{Binding ImagePath}"  Margin="0,0,0,20" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" MaxHeight="240"/>
    
                                    <TextBlock Text="{Binding Content}" Style="{StaticResource BodyTextBlockStyle}" FontSize="19" Margin="0,-6,0,20" Grid.Row="1"   LineHeight="21" Height="300"/>
                                </Grid>
                            </StackPanel>
                        </DataTemplate>
    
                    </HubSection>
    
    
    
    
                    <HubSection x:Uid="Section2Header" Width="500" Margin="88,-42,0,0" Visibility="Visible">
                        <DataTemplate>
                            <StackPanel x:Name="sficha" Orientation="vertical">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="150"/>
                                        <ColumnDefinition Width="300"/>
                                    </Grid.ColumnDefinitions>
    
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="21"/>
                                        <RowDefinition Height="17"/>
                                        <RowDefinition Height="21"/>
                                        <RowDefinition Height="17"/>
                                        <RowDefinition Height="21"/>
                                        <RowDefinition Height="17"/>
                                        <RowDefinition Height="21"/>
                                        <RowDefinition Height="17"/>
                                        <RowDefinition Height="21"/>
                                        <RowDefinition Height="17"/>
                                        <RowDefinition Height="21"/>
                                        <RowDefinition Height="17"/>
                                        <RowDefinition Height="21"/>
                                        <RowDefinition Height="17"/>
                                    </Grid.RowDefinitions>
    
    
    
                                    <TextBlock Text="{Binding Latitude}"  Grid.Row="0" FontSize="19" Style="{StaticResource BodyTextBlockStyle}"/>
                                    <TextBlock Text="{Binding Alatitude}" FontSize="19" Grid.Row="0" Grid.Column="1" Style="{StaticResource BodyTextBlockStyle}"/>
    
                                    <Line  Stroke="White" StrokeThickness="2"  Grid.Row="1" X2="290"  Margin="0,9,0,0" Grid.ColumnSpan="2"/>
    
                                    <TextBlock Text="{Binding Longitude}" FontSize="19" Grid.Row="2" Grid.Column="0" Style="{StaticResource BodyTextBlockStyle}"/>
                                    <TextBlock Text="{Binding Blongitude}" FontSize="19" Grid.Row="2" Grid.Column="2" Style="{StaticResource BodyTextBlockStyle}"/>
    
                                    <Line  Stroke="White" StrokeThickness="2"  Grid.Row="3" X2="290"  Margin="0,9,0,0" Grid.ColumnSpan="2"/>
    
                                    <TextBlock Text="{Binding Lenght}" FontSize="19" Grid.Row="4" Style="{StaticResource BodyTextBlockStyle }"/>
                                    <TextBlock Text="{Binding Elenght}" FontSize="19" Grid.Row="4" Grid.Column="3" Style="{StaticResource BodyTextBlockStyle}"/>
    
                                    <Line  Stroke="White" StrokeThickness="2"  Grid.Row="5" X2="290"  Margin="0,9,0,0" Grid.ColumnSpan="2"/>
    
                                    <TextBlock Text="{Binding Draught}" FontSize="19" Grid.Row="6" Style="{StaticResource BodyTextBlockStyle}"/>
                                    <TextBlock Text="{Binding Ndraught}" FontSize="19" Grid.Row="6" Grid.Column="6" Style="{StaticResource BodyTextBlockStyle}"/>
    
                                    <Line  Stroke="White" StrokeThickness="2"  Grid.Row="7" X2="290"  Margin="0,9,0,0" Grid.ColumnSpan="2"/>
    
                                    <TextBlock Text="{Binding NauticalChart}" FontSize="19" Grid.Row="8" Style="{StaticResource BodyTextBlockStyle}"/>
                                    <TextBlock Text="{Binding Fchart}" FontSize="19" Grid.Row="8" Grid.Column="8" Style="{StaticResource BodyTextBlockStyle}"/>
    
                                    <Line  Stroke="White" StrokeThickness="2"  Grid.Row="9" X2="290"  Margin="0,9,0,0" Grid.ColumnSpan="2"/>
    
                                    <TextBlock Text="{Binding Radio}" FontSize="19" Grid.Row="10"  Style="{StaticResource BodyTextBlockStyle}"/>
                                    <TextBlock Text="{Binding Dradio}" FontSize="19" Grid.Row="10" Grid.Column="10" Style="{StaticResource BodyTextBlockStyle}"/>
    
                                    <Line  Stroke="White" StrokeThickness="2"  Grid.Row="11" X2="290"  Margin="0,9,0,0" Grid.ColumnSpan="2"/>
    
                                    <TextBlock Text="{Binding Function}" FontSize="19" Grid.Row="12" Style="{StaticResource BodyTextBlockStyle}"/>
                                    <TextBlock Text="{Binding Hfunction}" FontSize="19" Grid.Row="12" Grid.Column="12" Style="{StaticResource BodyTextBlockStyle}"/>
    
                                </Grid>
    
    
                            </StackPanel>
    
                        </DataTemplate>
    
    
                    </HubSection>
    
    
                    <HubSection x:Uid="Section3Header" Margin="88,-40,0,0" Width="600" Visibility="Visible">
                        <DataTemplate>
                            <StackPanel x:Name="sservicio" Orientation="Horizontal">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="190"/>
                                        <ColumnDefinition Width="500"/>
                                    </Grid.ColumnDefinitions>
    
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="30"/>
                                        <RowDefinition Height="17"/>
                                        <RowDefinition Height="21"/>
                                        <RowDefinition Height="17"/>
                                        <RowDefinition Height="21"/>
                                    </Grid.RowDefinitions>
    
                                    <TextBlock Text="{Binding Services}" FontSize="19" Grid.Row="0" Style="{StaticResource BodyTextBlockStyle}"/>
                                    <Line  Stroke="White" StrokeThickness="2"  Grid.Row="1" X2="509"  Margin="0,9,0,0" Grid.ColumnSpan="2"/>
                                    <TextBlock Text="{Binding Email}" FontSize="19" Grid.Row="2" Style="{StaticResource BodyTextBlockStyle}"/>
                                    <TextBlock Text="{Binding Addressemail}" FontSize="19" Grid.Row="2" Margin="0,0,0,0" Grid.Column="2" Style="{StaticResource BodyTextBlockStyle}"/>
                                    <Line Stroke="White" StrokeThickness="2" Grid.Row="3" X2="509" Margin="0,9,0,0" Grid.ColumnSpan="2"/>
    
                                </Grid>
                            </StackPanel>
    
                        </DataTemplate>
    
    
                    </HubSection>
    
    
    
    
                </Hub>
    
            </Grid>
    
    
            <!-- Botón Atrás y título de página -->
            <Grid x:Name="defaultNavigation" Visibility="Visible">
                <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="{Binding Title}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                            IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
            </Grid>
            <Grid x:Name="minimalNavigation" Visibility="Collapsed">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="80"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button x:Name="backButtonMinimal"  Height="70" Margin="10,56,10,0"
                        Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                        Visibility="{Binding IsEnabled, Converter={StaticResource BooleanToVisibility}, RelativeSource={RelativeSource Mode=Self}}"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button">
                        
                </Button>
                <TextBlock x:Name="pageTitleMinimal" Text="{Binding Title}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
                           IsHitTestVisible="False" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
                
            </Grid>
    
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="DefaultLayout">
                        
                    </VisualState>
                    
    
                    <VisualState x:Name="PortraitLayout">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="defaultNavigation" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
    
    
                          
    
    
    
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="minimalNavigation" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                            
                        </Storyboard>
                    </VisualState>
    
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            
    
        </Grid>
    
        <Page.TopAppBar>
            <AppBar IsSticky="True">
                <StackPanel Orientation="Horizontal">
                    <Button x:Uid="inicio" Width="140" Height="80" Background="Black" BorderBrush="Black" Click="HomeBarButton_Click"/>
    
                </StackPanel>
            </AppBar>
        </Page.TopAppBar>
    
    
    
    </Page>
    

    Thursday, February 26, 2015 8:09 PM