Set a boundary for the VisualBrush in WPF

Question

There is a blue rectangle that is filled with a custom VisualBrush (left image). A line is passing through the rectangle. How can I trim the brush to achieve the shape in right image.

Answer 1

Look at the LinearGradientBrush. You want to use do something like this to your custom VisualBrush.

    <Rectangle Width="100" Height="200">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Blue" Offset="0"/>
                <GradientStop Color="Blue" Offset="0.405"/>
                <GradientStop Color="Black" Offset="0.405"/>
                <GradientStop Color="Black" Offset="0.722"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>

I don't know what your custom brush is, but if you allowed it to work similar to the gradient brush.

The other option is to actually have a two rectangles with a Separator in between and they each have a separate gradient brush. Then the red line would actually be the Separator background color.

    <DockPanel Width="100" Height="200">
        <Rectangle DockPanel.Dock="Top" Height="100" Margin="0">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="1"/>
                    <GradientStop Color="White"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Separator Height="2" DockPanel.Dock="Top" Background="Red" Margin="0"></Separator>
        <Rectangle Margin="0" Fill="Black"/>
    </DockPanel>