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
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Determinare lo stato di un pod in Kubernetes
Implementare il throttling in ASP.NET Core
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Specificare il versioning nel path degli URL in ASP.NET Web API
Creare alias per tipi generici e tuple in C#
Routing statico e PreRendering in una Blazor Web App
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Potenziare Azure AI Search con la ricerca vettoriale
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode