L'interfaccia di Windows Phone è stata il battesimo di fuoco per Metro, il design language, che si compone di un linguaggio ed alcuni principi. Mentre i principi sono astratti e sono alla base di Metro, il linguaggio ne è la rappresentazione concreta.
Basandosi sull'astrazione dei principi, possiamo dare rappresentazioni differenti del medesimo controllo al fine di adattarsi al meglio alla UI della nostra applicazione e, perché no, essere anche creativi.
Il controllo DatePicker presente nel toolkit ha un aspetto alquanto semplice: la data è visualizzata in un Button e, di conseguenza, semplicemente racchiusa in un rettangolo colorato.
Questo tipo di UI è essenziale ed adatta al data-entry, ma possiamo modificarla, anche pesantemente, nel caso volessimo aggiungere un pizzico di creatività in più.
Come dicevamo, il controllo DatePicker è molto semplice: il Template è costituito da uno StackPanel, un ContentControl e un Button, utilizzato per visualizzare la data. Eccola riportata:
<ControlTemplate TargetType="toolkit:DatePicker"> <StackPanel> <ContentControl ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{StaticResource PhoneSubtleBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="12,0,12,-4"/> <Button x:Name="DateTimeButton" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Content="{TemplateBinding ValueString}" Foreground="{TemplateBinding Foreground}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Height="72"/> </StackPanel> </ControlTemplate>
Prima di modificare in qualsiasi modo l'aspetto del DatePicker è importantissimo modificare il Binding della proprietà Content del Button, in questo modo, da:
<Button ... Content="{TemplateBinding ValueString}" />
a
<Button ... Content="{TemplateBinding Value}" />
In questo modo, il Button conterrà non più il valore in stringa della data, ma il DateTime vero e proprio.
A questo punto possiamo modificare il template del Button, a nostro piacimento:
<DataTemplate x:Key="myTimerDataTemplate"> <Grid d:DesignWidth="96" d:DesignHeight="96"> <TextBlock Text="{Binding Day}" FontFamily="Segoe WP Black" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="3,-36,0,0" d:DataContext="{Binding Source={StaticResource SampleDataSource1}}" FontSize="96"/> <TextBlock Grid.Row="1" TextWrapping="Wrap" Text="{Binding Month, Converter={StaticResource MonthToStringConverter}}" d:LayoutOverrides="Width, Height" HorizontalAlignment="Left" FontFamily="{StaticResource PhoneFontFamilyLight}" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Bottom" Margin="6,0,0,6" d:DataContext="{Binding Source={StaticResource SampleDataSource1}}"/> </Grid> </DataTemplate>
Alcune parti del template sono stati omessi per brevità, di seguito potete trovare l'aspetto del nuovo e vecchio template messa a confronto, con il relativo risultato.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Evitare la script injection nelle GitHub Actions
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Eseguire attività pianificate con Azure Container Jobs
Sfruttare lo streaming di una chiamata Http da Blazor
Creare un'applicazione React e configurare Tailwind CSS
Utilizzare il trigger SQL con le Azure Function
Eseguire operazioni con timeout in React
Potenziare Azure AI Search con la ricerca vettoriale
Come migrare da una form non tipizzata a una form tipizzata in Angular
Utilizzare gli snapshot con Azure File shares
Creare moduli CSS in React
Gestire errori funzionali tramite exception in ASP.NET Core Web API
I più letti di oggi
- Registrare in una matrice il contenuto di una tabella di un database
- Monad diventa Windows PowerShell e va in RC1
- Nasce il DLR: il .NET Framework 3.5 supporta i linguaggi dinamici
- Using Components in Blazor
- Un Rating Custom Control con DropDownList e jQuery
- Performance in .NET 6 https://aspit.co/b9g di @laxxifer