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
Utilizzare ChatGPT con Azure OpenAI
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Usare ASP.NET Core dev tunnels per testare le applicazioni su internet
Definire lo stile CSS in base alle dimensioni del container
Assegnare un valore di default a un parametro di una lambda in C#
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Gestire undefined e partial nelle reactive forms di Angular
Load test di ASP.NET Core con k6
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Utilizzare le collection expression in C#