Personalizzare l'aspetto del controllo CalendarDatePicker nella Universal Windows Platform

di Marco Leoncini, in Windows 10,

Tra i nuovi controlli introdotti con il rilascio della Universal Windows Platform, ne abbiamo uno appositamente creato per visualizzare e selezionare una data dal calendario.
Il controllo in questione è CalendarDatePicker: questo controllo presenta una un look simile ad una TextBox, con una piccola icona sul lato destro.

Come qualsiasi altro controllo, è possibile personalizzare l'aspetto, creando uno Style apposito che ne ridefinisca il template.
Il template del CalendarDatePicker è molto complesso, poichè utilizza diversi controlli al suo interno, come ad esempio un Flayout e un CalendarView.

<ControlTemplate TargetType="CalendarDatePicker">
  <Grid x:Name="Root">
                   
   <!--rimosso -->
   <TextBlock x:Name="DateText"
         Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
         FontSize="15"
         HorizontalAlignment="Left"
         Padding="12, 0, 0, 0"
         Grid.Row="1"
         Text="{TemplateBinding PlaceholderText}"
         VerticalAlignment="Center" />
           <FontIcon x:Name="CalendarGlyph"
                 Grid.Column="1"
                 Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                 FontSize="16"
                 FontFamily="{ThemeResource SymbolThemeFontFamily}"
                 Glyph="?"
                 HorizontalAlignment="Center"
                 Grid.Row="1"
                 VerticalAlignment="Center" />
  </Grid>
</ControlTemplate>

È possibile modificare l'aspetto del controllo, ad esempio modificando l'icona, semplicemente com la proprietà Glyph, o rimuovendo il controllo stesso e sostituendolo con un'immagine o qualsiasi altro elemento utile alla nostra applicazione.

Ad esempio, nell'immagine seguente possiamo vedere come sia stata personalizzata l'icona utilizzando uno dei tanto "caratteri" messi a disposizione dal nuovo font Segoe MDL2 Assets.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi