Tried Searching, CornerRadius on StackPanel or Panel

How-to Discussions
1

Hi,

I want to create a Card type of effect in a listview, how would I go around doing this?

Quite new to this, thanks in advance!

2

Hi! :slight_smile:

Based on the title I take it that you want to create (multiple) panels with rounded corners?

In that case all you have to do is set the Appearance of the panel to a rectangle with rounded corners:

    <StackPanel ux:Class="Card" Padding="20" Margin="20">
        <Rectangle ux:Binding="Appearance" Fill="#f00" CornerRadius="5" />
    </StackPanel>

Here we created a new class called Card which can then be used in our UX just as we would with any other panel:

    <Card >
        <Text>Hey!</Text>
        <Button Text="Press me"/>
    </Card>

Depending on your use case you might not even need to create a new class. You can check out this more complete example to learn more: https://www.fusetools.com/developers/examples/httpjson

3

Amazing, thank you.