Углы закругления Silverlight - PullRequest
Новая
       15

Углы закругления Silverlight

4 голосов
/ 13 октября 2011

У меня есть Grid с различными дочерними элементами, такими как Grid, Stackpanel, Image ... Возможно ли скруглить углы сетки таким образом, чтобы обрезать ВСЕ содержимое? Кроме того, корневая сетка может различаться по размеру, чтобы ее нельзя было жестко закодировать.

Редактировать: После долгих поисков я обнаружил, что лучшим решением для этой проблемы является использование ClippingBehavior, как предположил @wdavo, спасибо! Настоящая проблема - не знать размеры изображения. Если вы знаете размеры, то есть много простых готовых решений.

Ответы [ 2 ]

1 голос
/ 19 октября 2011

Вы можете использовать это поведение отсечения

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>

0 голосов
/ 14 октября 2011

Это можно сделать, вставив сетку или панель стека в элемент управления границей, как показано ниже: 

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