Silverlight 圆角答案

【问题标题】：Silverlight Rounding CornersSilverlight 圆角
【发布时间】：2011-10-13 16:39:58
【问题描述】：

我有一个包含各种子元素（如 Grid、Stackpanel、Image）的 Grid...是否可以通过裁剪所有内容的方式对网格的角进行圆角处理？此外，根 Grid 的大小可能会有所不同，因此无法进行硬编码。

编辑：经过大量搜索后，我发现解决此问题的最佳方法是使用 @wdavo 建议的 ClippingBehavior，谢谢！真正的问题是不知道图像的尺寸。如果您知道尺寸，那么有许多简单的开箱即用解决方案。

【问题讨论】：

标签： silverlight silverlight-3.0

【解决方案1】：

您可以使用这种剪裁行为

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

您需要安装 Expression Blend SDK

<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>

【讨论】：

【解决方案2】：

您可以通过将网格或堆栈面板插入到边框控件来做到这一点，就像下面的代码一样：

         <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>

【讨论】：

-1 如果容器中有一个 Image 标签，那么它不会被裁剪，这是问题的一个重要部分。这就是为什么我把图像加粗。不过感谢您的尝试！