Question

I have the next layout

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="60" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>

  <Image Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Width="60" Height="60" />

  <StackPanel Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Orientation="Horizontal">
    <TextBlock Text="Title should be long" HorizontalAlignment="Left" />
    <Ellipse Fill="White" Stroke="White" Width="7" Height="7" />
  </StackPanel>

  <TextBlock Grid.Row="1" Grid.Column="1" Text="Message" /> 
  <TextBlock Grid.Row="1" Grid.Column="2" Text="Info" />
</Grid>

I have an issue in the StackPanel which hosts a Title and Ellipse, the goal is the Online marker by the ellipse whitch should be placed at the end off the title. But it shouldn’t out of a view part.

I have tried to put TextBox and Ellipse into cells of the Grid unfortunatly it doesn’t help.

<Grid Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2">
  <Grid.ColumnsDefinitions>
     <ColumnDefinition Width="Auto" />
     <ColumnDefinition Width="*" />
  </Grid.ColumnsDefinitions>

  <TextBlock Grid.Column="0" Text="Title should be long" HorizontalAlignment="Left" />
  <Ellipse Grid.Column="1" Fill="White" Stroke="White" Width="7" Height="7" />

</Grid>

In my mind it should render correct, but the ellipse is out of view port again.

This is a Expression Blend layout scrinshots, the same layout is rendering in runtime.

The Grid bounds:

The TextBox bounds:

The Ellipse bounds:

So the TextBox and Ellipse is out of the grid 🙁

Update: I need the next behaviour of layout

1) Short title, the ellipse attached to the title end

2) Long title, the ellipse attached to the right side of container

Answer 1

I tried your code and it renders fine (in other terms it renders in the viewport. See red arrow). Please find attached a screenshot of the results. (I added the showgridlines just to illustrates the rows and cols)

//— Changed testing and fixed code for intended effect —//

Code changes in XAML: Swapped the width values for the columndefinitions. Added Textwrapping to textblock in order to see entire text. (You could opt for texttrimming instead depending on your aesthetics.)

<Grid Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Column="0" Text="Title should be really really really really really long" HorizontalAlignment="Left" TextWrapping="Wrap" />
    <Ellipse Grid.Column="1" Fill="White" Stroke="White" Width="7" Height="7"/>
</Grid>

Outcome: