Usare il controllo Hub nelle applicazioni XAML WinRT

di , 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

Usare il controllo Hub nelle applicazioni XAML WinRT (#62) 1010 2
| Condividi su: Twitter, Facebook, LinkedIn

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