Windows Phone XAML标记

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

You can try following approach: bind TextBlock MaxWidth to Widtd of the Grid minus width of the dot(for example 10 pixels). There are two variants: use converter or element binding. Here is how to do this using element binding:

First we need to create element with desired width:

<Grid Grid.Row="0" Grid.Column="1"> 
    <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*"/> 
        <ColumnDefinition Width="10"/> 
    </Grid.ColumnDefinitions> 
    <Border x:Name="TextMaxWidth"/> <!-- this ActualWidth will be equals Grid.Width - 10 -->
</Grid> 

then bind MaxWidth of the TextBlock to the border ActualWidth

<Grid Grid.Row="0" Grid.Column="1">  
    <Grid.ColumnDefinitions>  
    <!-- note that columns widths are changed; also you can use stack panel instead of grid -->
        <ColumnDefinition Width="Auto"/>  
        <ColumnDefinition Width="*"/>  
    </Grid.ColumnDefinitions>  
    <TextBlock Text="{Binding Path=Title}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  
        <!-- this will restrict texblock from growing more than Grid.Width - 10 -->
        MaxWidth="{Binding ActualWidth,ElementName=TextMaxWidth}"
        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>  

Also you can bind TextBlock MaxWidth directly to the grid ActualWidth using converter with subtracts width of the dot.

Offtop: i thought that VK contest already over?:)

Answer 2

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>