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
Assegnare un valore di default a un parametro di una lambda in C#
Utilizzare gli snapshot con Azure File shares
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Generare file PDF da Blazor WebAssembly con iText
Implementare l'infinite scroll con QuickGrid in Blazor Server
Eseguire una GroupBy per entity in Entity Framework
Paginare i risultati con QuickGrid in Blazor
Definire stili a livello di libreria in Angular
Utilizzare i primary constructor in C#
Evitare la command injection in un workflow di GitHub
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Usare le navigation property in QuickGrid di Blazor
- annunciato MAUI (.NET Multi-platform App UI), il successore di #xamarin in #net5, che integrerà un toolkit per costruire app con UI per #windows10, #macos, #ios e #android https://aspit.co/b1m #msbuild
- Rilasciata una preview di Windows Phone SDK 7.1.1 per Tango
- Utilizzare gli asynchronous stream in Entity Framework Core 3
- Microsoft lancia il nuovo Windows Phone Dev Center, sostituendo l'AppHub
- Microsoft Security Bulletin MS07-023, MS07-024, MS07-025, MS07-026, MS07-027, MS07-028, MS07-029
- Anteprima di ASP.NET 5 e ASP.NET MVC 6