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 the开发者_如何转开发re.
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>
You can do that by inserting the grid or stack panel to a border control just like the code below:
<Border CornerRadius="5,5,0,5" BorderThickness="2" BorderBrush="Black" HorizontalAlignment="Center" Width="100" Height="100" VerticalAlignment="Center">
<StackPanel>
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF030FC6" Offset="0.2"/>
</LinearGradientBrush>
</StackPanel.Background>
</StackPanel>
</Border>
<Border CornerRadius="5,5,0,5" BorderThickness="2" BorderBrush="Black" HorizontalAlignment="Left" Width="100" Height="100" VerticalAlignment="Center" Margin="68.833,0,0,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FFE90D0D" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid/>
</Border>
精彩评论