Dall'archivio script > WinRT 8.1

Usare il controllo Hub nelle applicazioni XAML WinRT

di Daniele BochicchioDaniele Bochicchio, in WinRT 8.1,

Windows 8.1 ha introdotto un nuovo tipo di controllo, chiamato Hub, che consente di organizzare il layout secondo una modalità per la quale i contenuti sono organizzati in blocchi, ognuno dei quali è rappresentato da un controllo HubSection.

Il primo di questi contenuti è rappresentato da quella che ci chiama la Hero Image, cioè un'immagine di impatto che catturi subito l'attenzione dell'utente.

Un tipico markup è quello che segue, dove vengono anche ricreati il back button e il titolo dell'applicazione, che resterà sempre visibile mentre si effettua lo scrolling in orizzontale:

<Hub x:Name="TheHub">
  <Hub.Header>
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="80"/>
        <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>
                      
      <Button x:Name="backButton" Margin="0,0,39,0" 
          Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
          Style="{StaticResource NavigationBackButtonNormalStyle}" />
      <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" 
          Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
          IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top"/>
    </Grid>
  </Hub.Header>

  <HubSection Width="780" Margin="0,0,80,0">
    <HubSection.Background>
        <ImageBrush ImageSource="Assets/MediumGray.png" Stretch="UniformToFill" />
    </HubSection.Background>
  </HubSection>

  <HubSection Width="500" Header="Sezione 1">
    <DataTemplate>
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="*" />
        </Grid.RowDefinitions>
    
        <Image Stretch="Fill" Width="420" Height="280" Source="Assets/Logo.png"/>
        <TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Grid.Row="1" 
            Margin="0,10,0,0" TextWrapping="Wrap"
            Text="Lorem ipsum dolor sit nonumy sed consectetuer ising elit..."/>
        <TextBlock Style="{StaticResource TitleTextBlockS tyle}" Grid.Row="2" 
            Margin="0,10,0,0" Text="Descrizione:"/>
        <TextBlock Style="{StaticResource BodyTextBlockStyle}" Grid.Row="3"
           Text="Lorem ipsum dolor sit amet, consectetuer ising elit... "/>
      </Grid>
    </DataTemplate>
  </HubSection>
</Hub>

Ogni sezione può avere un template differente, che mostri la meglio le informazioni: una lista di elementi di solo testo, una lista di immagini, e così via.


Una possibile ottimizzazione per l'uso in portrait è quella di cambiarne l'orientamento (che di default è in orizzontale), per arrangiare gli elementi in verticale. Ci basterà intercettare l'evento SizeChanged della finestra, per poter riorganizzare al meglio i contenuti.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
  //...
  Window.Current.SizeChanged += Current_SizeChanged;
}

protected override void OnNavigatedFrom(NavigationEventArgs e)
{
  Window.Current.SizeChanged -= Current_SizeChanged;
}

void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
{
  bool isVertical = e.Size.Width <= 500;

  TheHub.Orientation = isVertical ? Orientation.Vertical : Orientation.Horizontal;
}

Il risultato sarà una migliore interazione possibile quando lo spazio a disposizione inizia a diminuire.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi