Question

I have the following XAML:

<Border x:Name="ClippingBorder" VerticalAlignment="Stretch" BorderThickness="0">
    <Border.Clip>
        <RectangleGeometry RadiusX="4.4" RadiusY="4.4" Rect="{Binding ClippingRectangle}"/>
    </Border.Clip>
</Border>

And the following codebehind:

    private Rect clippingRectangle;
    public Rect ClippingRectangle
    {
        get
        {
            return clippingRectangle;
        }
        set
        {
            clippingRectangle = value;
            NotifyPropertyChanged("ClippingRectangle");

        }
    }


    public MainPage()
    {
        InitializeComponent();

        //Get the actual height of the content frame
        ClippingBorder.DataContext = this;
        ContentFrame.SizeChanged += new SizeChangedEventHandler(ContentFrame_SizeChanged);
    }

    void ContentFrame_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        MessageBox.Show(e.NewSize.Height.ToString());
        ClippingRectangle = new Rect(0,0,798,e.NewSize.Height);
    }

The resize works, but unfortunately the clipping is not working in that the rounded corners are not rounded. If I substitute the ClippingRectangle binding for static values it works. But when I use the binding it does not. Is there a solution for this?

Answer 1

It turns out that setting the Border.Clip property in the codebehind resolves the issue.

    void ContentFrame_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        RectangleGeometry clipRect = new RectangleGeometry();
        clipRect.Rect = new Rect(0,0,798,e.NewSize.Height);
        clipRect.RadiusX = 4.4;
        clipRect.RadiusY = 4.4;
        ClippingBorder.Clip = clipRect;
    }