Windows Phone xaml markup

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>

Sample

To avoid downvotes, post [what you have tried](http://whathaveyoutried.com) so far. — Adam, Sep 20 '12 at 19:30
If you add a spacer ColumnDefinition, it should work. I can't test it so I won't post it as an answer, but the syntax would be : , and make your text in Column 0 and your 'dot' in Column 2 — William Melani, Sep 20 '12 at 19:53
Do you want the dot to always appear? if so, where do you want the dot? — Shawn Kendrot, Sep 20 '12 at 20:15
The dot is for _online status_. The dot must be right after the fullname if it has enoght space to fit screen (john Doe), but if the fullname is too long, the dot must be right aligned (Benjamin Washington) — Buddy, Sep 21 '12 at 05:28

score 1 · Answer 1 · answered Sep 21 '12 at 03:25

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?:)

Why border disappeared from your second code-sample and columns definitions are different? — Buddy, Sep 21 '12 at 06:13
@Buddy second code-sample is a continuation for first code, you should use it all together — Alexander, Sep 21 '12 at 08:47
in second part you can replace grid with StackPanel `Orientation="Horizontal"` — Alexander, Sep 21 '12 at 08:49

score 0 · Accepted Answer · answered Sep 21 '12 at 13:11

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>

Windows Phone xaml markup

2 Answers2