CODEWITHSUNDEEP
c#wpfwpf-controls
Dmitrii Polianskii
Dmitrii Polianskii

Reputation: 575

WPF how to draw this way

I have to make this text translatable. The circle around the text should be auto resized. For example: in english it could be Done - 4 letters, in spain It could be 7 letters.enter image description here

Upvotes: 1

Views: 64

Answers (2)

Stokke
Stokke

Reputation: 2011

Assuming you have have a way of accessing this speaking bubble object, you just set the width and height to what you need for the text to fit inside of it and add the appropriate padding.

How to measure the size of the text has been answered before: https://stackoverflow.com/a/9266288/572760

Edit:

So to do the actual drawing you will in essence need an ellipse and some text.

One way to do it is to add something like this to your canvas.

<Canvas>
<Viewbox Name="viewbox" Width="100" Height="100">
    <Grid Name="grow" Width="100" Height="100">
        <Ellipse Fill="LightGray"  Stroke="Black"/>
        <TextBlock Name="ThatsWhatHeSaid" HorizontalAlignment="Center" FontSize="48" FontWeight="Bold" Foreground="LightSkyBlue"  Text="" TextAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</Viewbox>

Then in your codebehind you add the before mentioned MeasureString, and handle the situation where the text changes.

ThatsWhatHeSaid.Text += "it grows larger";
Size mySize = MeasureString(ThatsWhatHeSaid.Text);
const int padding = 100;
grow.Width = mySize.Width + padding;
grow.Height = mySize.Height + padding;

viewbox.Width = grow.Width;
viewbox.Height = grow.Height;

Upvotes: 1

Joe
Joe

Reputation: 7004

Have you attempted it? It's difficult to provide help without even an attempt to work with.

If you really have no idea where to start, I suggest using an image for everything except the speech bubble, and using a Canvas with Ellipse to draw the oval using bindings as the above suggestion.

Upvotes: 1

Related Questions