In questo articolo vedremo come realizzare un pulsante che ha lo stile di tipo “Glass” ossia con opacità nella parte superiore e trasparenza di sfondo.
A volte può capitare di realizzare nelle nostre applicazioni per ambiente mobile, in particolare per Windows Phone versione 8.1 per i linguaggi VB.Net e C# un’interfaccia accattivante che migliori anche l’usabilità.
In questo articolo vedremo come con poche semplice righe di codice, in particolare lato “XAML” si possono impostare degli stili che colpiscono subito l'utilizzo dell'app da parte dell'utente.
Stesura del codice
Si crea un nuovo progetto di tipo Windows Phone 8.1, selezionando il linguaggio di proprio interesse.
Nel file “XAML” e precisamente nel file chiamato “MaingPage.xaml” andiamo ad aggiungere un frammento di codice riguardante la formattazione.
Tra il tag di chiusura intestazione dove viene indicato lo sfondo ( Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" )
ed il tag di apertura grid (
Il codice di stile qui di seguito imposta un oggetto di tipo Button, con una determinata colorazione, apportando delle sfumature nella parte superiore.
Qui di seguito si riporta il codice completo
<UserControl.Resources>
<Style x:Key="GlassButton" TargetType="Button">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="glow"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000"
Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="DisabledVisualElement"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
<Border x:Name="border" Background="#7F000000" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.507*"/>
<RowDefinition Height="0.493*"/>
</Grid.RowDefinitions>
<Border Opacity="0"
HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4">
</Border>
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/>
<Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.494,0.889" StartPoint="0.494,0.028">
<GradientStop Color="#99FFFFFF" Offset="0"/>
<GradientStop Color="#33FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</Border>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
Ora non ci resta che aggiungere alla nostra form un pulsante ed impostare lo stile appena creato.
Possiamo fare in due modi, o trasciniamo nell’immagine relativo all’emulatore del dispositivo mobile, un controllo button, oppure scriviamo il tag xml relativo a tale classe.
Qui di seguito si riporta il codice completo del tag XML relativo al pulsante che andremo ad inserire nel tag “GRID”.
<Grid>
<Button Width="300" Height="100" Content="Button Glass" Foreground="Azure"
Style="{StaticResource
GlassButton}"
</Grid>
Come si vede dal frammento di codice nella proprietà “Style” viene impostato il nome della risorsa che abbiamo appena creato.
Conclusioni
L’articolo ha voluto fornire spunti per arricchire le applicazioni in ambito mobile e precisamente per la piattaforma Windows Phone, con grafica che risalta alcuni particolari del programma.
Realizzare interfacce accattivante è importante, ma alla base di una buona programmazione, i programmatori devono soprattutto basarsi su una buona “interfaccia amichevole” che permette all’utente di utilizzare in maniera semplice e intuitiva l’app.
Nello realizzare l’interfaccia si devono tener conto anche delle dimensioni dello schermo e risorse hardware di cui dispone il dispositivo.
Post
Le opere pubblicate in questo blog sono sotto la licenza Creative Commons. Attribuzione- No commerciale e no derivate.
