Question

I am learning some WPF/C# so this question might be silly for some of you but I can’t find the solution.

I have a Canvas (let’s say it countains texts) and then I have another Canvas that I want to use as a mask (anything in this second Canvas will mask the first one).

How can I do that?
What if the second Canvas is moving? I want to change the scale of the second canvas (mask) so it “unveils” the content of the first one (content).

Thanks in advance!

EDIT: If instead of a canvas I could use something like a rectangle (as soon as it’s resizable) that’s fine too!

EDIT 2: Here’s the code I’m using:

// Order info
Canvas order_info = new Canvas();
order_info.Width = 220;
order_info.Height = 250;
order_info.Background = Brushes.Yellow;
user_info.Children.Add(order_info);
// Order info mask
Canvas order_info_mask = new Canvas();
order_info_mask.Width = 110;
order_info_mask.Height = 250;
order_info_mask.Background = Brushes.Pink;
user_info.Children.Add(order_info_mask);
// Apply mask
VisualBrush mask_brush = new VisualBrush();
mask_brush.Visual = order_info_mask;
order_info.OpacityMask = mask_brush;

Answer 1

You probabbly want to use the OpacityMask property on your Canvas instead, which is of type Brush, which could be animated.

Edit in response to question: You can do something like:

VisualBrush b = new VisualBrush();
b.Visual = canvas2;
canvas2.OpacityMask = b;

You can also set this in xaml with databinding:

<Canvas>
    <Canvas.OpacityMask>
        <VisualBrush Visual="{Binding ElementName=canvas2}" />
    </Canvas.OpacityMask>
</Canvas>

...

<Canvas x:Name="canvas2" ... /> 

However, to me, this seems like the incorrect approach, what visual transition are you are exactly?