Question

Is there XAML solution for this sample? I’m interested in part where fullname and little dot are shown. Particularly, I can’t make little dot to be right after fullname if fullname has enough space (first item).

Now, I have this, but it’s not appropriate because the dot is always on the right:

    <Grid Grid.Row="0" Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding Path=Title}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
            Margin="0,-16,0,0"
            Style="{StaticResource PhoneTextExtraLargeStyle}" />
        <TextBlock Grid.Column="1" HorizontalAlignment="Right"
            Text="{Binding Path=IsOnline, Converter={StaticResource StatusFormatter}}" Opacity="0.6"
            Style="{StaticResource PhoneTextLargeStyle}"/>
    </Grid>

Answer 1

Solved this question by writing Custom Panel:

public class MyStackPanel : Panel
{
    protected override Size MeasureOverride(Size availableSize)
    {
        Size newSize = new Size();
        UIElement firstChild = Children[0];
        UIElement secondChild = Children[1];
        secondChild.Measure(availableSize);
        firstChild.Measure(new Size(availableSize.Width - secondChild.DesiredSize.Width, availableSize.Height));
        newSize.Width = firstChild.DesiredSize.Width + secondChild.DesiredSize.Width;
        newSize.Height = firstChild.DesiredSize.Height;
        return newSize;
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        UIElement firstChild = Children[0];
        UIElement secondChild = Children[1];
        firstChild.Arrange(new Rect(0, 0, firstChild.DesiredSize.Width, firstChild.DesiredSize.Height));
        secondChild.Arrange(new Rect(firstChild.DesiredSize.Width, 0, secondChild.DesiredSize.Width,
                                     firstChild.DesiredSize.Height));
        return base.ArrangeOverride(finalSize);
    }
}

And XAML:

<local:MyStackPanel Grid.Column="1">
    <TextBlock Text="{Binding Path=Title}"
               Style="{StaticResource PhoneTextExtraLargeStyle}" />
    <TextBlock Text="{Binding Path=IsOnline, Converter={StaticResource StatusFormatter}}"
               Opacity="0.6"
               Style="{StaticResource PhoneTextLargeStyle}"/>
</local:MyStackPanel>