I have an image overlaid on the scatterview item. The scatterview item contains stackpanel and few textblocks. On overlaying and putting the main window's background as transparent, I can still see the corners which do not gel well with the image.
I am using surfaceusercontrol to add surface items in scatterview. The code is below:
<s:SurfaceUserControl x:Class="Models.ModelItemControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="http://schemas.microsoft.com/surface/2008" Width="110" Background="Transparent">
<Grid>
<Grid.Background>
<ImageBrush ImageSource="pack://application:,,,/Resources/models_card_150-01.png" Opacity="1.0" Stretch="Fill" />
</Grid.Background>
<Viewbox >
<StackPanel MaxWidth="250" MinHeight="300">
<TextBlock Name="ItemTitle" Margin="5,5,5,5" TextWrapping="Wrap" Visibility="Visible" Padding="2" />
<Image Name="ItemImage" Margin="5,5,5,5" Visibility="Visible" MaxHeight="100"/>
<TextBlock Name="ItemDesc" Margin="5,5,5,0" TextWrapping="Wrap" Visibility="Visible" Padding="2" />
<s:SurfaceToggleButton Checked="ItemInfo_Checked" Unchecked="ItemInfo_Unchecked" Margin="5,0,5,0" HorizontalAlignment="Center" VerticalAlignment="Center">Display more info</s:SurfaceToggleButton>
</StackPanel>
</Viewbox>
</Grid>
</s:SurfaceUserControl>
I want a method to clip the corners to round shape instead of rectangular.
Had posted on MSDN also, the link to the answer is posted below: