0

RadialGradientBrush の使用は簡単で、中心の色を外側の色にマージできます。これは、Rectangle または Border の内部を塗りつぶすためのブラシとしてうまく機能します。そのブラシをペンのように適用する効果を実現し、それを Border.BorderBrush として適用したいと考えています。そのため、境界線の中心は暗くなり、境界線から離れるとフェードアウトします。

これを説明する別の方法は、Windows Vista または Windows 7 のトップ レベル ウィンドウの周りに表示される影です。ウィンドウの境界に近づくと影は暗くなり、ウィンドウから離れるほど影が薄くなります。同様の方法で Border を描きたいと思います。

現時点では、RadialGradientBrush または LinearGradientBrush を使用してこれを達成する方法を見つけることができません。きっとそれは可能でなければなりませんか？何か案は？

4

2 に答える 2

4

このような効果を得ることができます

ここに画像の説明を入力

次のように、コンテンツを 3x3 グリッドの中央 (セル 1,1) に配置します。

<Grid>
    <Grid.Resources>
        <Color x:Key="InnerColor">#FF000000</Color>
        <Color x:Key="OuterColor">#FFFFFFFF</Color>
    </Grid.Resources>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="20"/>
        <ColumnDefinition />
        <ColumnDefinition Width="20"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="20"/>
        <RowDefinition/>
        <RowDefinition Height="20"/>
    </Grid.RowDefinitions>
    <Rectangle Grid.Column="1" Grid.Row="0">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Offset="0" Color="{StaticResource OuterColor}"/>
                <GradientStop Offset="1" Color="{StaticResource InnerColor}"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="1" Grid.Row="2">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="0" Grid.Row="1">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <GradientStop Offset="0" Color="{StaticResource OuterColor}"/>
                <GradientStop Offset="1" Color="{StaticResource InnerColor}"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="2" Grid.Row="1">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="0" Grid.Row="0">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="1,1" Center="1,1" RadiusX="1" RadiusY="1">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="2" Grid.Row="0">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="0,1" Center="0,1" RadiusX="1" RadiusY="1">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="0" Grid.Row="2">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="1,0" Center="1,0" RadiusX="1" RadiusY="1">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="2" Grid.Row="2">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="0,0" Center="0,0" RadiusX="1" RadiusY="1">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Grid>
于 2012-08-29T17:50:55.543 に答える
0

aGridまたは aDockPanelを使用してから、Lineまたはを使用Rectangleして 4 つの塗りつぶされた異なる領域を作成することができます。ただし、この場合は RadialGradient を使用できません。これは、伸びて見栄えが悪くなるためです。したがって、代わりに、必要な 4 つの異なる方向に卒業するように設定された 4 つの異なる LinearGradients を作成することもできます。 ..そして、これはそれをしません。

そう...

...GradientPathパスに沿ってグラデーションを描画する方法を知っているこのコントロールを試してみることができます。

注意してください、私はそれに多くの時間を費やすことができなかったので、それを適切に使用する方法を考え出していませんでした.長方形の開始キャップと終了キャップは完全に正しくありません.

RectangleGeometry の代わりに PathGeometry を使用しても、同じ問題が発生することに注意してください。

考えられる回避策の 1 つは、GradientPath を使用して 2 つの四角形を作成し、(適切なクリップ定義を使用して) 対角線で切り取り、それぞれが四角形の適切な部分 (つまり、開始/終了アーティファクトなし) に寄与するようにし、それらをオーバーレイすることです。グリッドで。

または、GradientPath コードを掘り下げることもできます。

このアプローチを採用したい場合は、いくつかのアイデアが得られるはずです...そして、自分の好きなようになるまで、自由に遊んだり実験したりしてください。

<gpl:GradientPath Name="gradientPath2"
                  StrokeThickness="30"
                  >
    <gpl:GradientPath.Data>
        <RectangleGeometry Rect="0,0,200,200" />
    </gpl:GradientPath.Data>
    <gpl:GradientPath.GradientStops>
        <GradientStop Offset="0" Color="Blue" />
        <GradientStop Offset="0.5" Color="Red" />
        <GradientStop Offset="1" Color="Green" />
    </gpl:GradientPath.GradientStops>
</gpl:GradientPath>

ここに画像の説明を入力

于 2012-08-29T14:30:26.643 に答える