I want to recreate the style of the music album tiles that can be found in Google Play Music. They look like this:
In the above image as you can see, there are 'tiles' which contain the album art, title and artists of the songs.
So far I have got to this:
Using this XAML style:
<Grid Cursor="Hand" HorizontalAlignment="Left" Height="218" Margin="10" VerticalAlignment="Top" Width="170" Background="Transparent">
<Grid.Effect>
<DropShadowEffect Opacity="0.4" Direction="230" ShadowDepth="2" BlurRadius="2" RenderingBias="Quality"/>
</Grid.Effect>
<Image RenderOptions.BitmapScalingMode="Fant" Source="{Binding AlbumArt}" VerticalAlignment="Top"/>
<Grid Height="48" VerticalAlignment="Bottom" Background="White">
<TextBlock Text="{Binding Title}" HorizontalAlignment="Left" VerticalAlignment="Top" FontFamily="Roboto" FontSize="15" Foreground="#FF2E2E2E" Margin="7,7,0,0" Width="140"/>
<TextBlock Text="{Binding Artists}" VerticalAlignment="Bottom" HorizontalAlignment="Left" FontFamily="Roboto" Foreground="#FF6E6E6E" Margin="7,0,0,6"/>
<TextBlock HorizontalAlignment="Right" Margin="0,8,7,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontFamily="FontAwesome" FontSize="17" Foreground="#FF9C9C9C" Width="3" Height="14"/>
</Grid>
</Grid>
Now that might look just OK but I want to make it closer in resemblance. I want to know these as well:
- Have I used the correct font, i.e., are they using Roboto too? As far as I know Google uses Roboto in most of their apps and it looks quite good but in my app it looks a little thin. I guess I'm not using the correct font weight or it might be I'm using the wrong font.
- The shadow is probably the main thing wrong with my attempt. Seeking advice on that.
Thanks in advance.