RectangleGeometry with relative dimensions... how?

Question

I'm trying to replicate the nowadays so fashionable "reflex" effect on a controltemplate for buttons I'm creating.

The basic idea is to create a rectangle with a gradient fill from white to transparent and then clip some of that semi-transparent rectangle with a rectanglegeometry.

The problem is that I don't know how to define a relative rectangle geometry. I kind of worked around width by defining a large value (1000), but height is a problem. For example, it works good for buttons that have a 200 height, but doesn't do anything for smaller buttons.

Any ideas?

            <Rectangle RadiusX="5" RadiusY="5" StrokeThickness="1" Stroke="Transparent">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.55">
                        <GradientStop Color="#66ffffff" Offset="0.0"  />
                        <GradientStop Color="Transparent" Offset="1.0" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
                <Rectangle.Clip>
                    <RectangleGeometry Rect="0,0,1000,60" />
                </Rectangle.Clip>
            </Rectangle>

score 12 · Accepted Answer · answered Mar 24 '10 at 20:54

12

You could do this with a MultiBinding and a new IMultiValueConverter:

public class RectangleConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
        // you can pass in the value to divide by if you want
        return new Rect(0, 0, (double)values[0], (double)values[1] / 3.33);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

And used like so in your XAML:

<lcl:RectangleConverter x:Key="rectConverter" />

...

<RectangleGeometry>
    <RectangleGeometry.Rect>
        <MultiBinding Converter="{StaticResource rectConverter}">
            <Binding Path="ActualWidth" RelativeSource="{RelativeSource AncestorType={x:Type Button}}" />
            <Binding Path="ActualHeight" RelativeSource="{RelativeSource AncestorType={x:Type Button}}" />
        </MultiBinding>
    </RectangleGeometry.Rect>
</RectangleGeometry>

answered Mar 24 '10 at 20:54

Abe Heidebrecht

30,090
7
62
66

It tells me: 'The name "MultiBinding" does not exist in the namespace "http://schemas.microsoft.com/client/2007".' – Cœur Mar 31 '13 at 12:31
I don't know what that xaml namespace is for, but yours should be `http://schemas.microsoft.com/winfx/2006/xaml/presentation`. – Abe Heidebrecht Mar 31 '13 at 15:06
I have: `xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"` and `xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"`. Not a single time there is "2007" in my solution. It's a Windows Phone 8 application. – Cœur Mar 31 '13 at 20:07
2

That is the problem. MultiBindings don't exist in Silverlight, WP7, WP8, or WinRT. Quite a bit of an oversight if you ask me, but you can work around it with something like this: http://www.scottlogic.co.uk/blog/colin/2010/05/silverlight-multibinding-solution-for-silverlight-4/ – Abe Heidebrecht Mar 31 '13 at 20:20

RectangleGeometry with relative dimensions... how?

1 Answers1

Linked