CornerRadius only for selected corners

How-to Discussions
1

Hey,

I want to make a “ListItem”. But I have one little problem I want to only round the top corners.
The ListItem is made out of two Panels, one Panel with the given informations and another panel for the delete area.

I want to combine them, so in the first rectangle I only want to round the top corners and in the other I want to round the bottom corners.

<Panel ux:Class="ListItem" ux:Name="list_item" Margin="20,20,20,20">
    <string ux:Property="ItemName" />
    <string ux:Property="Amount" />
    <float4 ux:Property="Colour" />

    <StackPanel>

        <Panel> <!-- First Panel -->
            <StackPanel Padding="10,10,10,10">
                <Text Value="{Property list_item.ItemName}" FontSize="20" />
                <Text Value="{Property list_item.Amount}" FontSize="20" TextAlignment="Right" />
            </StackPanel>

            <Rectangle Layer="Background" CornerRadius="15">
                <SolidColor Color="#06d6a0" />
            </Rectangle>
        </Panel> <!-- /First Panel -->

        <Panel Height="20"> <!-- Second Panel -->

            <Rectangle Layer="Background">
                <SolidColor Color="#a10702" />
            </Rectangle>
        </Panel> <!-- /Second Panel -->
    </StackPanel>
</Panel>

file
(I created the picture in 5 minutes it’s only a dummy!!)

Is there a way to do this?

2

Hi! The CornerRadius property takes four components, one for each corner, e.g. 0, 10, 10, 0