Question

I have a Grid with various child elements like Grid, Stackpanel, Image…Is it possible to round the corners of the grid in a way that crops ALL of the contents? Additionally, the root Grid can vary in size so that cannot be hard coded.

Edit: After a great deal of searching I found that the best solution for this problem is using ClippingBehavior as susggested by @wdavo, thanks! The real problem is not knowing the dimensions of the image. If you know the dimensions then there are many simple out of the box solutions out there.

Answer 1

You can use this clipping behavior

http://expressionblend.codeplex.com/SourceControl/changeset/view/61176#494852

You’ll need the Expression Blend SDK installed

<UserControl
x:Class="RoundedCorners.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:behaviors="clr-namespace:Expression.Samples.Interactivity"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
mc:Ignorable="d"
d:DesignHeight="800"
d:DesignWidth="800">
<Grid
    x:Name="LayoutRoot"
    Background="White"
    Margin="50">
    <Grid
        Background="LightGreen">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition
                Height="Auto" />
        </Grid.RowDefinitions>
        <i:Interaction.Behaviors>
            <behaviors:ClippingBehavior
                CornerRadius="30" />
        </i:Interaction.Behaviors>
        <Image
            Grid.Row="0"
            Stretch="Fill"
            Source="Image.JPG" />
        <StackPanel
            Grid.Row="1">
            <TextBlock
                Text="Hello" />
            <TextBlock
                Text="World" />
        </StackPanel>
    </Grid>
</Grid>