views:

16

answers:

0

My question is similar to this one.

However, the answer in that thread does not work for me, because I'm using the LinearGradientBrush for an opacity mask.

I've got a grid with three rows:

<Grid.RowDefinitions>
    <RowDefinition Height="50" />
    <RowDefinition Height="*" />
    <RowDefinition Height="50" />
</Grid.RowDefinitions>

The content of the grid should be semi-transparent at the top and the bottom of the grid (the first and third row).

I understand I can't use clipping, because that does not allow for adjustable opacity. So I guess I have to go with opacity masks. They take images or brushes as content, the latter of which makes more sense for this problem, but raises the question of how to set the offset of the GradientBrush to the absolute value of the gridrow's height.

Also, I'm using the MVVM pattern. Binding the offset does not work because it doesn't derive from FrameworkElement. The only solution I can see right now would be to bind the complete brush to my viewmodel, and adjust it every time the grid's size changes. Not too nice, is there a more elegant solution?

What I'd like to do is something like this (RowDefinitions and content skipped)

pseudo code:

<Grid> 
    <Grid.OpacityMask>
        <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
            <LinearGradientBrush.GradientStops>
                <GradientStop AbsoluteOffset="50" Color="#7F000000" />
                <GradientStop AbsoluteOffset="*" Color="#00000000" />
                <GradientStop AbsoluteOffset="50" Color="#7F000000" />
            </LinearGradientBrush.GradientStops>
    </Grid.OpacityMask>
</Grid>

I can't split the grid or anything like that, because the content spans the three rows. DrawingBrush would solve it nicely I guess, but that's not living in the SL house.

I'm using Silverlight 3.