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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creare gruppi di client per Event Grid MQTT
Generare file PDF da Blazor WebAssembly con iText
Semplificare il deployment di siti statici con Azure Static Web App
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Determinare lo stato di un pod in Kubernetes
.NET Conference Italia 2023
Effettuare il binding di date in Blazor
Utilizzare la session affinity con Azure Container Apps
Eseguire attività pianificate con Azure Container Jobs
Gestire liste di tipi semplici con Entity Framework Core
Code scanning e advanced security con Azure DevOps
I più letti di oggi
- Evitare il flickering dei componenti nel prerender di Blazor 8
- Rilasciata la Beta 2 di Visual Studio 2008
- tra pochi minuti inizia la keynote della seconda giornata. seguila live su http://aspitalia.com/mix-11 #mix11
- .@dbochicchio ora su #aspnetcore 2 a #netconfit https://aspit.co/netconf-17
- Utilizzare angular-cli per creare una direttiva in Angular 2
- Windows Vista: il ritorno di WinFS con la beta1
- .@CristianCivera tra poco su #azure con i suoi tips&tricks per lo sviluppatore web: https://aspit.co/web15-live #aspilive
- Le novità di C# 10