WPF Закругленные углы - возможен ли последовательный уклон за углом? - PullRequest
Новая
       18

WPF Закругленные углы - возможен ли последовательный уклон за углом?

4 голосов
/ 18 февраля 2009

Я сделал градиент, который мне очень нравится в выражении blend, и я пытаюсь понять, смогу ли я сделать градиентную кривую за углом, чтобы получить эффект закругленной границы с градиентом.

Проблема в том, что я не могу использовать нормальную границу, потому что градиент не будет постоянным.

Я придумал следующее, которое должно помочь продемонстрировать, о чем я думаю: закругленный угол с градиентом http://img232.imageshack.us/img232/9899/roundedcornerrg0.th.jpg

<Grid x:Name="grid" >
    <Border
        BorderThickness="0,0,40,40"
        CornerRadius="0,0,40,0"
        Padding="2" Height="60" VerticalAlignment="Bottom" Width="65" HorizontalAlignment="Right" >
        <Border.BorderBrush>
            <RadialGradientBrush>
                <RadialGradientBrush.RelativeTransform>
                    <TransformGroup>
                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.058" ScaleY="2.177"/>
                        <SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>
                        <RotateTransform Angle="-119.481" CenterX="0.5" CenterY="0.5"/>
                        <TranslateTransform X="0.209" Y="0.52"/>
                    </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FF000000" Offset="0"/>
                <GradientStop Color="#000A0A0A" Offset="1"/>
                <GradientStop Color="#6B050505" Offset="0.829"/>
                <GradientStop Color="#BB020202" Offset="0.763"/>
            </RadialGradientBrush>
        </Border.BorderBrush>
    </Border>
    <Rectangle VerticalAlignment="Stretch" Height="100" Width="40" HorizontalAlignment="Right" Margin="0,0,0,60" StrokeThickness="0" Panel.ZIndex="0">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="-0.025,0.5" StartPoint="1,0.5">
                <GradientStop Color="#FF000000" Offset="0"/>
                <GradientStop Color="#000A0A0A" Offset="1"/>
                <GradientStop Color="#6B050505" Offset="0.829"/>
                <GradientStop Color="#BB020202" Offset="0.763"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle VerticalAlignment="Bottom" Height="40" Width="100" HorizontalAlignment="Stretch" Margin="0,0,65,0">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                <GradientStop Color="#FF000000" Offset="0"/>
                <GradientStop Color="#000A0A0A" Offset="1"/>
                <GradientStop Color="#6B050505" Offset="0.829"/>
                <GradientStop Color="#BB020202" Offset="0.763"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Grid>

Есть ли способ заставить градиент сгибаться за угол, как я думаю? Я видел в Интернете предложение вкладывать границы друг в друга, но мне это тоже не годится, так как градиент усложняет жизнь.

Ответы [ 2 ]

6 голосов
/ 18 февраля 2009

Возможно, вы захотите проверить статью Чарльза Петцольда о графических контурах с градиентными цветами , в которой он обсуждает проблему, аналогичную вашей.

2 голосов
/ 21 сентября 2010 
    <Grid x:Name="grid" VerticalAlignment="Top" HorizontalAlignment="Left" Width="100" Height="100" Margin="200,200,0,0">
         <Rectangle VerticalAlignment="Stretch" Width="20" HorizontalAlignment="Right" Margin="0,20,0,20" StrokeThickness="0" Panel.ZIndex="0">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
                    <GradientStop Color="#00FFFFFF" Offset="0"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                    <GradientStop Color="#22FFFFFF" Offset="0.5"/>
                    <GradientStop Color="#11FFFFFF" Offset="0.3"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle VerticalAlignment="Bottom" Height="20" HorizontalAlignment="Stretch" Margin="20,0,20,0">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="1,1" StartPoint="1,0">
                    <GradientStop Color="#00FFFFFF" Offset="0"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                    <GradientStop Color="#22FFFFFF" Offset="0.5"/>
                    <GradientStop Color="#11FFFFFF" Offset="0.3"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle VerticalAlignment="Stretch" Width="20" HorizontalAlignment="Left" Margin="0,20,0,20" StrokeThickness="0" Panel.ZIndex="0">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
                    <GradientStop Color="#00FFFFFF" Offset="0"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                    <GradientStop Color="#22FFFFFF" Offset="0.5"/>
                    <GradientStop Color="#11FFFFFF" Offset="0.3"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle VerticalAlignment="Top" Height="20" HorizontalAlignment="Stretch" Margin="20,0,20,0">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
                    <GradientStop Color="#00FFFFFF" Offset="0"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                    <GradientStop Color="#22FFFFFF" Offset="0.5"/>
                    <GradientStop Color="#11FFFFFF" Offset="0.3"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle VerticalAlignment="Top" Height="20" Width="20" HorizontalAlignment="Left" Margin="0,0,0,0">
            <Rectangle.Fill>
                <RadialGradientBrush Center=".9,.9" GradientOrigin="1,1" RadiusX=".85" RadiusY=".85">
                    <GradientStop Color="#00FFFFFF" Offset="0"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                    <GradientStop Color="#22FFFFFF" Offset="0.5"/>
                    <GradientStop Color="#11FFFFFF" Offset="0.3"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle VerticalAlignment="Bottom" Height="20" Width="20" HorizontalAlignment="Right" Margin="0,0,0,0">
            <Rectangle.Fill>
                <RadialGradientBrush Center=".1,.1" GradientOrigin="0,0" RadiusX=".85" RadiusY=".85">
                    <GradientStop Color="#00FFFFFF" Offset="0"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                    <GradientStop Color="#22FFFFFF" Offset="0.5"/>
                    <GradientStop Color="#11FFFFFF" Offset="0.3"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle VerticalAlignment="Top" Height="20" Width="20" HorizontalAlignment="Right" Margin="0,0,0,0">
            <Rectangle.Fill>
                <RadialGradientBrush Center=".1,.9" GradientOrigin="0,1" RadiusX=".85" RadiusY=".85">
                    <GradientStop Color="#00FFFFFF" Offset="0"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                    <GradientStop Color="#22FFFFFF" Offset="0.5"/>
                    <GradientStop Color="#11FFFFFF" Offset="0.3"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle VerticalAlignment="Bottom" Height="20" Width="20" HorizontalAlignment="Left" Margin="0,0,0,0">
            <Rectangle.Fill>
                <RadialGradientBrush Center=".9,.1" GradientOrigin="1,0" RadiusX=".85" RadiusY=".85">
                    <GradientStop Color="#00FFFFFF" Offset="0"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                    <GradientStop Color="#22FFFFFF" Offset="0.5"/>
                    <GradientStop Color="#11FFFFFF" Offset="0.3"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Grid>
...