Setting corner radius and border of Grid cells in LongListSelector

Question

My app loads tiles(buttons) into each longlistselector. So no individual buttons are coded. I am trying to add a border and corner radius, but it is not working out well at all. The border is added with the curves in it but the actual tile is not curved. Is there a way to round the corners of the actual tile and add a border to it correctly?

<DataTemplate x:Key="SoundTileDataTemplate">
            <StackPanel>

                <Grid Background="{StaticResource PhoneAccentBrush}" 
                    Margin="0,5,6,0" Height="56" Width="400" 


                    toolkit:TiltEffect.IsTiltEnabled="True">
                    <Border BorderBrush="white" BorderThickness="3" CornerRadius="15,15,15,15" />
                    <TextBlock Text="{Binding Title}" FontSize="19" TextWrapping="Wrap" Width="140" FontFamily="Tahoma" />
                    <Image Source="/Assets/tiles/soundwave1.png" Width="30" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,6,6" Visibility="{Binding Status, Converter={StaticResource DownloadStatusToIconVisibilityConverter}}" />
                    <ProgressBar Height="12" VerticalAlignment="Bottom" Padding="0" Margin="0" Foreground="{StaticResource PhoneForegroundBrush}" Value="{Binding DownloadProgress}" Visibility="{Binding Status, Converter={StaticResource DownloadStatusToProgressBarVisibilityConverter}}"/>
                </Grid>
            </StackPanel>
        </DataTemplate>

Answer 1

your grid is setting the background color but is not shaped like the border. Remove this.

<Grid Background="{StaticResource PhoneAccentBrush}"

Set the border background color.

<Border BorderBrush="white"
                    BorderThickness="3"
                    CornerRadius="15,15,15,15"
                    Background="{StaticResource PhoneAccentBrush}"></Border>