开发者

Silverlight Rounding Corners

开发者 https://www.devze.com 2023-04-12 15:48 出处:网络
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 i

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

精彩评论

暂无评论...
验证码 换一张
取 消