Question

I want to have a canvas with a border and a rounded corner in the top right. What I did so far was place the canvas inside a border and round the top-right corner. I also need to round that same corner in the canvas. Using a clip I ran into a problem where RectangleGeometry won’t let me round just one corner, how can I get around that and is there a better way of doing this?

<Border Name="uiBorder" Background="Black" BorderBrush="White"
    BorderThickness="1, 2, 1, 1" CornerRadius="0, 4, 0, 0">
    <Canvas Background="Gray" Name="uiCanvas" Margin="0, 0, 0, 0">
        <Canvas.Clip>
            <RectangleGeometry RadiusX="4" RadiusY="4">
                <RectangleGeometry.Rect>
                    <MultiBinding Converter="{StaticResource convertor}">
                        <Binding ElementName="uiBorder" Path="ActualWidth" />
                        <Binding ElementName="uiBorder" Path="ActualHeight"/>
                    </MultiBinding>
                </RectangleGeometry.Rect>
            </RectangleGeometry>
        </Canvas.Clip>  
        <Image Name="uiImage" />
    </Canvas>
</Border>

Answer 1

Time for some XAML WUlululu:

<Grid>
    <Border Name="mask" Background="White" CornerRadius="0, 4, 500, 0"/>
    <Border Name="uiBorder" Background="Black" BorderBrush="White" BorderThickness="1, 2, 1, 1" CornerRadius="0, 4, 500, 0">
        <Canvas Background="Gray" Name="uiCanvas" Margin="0, 0, 0, 0">
            <Canvas.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=mask}"/>
              </Canvas.OpacityMask>
            <Image Name="uiImage" />
        </Canvas>
    </Border>
</Grid>

If the Background of uiBorder were White, you could use it instead of the additional “mask” border.