chatbubbleken

<ListView.itemTemplate>
    <StackLayout id="">

        <StackLayout  visibility="">
            <GridLayout width="100%" columns="*" rows="auto, 20" class="msg them">
                <StackLayout orientation="horizontal">
                    <Image class="authorimg" width="30" height="30" stretch="aspectFill" verticalAlignment="top" src="" />
                    <Label text="" textWrap="true" verticalAlignment="top" class="msg_text"/>
                </StackLayout>

                <Label class="msg_timestamp" text="" verticalAlignment="top" row="1" colSpan="2" />
            </GridLayout>
        </StackLayout>

        <StackLayout  visibility="">
            <GridLayout columns="*" rows="auto, 40" class="msg me">
                <StackLayout orientation="horizontal" horizontalAlignment="right">
                    <Label text="" class="msg_text" textWrap="true" verticalAlignment="top" />
                    <Image class="authorimg" stretch="aspectFill" height="30" width="30" verticalAlignment="top" src="" col="1" />
                </StackLayout>
                <Label class="msg_timestamp" text="" verticalAlignment="top" row="1" />
            </GridLayout>
        </StackLayout>

    </StackLayout>
</ListView.itemTemplate>



.msg {
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 20;
}

.me .msg_text {
    background-color: #30A9FF;
    color: white;
    padding: 8px;
    margin-left: 40px;
    border-radius: 15;

}

.them .msg_text {
    background-color: #e0e0e0;
    color: #333;
    padding: 7px;
    border-radius: 15;
    margin-right: 40px;
}

.authorimg {
    margin: 0px 5px 5px 5px;
    width: 30;
    height: 30;
    border-radius: 15;
}

.them .msg_timestamp {
    color: gray;
    font-size: 11px;
    margin-left: 40px;
}

.me .msg_timestamp {
    color: gray;
    font-size: 11px;
    margin-right: 40px;
    text-align: right;
}