I’m needing to create a UserControl, that has a portion of the control’s background

Question

0

Asked: May 13, 20262026-05-13T08:16:08+00:00 2026-05-13T08:16:08+00:00

I’m needing to create a UserControl, that has a portion of the control’s background

0

I’m needing to create a UserControl, that has a portion of the control’s background transparent. The transparent portion is cutout in the shape of a Border with CornerRadius of 2–it’s required because of the design.

Here is my code that is not working:

    <UserControl Margin="1" x:Name="Box">
        <UserControl.Resources>
            <Style TargetType="UserControl">
                <Setter Property="Height" Value="16" />
            </Style>
        </UserControl.Resources>
        <Grid>
            <Border CornerRadius="2" BorderThickness="0">
                <Border.Background>
                    <SolidColorBrush Color="Black" Opacity=".3" />
                </Border.Background>
                <Border.OpacityMask>
                    <VisualBrush>
                        <VisualBrush.Visual>
                            <Grid 
                                Background="Black" 
                                Width="{Binding ElementName=Box, Path=ActualWidth}"
                                Height="{Binding ElementName=Box, Path=ActualHeight}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="50" />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Border Grid.Column="1" Margin="1" CornerRadius="2" Background="Transparent" BorderThickness="0" />
                            </Grid>
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Border.OpacityMask>
            </Border>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <TextBlock 
                    VerticalAlignment="Center" TextAlignment="Right" FontSize="10" Margin="2"
                    Foreground="White" Text="Property" />

                <TextBlock 
                    Grid.Column="1" VerticalAlignment="Center" TextAlignment="Center" FontSize="10" Margin="2"
                    Text="Value" />
            </Grid>
        </Grid>
    </UserControl>

I made a few changes, so you guys should be able to drop this straight into XamlPad.

For some reason my VisualBrush that is set to the Border’s OpacityMask is not working at all. The OpacityMask is just displaying everything fully visible. For a test, I dropped a quick LinearGradientBrush in and it worked as expected.

Is there some issue using VisualBrush and OpacityMask together? What is going wrong here?

Here is a screenshot of what I’m trying to achieve:

ScreenShot http://monitor.utopiaselfscan.com/Screen.png

The UserControl are the headers saying Entity No, Progress, Hours, etc. They are black with 30% transparency and have a rounded rectangle opacity mask cutout. I normally use images to render stuff like this, b/c our graphic artist can get crazy with glass-looking effects.