2

コントロールに設定したいOpacityMaskのですが、そのマスクを動的に作成する必要があります。外観は次のとおりです。


親コントロールの幅と高さに基づいて、（赤の）長方形全体の幅と高さは動的です。ただし、画像に示すように、左上隅と右上隅に2つの小さな長方形（静的な幅と高さ）を配置する必要があります。では、どうすればこれを実現できますか？

このコードを試しましたが、機能しません:(何も表示されません）

<Border BorderBrush="#80FFFFFF" BorderThickness="1" CornerRadius="5">
    <Border.OpacityMask>
        <VisualBrush>
            <VisualBrush.Visual>
                <DockPanel>
                    <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Height="2">
                        <Border Background="Transparent" Width="12" VerticalAlignment="Stretch" HorizontalAlignment="Left" />
                        <Border Background="Black" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
                        <Border Background="Transparent" Width="12" VerticalAlignment="Stretch" HorizontalAlignment="Right" />
                    </StackPanel>

                    <Border Background="Black" />
                </DockPanel>
            </VisualBrush.Visual>
        </VisualBrush>
    </Border.OpacityMask>
</Border>

VisualBrushこのように（として）使用することも有効ですOpacityMaskか？

4

1 に答える 1

3

私があなたの質問を正しく理解しているなら、あなたはあなたの画像のそれらの黒い四角を透明にしたいですか？

更新：ここにサンプルプロジェクトをアップロードしました：http ：//www.mediafire.com/？5tfkd1cxwfq0rct

Panel問題は、中VisualBrushが伸びないことだと思います。Panel使用するものの幅と高さをActualWidthとActualHeightにバインドすることで、目的の効果を得ることができます。Border

<Border Name="border" BorderBrush="Red" BorderThickness="1" CornerRadius="5">
    <Border.OpacityMask>
        <VisualBrush>
            <VisualBrush.Visual>
                <Grid Width="{Binding ElementName=border, Path=ActualWidth}"
                      Height="{Binding ElementName=border, Path=ActualHeight}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="20"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="20"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="20"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Rectangle Fill="Transparent" Grid.Column="0"/>
                    <Rectangle Fill="Black" Grid.Column="1"/>
                    <Rectangle Fill="Transparent" Grid.Column="2"/>
                    <Rectangle Fill="Black" Grid.Row="1" Grid.ColumnSpan="3"/>
                </Grid>
            </VisualBrush.Visual>
        </VisualBrush>
    </Border.OpacityMask>
    <Grid>
        <TextBlock Text="Testing OpacityMask with a rather long string................." Grid.ZIndex="3"/>
        <Rectangle Fill="Green"/>
    </Grid>
</Border>

再度更新
するデコレータの子のDropShadowEffectは、垂直方向と水平方向の両方BorderでOpacityMaskをプッシュするようです。Borderさらに悪いことに、スタックしているように見えるので、3つのネストされた3つのDropShadowEffectsがある場合Decorators、BlurRadiusの合計は45（20 + 15 + 10）であるため、OpacityMaskは45の値でプッシュされます（少なくとも、これが起こっているように見えますが、それを伝えるのは少し難しいです..）。ColumnDefinitionWidthsとRowDefinitionHeightsを増やすことでこれを補うこともできますが、動的な解決策を見つけるのは難しいと思います。

問題へのより良いアプローチは使用することかもしれBorder.Clipませんが、それも簡単ではありません。

Point1:  0, 2
Point2: 12, 2
Point3: 12, 0
Point4: Width of Border - 12, 0
Point5: Width of Border - 12, 2
Point5: Width of Border, 2
Point6: Width of Border, Height of Border
Point7: 0, Height of Border

Update3
それほど多くのバインディングを必要としないより良いソリューションを思いついた。BorderGetLayoutClipから派生してオーバーライドするカスタムクラスを作成します。これは、DesignerとRuntimeの両方で機能します。柔軟性を高めるためClippedBorderに、ハードコードされた2と12の代わりに使用するいくつかの依存関係プロパティを導入できます。新しいサンプルアプリはこちら：http ：//www.mediafire.com/？9i13rrqpbmzdbvs

public class ClippedBorder : Border
{
    protected override Geometry GetLayoutClip(Size layoutSlotSize)
    {
        PathGeometry pathGeometry = new PathGeometry();
        pathGeometry.Figures = new PathFigureCollection();

        //Point1:  0, 2
        PathFigure pathFigure = new PathFigure();
        pathFigure.StartPoint = new Point(0, 2);

        //Point2: 12, 2
        LineSegment lineSegment1 = new LineSegment();
        lineSegment1.Point = new Point(12, 2);

        //Point3: 12, 0
        LineSegment lineSegment2 = new LineSegment();
        lineSegment2.Point = new Point(12, 0);

        //Point4: Width of Border - 12, 0
        LineSegment lineSegment3 = new LineSegment();
        lineSegment3.Point = new Point(this.ActualWidth-12, 0);

        //Point5: Width of Border - 12, 2
        LineSegment lineSegment4 = new LineSegment();
        lineSegment4.Point = new Point(this.ActualWidth-12, 2);

        //Point5: Width of Border, 2
        LineSegment lineSegment5 = new LineSegment();
        lineSegment5.Point = new Point(this.ActualWidth, 2);

        //Point6: Width of Border, Height of Border
        LineSegment lineSegment6 = new LineSegment();
        lineSegment6.Point = new Point(this.ActualWidth, this.ActualHeight);

        //Point7: 0, Height of Border 
        LineSegment lineSegment7 = new LineSegment();
        lineSegment7.Point = new Point(0, this.ActualHeight);

        pathFigure.Segments.Add(lineSegment1);
        pathFigure.Segments.Add(lineSegment2);
        pathFigure.Segments.Add(lineSegment3);
        pathFigure.Segments.Add(lineSegment4);
        pathFigure.Segments.Add(lineSegment5);
        pathFigure.Segments.Add(lineSegment6);
        pathFigure.Segments.Add(lineSegment7);

        pathGeometry.Figures.Add(pathFigure);

        return pathGeometry;
    }
}
于 2011-02-13T02:10:52.797 に答える