Question

Can someone explain this WPF behaviour?

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
      <!-- Rounded mask -->
      <Border Name="mask" VerticalAlignment="Top" Background="Black" CornerRadius="48" Height="400" Width="400"  />
      <StackPanel>
            <!-- Use a VisualBrush of 'mask' as the opacity mask -->
            <StackPanel.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=mask}" />
            </StackPanel.OpacityMask>      
            <Grid>
              <Border Background="Red" Height="400" Width="400"/>
              <Border Background="Blue" Height="200" Width="400"/>
            </Grid>
            </StackPanel>

  </Grid>
</Page>

As I would expect, the above code generates the following image (Kaxaml):

alt text http://robbertdam.nl/share/11.png

When I change the line

<Border Background="Blue" Height="200" Width="400"/>

in

<Border Background="Blue" Height="200" Width="600"/> 

the image is as follow (didn’t expect):

alt text http://robbertdam.nl/share/12.png

The corners are not rounded anymore! This question is actually a “scaled down” example of a problem I’m experiencing in my software, which uses similar masks.

How can I work around this?

Answer 1

Add Stretch="None" to the visual brush.

VisualBrush can (and by default will) stretch the image of the visual it is displaying even if the size of the original visual is fixed.