: Recreating the album 'tiles' style found in Google Play Music using WPF I want to recreate the style of the music album tiles that can be found in Google Play Music. They look like this:

@Si6392903

Posted in: #Style #Wpf

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="&#xF142;" 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.

Vote Up Vote Down

Login to post a comment!