Search code examples
c#.netwpfxamlblend

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


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 enter image description here

But this is what I want to achieve enter image description here

Solution

  • 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>