locked
Semantic zoom in VB.NET

    Question

  • I would like to use Semantic Zoom Controls in "Hub" Style Application, But It doesn't work...How should I fix this :

    Project file located at : http://1drv.ms/1hNM0EG

    I will really appreciated if you able to fix this problem.

    Thanks.


    Thursday, April 17, 2014 3:36 AM

All replies

  • Your project does not compile, it does not know what is Sections. Since I did not know what you wanted to do in Sections I removed it and found everything is working fine.

    Can you explain your issue if this still does not answer you?

    Here is updated XAML

    <Page
        x:Class="Reference_Generator.HubPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        xmlns:app="using:Reference_Generator">
    
        <Page.Resources>
        </Page.Resources>
    
        <!--
        This grid acts as a root panel for the page.
      -->
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.ChildrenTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition/>
                </TransitionCollection>
            </Grid.ChildrenTransitions>
            <SemanticZoom>
                <SemanticZoom.ZoomedInView>
                    <Hub Name="MainHub" SectionHeaderClick="Hub_SectionHeaderClick">
                        <Hub.Header>
                            <!-- Back button and page title -->
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="80"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Button  x:Name="backButton" Style="{StaticResource NavigationBackButtonNormalStyle}"
                            Margin="-1,-1,39,0" 
                            VerticalAlignment="Top"
                            Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                            AutomationProperties.Name="Back"
                            AutomationProperties.AutomationId="BackButton"
                            AutomationProperties.ItemType="Navigation Button"/>
                                <TextBlock x:Name="pageTitle" Text="Reference Generator" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                            VerticalAlignment="Top" IsHitTestVisible="false" TextWrapping="NoWrap" />
                            </Grid>
    
                        </Hub.Header>
    
    
                        <HubSection Width="780" Margin="0,0,80,0">
                            <HubSection.Background>
                                <ImageBrush ImageSource="Assets/MediumGray.png" Stretch="UniformToFill" />
                            </HubSection.Background>
                        </HubSection>
                        <HubSection Header="Website">
                            <DataTemplate>
                                <!-- width of 400 -->
                                <StackPanel Orientation="Vertical">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="130"/>
                                            <ColumnDefinition Width="5"/>
                                            <ColumnDefinition Width="130"/>
                                            <ColumnDefinition Width="5"/>
                                            <ColumnDefinition Width="130"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="270"/>
                                            <RowDefinition Height="95"/>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Image Source="Assets/MediumGray.png" Grid.ColumnSpan="5" Margin="0,0,0,10" Stretch="Fill" />
                                        <Image Source="Assets/MediumGray.png" Grid.Row="1" Stretch="Fill"/>
                                        <Image Source="Assets/MediumGray.png" Grid.Row="1" Grid.Column="2" Stretch="Fill"/>
                                        <Image Source="Assets/MediumGray.png" Grid.Row="1" Grid.Column="4" Stretch="Fill"/>
                                        <TextBlock Style="{StaticResource TitleTextBlockStyle}" Grid.Row="2" Grid.ColumnSpan="5"  Margin="0,15,0,0"
                                           x:Uid="DescriptionHeader" Text="Description text:"/>
                                        <TextBlock Style="{StaticResource BodyTextBlockStyle}" Grid.Row="3" Grid.ColumnSpan="5"
                                           x:Uid="LongText" Text="Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper. Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper."/>
                                    </Grid>
                                </StackPanel>
                            </DataTemplate>
                        </HubSection>
                        <HubSection Header="Book">
                            <DataTemplate>
                                <!-- width of 400 -->
                                <StackPanel Orientation="Vertical">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="130"/>
                                            <ColumnDefinition Width="5"/>
                                            <ColumnDefinition Width="130"/>
                                            <ColumnDefinition Width="5"/>
                                            <ColumnDefinition Width="130"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="270"/>
                                            <RowDefinition Height="95"/>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Image Source="Assets/MediumGray.png" Grid.ColumnSpan="5" Margin="0,0,0,10" Stretch="Fill" />
                                        <Image Source="Assets/MediumGray.png" Grid.Row="1" Stretch="Fill"/>
                                        <Image Source="Assets/MediumGray.png" Grid.Row="1" Grid.Column="2" Stretch="Fill"/>
                                        <Image Source="Assets/MediumGray.png" Grid.Row="1" Grid.Column="4" Stretch="Fill"/>
                                        <TextBlock Style="{StaticResource TitleTextBlockStyle}" Grid.Row="2" Grid.ColumnSpan="5"  Margin="0,15,0,0"
                                           x:Uid="DescriptionHeader" Text="Description text:"/>
                                        <TextBlock Style="{StaticResource BodyTextBlockStyle}" Grid.Row="3" Grid.ColumnSpan="5"
                                           x:Uid="LongText" Text="Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper. Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper."/>
                                    </Grid>
                                </StackPanel>
                            </DataTemplate>
                        </HubSection>
                        <HubSection Header="Periodic Article">
                            <DataTemplate>
                                <!-- width of 400 -->
                                <StackPanel Orientation="Vertical">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="130"/>
                                            <ColumnDefinition Width="5"/>
                                            <ColumnDefinition Width="130"/>
                                            <ColumnDefinition Width="5"/>
                                            <ColumnDefinition Width="130"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="270"/>
                                            <RowDefinition Height="95"/>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Image Source="Assets/MediumGray.png" Grid.ColumnSpan="5" Margin="0,0,0,10" Stretch="Fill" />
                                        <Image Source="Assets/MediumGray.png" Grid.Row="1" Stretch="Fill"/>
                                        <Image Source="Assets/MediumGray.png" Grid.Row="1" Grid.Column="2" Stretch="Fill"/>
                                        <Image Source="Assets/MediumGray.png" Grid.Row="1" Grid.Column="4" Stretch="Fill"/>
                                        <TextBlock Style="{StaticResource TitleTextBlockStyle}" Grid.Row="2" Grid.ColumnSpan="5"  Margin="0,15,0,0"
                                           x:Uid="DescriptionHeader" Text="Description text:"/>
                                        <TextBlock Style="{StaticResource BodyTextBlockStyle}" Grid.Row="3" Grid.ColumnSpan="5"
                                           x:Uid="LongText" Text="Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper. Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper."/>
                                    </Grid>
                                </StackPanel>
                            </DataTemplate>
                        </HubSection>
                        <HubSection Header="Online Image">
                            <DataTemplate>
                                <!-- width of 400 -->
                                <StackPanel Orientation="Vertical">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="130"/>
                                            <ColumnDefinition Width="5"/>
                                            <ColumnDefinition Width="130"/>
                                            <ColumnDefinition Width="5"/>
                                            <ColumnDefinition Width="130"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="270"/>
                                            <RowDefinition Height="95"/>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Image Source="Assets/MediumGray.png" Grid.ColumnSpan="5" Margin="0,0,0,10" Stretch="Fill" />
                                        <Image Source="Assets/MediumGray.png" Grid.Row="1" Stretch="Fill"/>
                                        <Image Source="Assets/MediumGray.png" Grid.Row="1" Grid.Column="2" Stretch="Fill"/>
                                        <Image Source="Assets/MediumGray.png" Grid.Row="1" Grid.Column="4" Stretch="Fill"/>
                                        <TextBlock Style="{StaticResource TitleTextBlockStyle}" Grid.Row="2" Grid.ColumnSpan="5"  Margin="0,15,0,0"
                                           x:Uid="DescriptionHeader" Text="Description text:"/>
                                        <TextBlock Style="{StaticResource BodyTextBlockStyle}" Grid.Row="3" Grid.ColumnSpan="5"
                                           x:Uid="LongText" Text="Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper. Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper."/>
                                    </Grid>
                                </StackPanel>
                            </DataTemplate>
                        </HubSection>
                        <HubSection Header="Online Video">
                            <DataTemplate>
                                <!-- width of 400 -->
                                <StackPanel Orientation="Vertical">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="130"/>
                                            <ColumnDefinition Width="5"/>
                                            <ColumnDefinition Width="130"/>
                                            <ColumnDefinition Width="5"/>
                                            <ColumnDefinition Width="130"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="270"/>
                                            <RowDefinition Height="95"/>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Image Source="Assets/MediumGray.png" Grid.ColumnSpan="5" Margin="0,0,0,10" Stretch="Fill" />
                                        <Image Source="Assets/MediumGray.png" Grid.Row="1" Stretch="Fill"/>
                                        <Image Source="Assets/MediumGray.png" Grid.Row="1" Grid.Column="2" Stretch="Fill"/>
                                        <Image Source="Assets/MediumGray.png" Grid.Row="1" Grid.Column="4" Stretch="Fill"/>
                                        <TextBlock Style="{StaticResource TitleTextBlockStyle}" Grid.Row="2" Grid.ColumnSpan="5"  Margin="0,15,0,0"
                                           x:Uid="DescriptionHeader" Text="Description text:"/>
                                        <TextBlock Style="{StaticResource BodyTextBlockStyle}" Grid.Row="3" Grid.ColumnSpan="5"
                                           x:Uid="LongText" Text="Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper. Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper."/>
                                    </Grid>
    
                                </StackPanel>
                            </DataTemplate>
                        </HubSection>
                    </Hub>
                </SemanticZoom.ZoomedInView>
    
                <SemanticZoom.ZoomedOutView>
                    <GridView 
                              Padding="140"
                              IsItemClickEnabled="True"
                              Tapped="GoToSection_Tapped">
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Grid Background="DodgerBlue"
                                      Height="420">
                                    <TextBlock Text="{Binding}"
                                               Padding="15,180"
                                               FontSize="35"
                                               FontWeight="Bold"/>
                                </Grid>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.Items>
                            <TextBlock/>
                            <TextBlock/>
                            <TextBlock/>
                            <TextBlock/>
                            <TextBlock/>
                            <TextBlock/>
                            <TextBlock/>
                            <TextBlock/>
                        </GridView.Items>
                    </GridView>
                </SemanticZoom.ZoomedOutView>
            </SemanticZoom>
        </Grid>
    </Page>    
    


    -- Vishal Kaushik --

    Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!

    Thursday, April 17, 2014 11:15 AM
  • I debugged it but.. when I zoomed in (as semantic zoom) there are 8 textboxes, but no text in there? What should I do? Thanks for helping me! "Sections" Code for binding for show the text on the "Semantic Zoomed Objects"
    Saturday, April 19, 2014 1:07 AM