Search code examples
wpfdrawingbrush

DrawingBrush with RadialGradientBrush Drawing can only display last one


there is a problem. I build a DrawingBrush whose Drawing is a DrawingGroup and the group children can changed. So i build it in the behind code. The drawing.Brush is RadialGradientBrush.

And i add 5 drawings into the group, but it can only display the last one. But the xaml can display all of them. And i found it's the problem of my RadialGradientBrush, but i can't find the error of my code. Could you help me ? Thank you very very much, here is my code.

<Rectangle Name="rect">
                <Rectangle.Fill>
                    <DrawingBrush x:Name="totalBrush">
                        <DrawingBrush.Drawing>
                            <DrawingGroup>
                                <GeometryDrawing x:Name="geometry1">
                                    <GeometryDrawing.Brush>
                                        <RadialGradientBrush x:Name="Brush1" GradientOrigin="0.2,0.2"  Center="0.2,0.2" RadiusX="0.5" RadiusY="0.5">
                                            <RadialGradientBrush.GradientStops>
                                                <GradientStop Color="#FFFF0000" Offset="0" />
                                                <GradientStop Color="#000000FF" Offset="1" />
                                            </RadialGradientBrush.GradientStops>
                                        </RadialGradientBrush>
                                    </GeometryDrawing.Brush>
                                    <GeometryDrawing.Geometry>
                                        <RectangleGeometry Rect="0,0,1,1"/>
                                    </GeometryDrawing.Geometry>
                                </GeometryDrawing>
                                <GeometryDrawing>
                                    <GeometryDrawing.Brush>
                                        <RadialGradientBrush x:Name="Brush2" GradientOrigin="0.8,0.2"  Center="0.8,0.2" RadiusX="0.5" RadiusY="0.5">
                                            <RadialGradientBrush.GradientStops>
                                                <GradientStop Color="#FFFF0000" Offset="0" />
                                                <GradientStop Color="#000000FF" Offset="1" />
                                            </RadialGradientBrush.GradientStops>
                                        </RadialGradientBrush>
                                    </GeometryDrawing.Brush>
                                    <GeometryDrawing.Geometry>
                                        <RectangleGeometry Rect="0,0,1,1"/>
                                    </GeometryDrawing.Geometry>
                                </GeometryDrawing>
                                <GeometryDrawing>
                                    <GeometryDrawing.Brush>
                                        <RadialGradientBrush x:Name="Brush3" GradientOrigin="0.5,0.5"  Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                                            <RadialGradientBrush.GradientStops>
                                                <GradientStop Color="#FFFF0000" Offset="0" />
                                                <GradientStop Color="#000000FF" Offset="1" />
                                            </RadialGradientBrush.GradientStops>
                                        </RadialGradientBrush>
                                    </GeometryDrawing.Brush>
                                    <GeometryDrawing.Geometry>
                                        <RectangleGeometry Rect="0,0,1,1"/>
                                    </GeometryDrawing.Geometry>
                                </GeometryDrawing>
                                <GeometryDrawing>
                                    <GeometryDrawing.Brush>
                                        <RadialGradientBrush x:Name="Brush4" GradientOrigin="0.2,0.8"  Center="0.2,0.8" RadiusX="0.5" RadiusY="0.5">
                                            <RadialGradientBrush.GradientStops>
                                                <GradientStop Color="#FFFF0000" Offset="0" />
                                                <GradientStop Color="#000000FF" Offset="1" />
                                            </RadialGradientBrush.GradientStops>
                                        </RadialGradientBrush>
                                    </GeometryDrawing.Brush>
                                    <GeometryDrawing.Geometry>
                                        <RectangleGeometry Rect="0,0,1,1"/>
                                    </GeometryDrawing.Geometry>
                                </GeometryDrawing>
                                <GeometryDrawing>
                                    <GeometryDrawing.Brush>
                                        <RadialGradientBrush x:Name="Brush5" GradientOrigin="0.8,0.8"  Center="0.8,0.8" RadiusX="0.5" RadiusY="0.5">
                                            <RadialGradientBrush.GradientStops>
                                                <GradientStop Color="#FFFF0000" Offset="0" />
                                                <GradientStop Color="#000000FF" Offset="1" />
                                            </RadialGradientBrush.GradientStops>
                                        </RadialGradientBrush>
                                    </GeometryDrawing.Brush>
                                    <GeometryDrawing.Geometry>
                                        <RectangleGeometry Rect="0,0,1,1"/>
                                    </GeometryDrawing.Geometry>
                                </GeometryDrawing>
                            </DrawingGroup>
                        </DrawingBrush.Drawing>
                    </DrawingBrush>
                </Rectangle.Fill>
            </Rectangle>



private void InitializeTemperaturePoints()
    {
        DrawingGroup group = new DrawingGroup();
        DrawingBrush drawingBrush = new DrawingBrush();
        var drawing1 = GenerateDrawing(0.2, 0.2);
        var drawing2 = GenerateDrawing(0.8, 0.2);
        var drawing3 = GenerateDrawing(0.5, 0.5);
        var drawing4 = GenerateDrawing(0.2, 0.8);
        var drawing5 = GenerateDrawing(0.8, 0.8);
        //var drawing1 = GenerateDrawing(1);
        //var drawing2 = GenerateDrawing(2);
        //var drawing3 = GenerateDrawing(3);
        //var drawing4 = GenerateDrawing(4);
        //var drawing5 = GenerateDrawing(5);
        group.Children.Add(drawing1);
        group.Children.Add(drawing2);
        group.Children.Add(drawing3);
        group.Children.Add(drawing4);
        group.Children.Add(drawing5);
        drawingBrush.Drawing = group;
        rect1.Fill = drawingBrush;
    }

    GeometryDrawing GenerateDrawing(double x, double y)
    {
        RadialGradientBrush brush = new RadialGradientBrush();
        brush.GradientOrigin = new Point(x, y);
        brush.Center = new Point(x, y);
        brush.RadiusX = 0.5;
        brush.RadiusY = 0.5;
        GradientStop stop1 = new GradientStop(Colors.Red, 0);
        GradientStop stop2 = new GradientStop(Colors.Blue, 1);
        if (brush.GradientStops == null)
        {
            brush.GradientStops = new GradientStopCollection();
        }
        brush.GradientStops.Add(stop1);
        brush.GradientStops.Add(stop2);
        brush.Opacity = 1;
        GeometryDrawing drawing = new GeometryDrawing();
        Rect rectangle = new Rect(0, 0, 1, 1);
        RectangleGeometry geometry = new RectangleGeometry(rectangle);
        drawing.Geometry = geometry;
        drawing.Brush = brush;
        return drawing;
    }

    GeometryDrawing GenerateDrawing(int index)
    {
        Brush brush = null;
        switch (index)
        {
            case 1: brush = Brush1; break;
            case 2: brush = Brush2; break;
            case 3: brush = Brush3; break;
            case 4: brush = Brush4; break;
            case 5: brush = Brush5; break;
        }
        GeometryDrawing drawing = new GeometryDrawing();
        Rect rectangle = new Rect(0, 0, 1, 1);
        RectangleGeometry geometry = new RectangleGeometry(rectangle);
        drawing.Geometry = geometry;
        drawing.Brush = brush;
        return drawing;
    }
}

Solution

  • The difference between the brushes is that the brushes in the XAML are partially transparant:

    <RadialGradientBrush x:Name="Brush1" 
                         GradientOrigin="0.2,0.2"
                         Center="0.2,0.2"
                         RadiusX="0.5"
                         RadiusY="0.5">
        <RadialGradientBrush.GradientStops>
            <GradientStop Color="#FFFF0000" Offset="0" />
            <GradientStop Color="#000000FF" Offset="1" />
        </RadialGradientBrush.GradientStops>
    </RadialGradientBrush>
    

    The brushes in code are not which causes the last rectangle to over-paint the other rectangles:

    GradientStop stop1 = new GradientStop(Colors.Red, 0);
    GradientStop stop2 = new GradientStop(Colors.Blue, 1);
    

    To fix that:

    GradientStop stop1 = new GradientStop(Colors.Red, 0);
    GradientStop stop2 = new GradientStop(Color.FromArgb(0, 0, 0, 1), 1);