WPF combining 2 shapes

Question

I'm trying create a shape similar to conversation bubbles, where I have a rectangle which displays content, and a round image at a corner, like this:

I've created the Border and Ellipse, but how do I arrange them to look like what I want?

<Border MinWidth="150" MaxWidth="500" MinHeight="150" BorderBrush="DimGray" BorderThickness="2" CornerRadius="10" Margin="80,0,0,25" />
<Ellipse Canvas.ZIndex="2" Height="75" Width="76" Stroke="DimGray" StrokeThickness="2" Fill="White"></Ellipse>

I'm planning to do this as a template, then use it in ItemsControl.

I've tried using Canvas, but after putting it in ItemsControl, everything overlaps each other.

Please advise how can I generate this shape. Another thing to note, my window is resize-able, so the Ellipse needs to always stay either at the left or right lower corner of the Border, I can't use margin to fix a position.

Thanks!

Please use the Stack Overflow image feature instead of Google Drive. — 15ee8f99-57ff-4f92-890c-b56153, Dec 03 '17 at 15:48
I think this question will help you with Canvas in an ItemsControl https://stackoverflow.com/questions/1265364/setting-canvas-properties-in-an-itemscontrol-datatemplate — kenny, Dec 03 '17 at 16:17
Put both elements in a Grid. Then adjust the Border's Margin, and set the Ellipse's HorizontalAlignment to either Left or Right. — Clemens, Dec 03 '17 at 16:24

score 0 · Answer 1 · answered Dec 03 '17 at 21:45

This is pretty close to what you want...

<Grid Width="520" Height="180">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <Border MinWidth="150" MaxWidth="500" MinHeight="150" BorderBrush="DimGray" BorderThickness="2" CornerRadius="10" Margin="80,0,0,25" Grid.RowSpan="2" Grid.ColumnSpan="2"/>
    <Ellipse Canvas.ZIndex="2" Height="75" Width="76" Stroke="DimGray" StrokeThickness="2" Fill="White" Grid.Row="1"></Ellipse>
</Grid>

WPF combining 2 shapes

1 Answers1