How can I dynamically re-layout user controls on a grid?

Question

How can I dynamically re-layout user controls I put on a grid ? Can I use the UniformGrid ?

By adding the controls on a stack panel like so

<StackPanel Orientation="Horizontal">
    <TextBlock TextWrapping="NoWrap" FontSize="20" Text="A wonderful serenity has taken possession " Margin="5,0,0,0" Height="35"/>
    <Ellipse Fill="#FFC5FF00" Stroke="Black" Width="25" Height="25" Margin="10,0,0,0"/>
    <TextBlock TextWrapping="NoWrap" FontSize="20" Text="I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine." Margin="10,0,0,0" Height="35"/>
    <Ellipse Fill="#FFC5FF00" Stroke="Black" Width="25" Height="25" Margin="10,0,0,0"/>
    <TextBlock TextWrapping="NoWrap" FontSize="20" Text="I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil" Margin="10,0,0,0" Height="35"/>
</StackPanel>

This is what I get

But this is what I want to achieve

score 3 · Accepted Answer · answered Jul 09 '21 at 06:54

Consider using a single TextBlock with inline UI elements:

<TextBlock FontSize="20" TextWrapping="Wrap">
    <Run Text="A wonderful serenity has taken possession"/>
    <Ellipse Fill="#FFC5FF00" Stroke="Black" Width="25" Height="25" Margin="10,0" TextBlock.BaselineOffset="20"/>
    <Run Text="I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine."/>
    <Ellipse Fill="#FFC5FF00" Stroke="Black" Width="25" Height="25" Margin="10,0" TextBlock.BaselineOffset="20"/>
    <Run Text="I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil"/>
</TextBlock>

How can I dynamically re-layout user controls on a grid?

1 Answers1