2009-02-18 2 views
3

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

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

я придумал, после чего должно помочь продемонстрировать, что я имею в виду: rounded corner with gradient 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> 

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

ответ

1
<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> 
Смежные вопросы