c# - Windows Phone xaml 标记

Question

此示例是否有 XAML 解决方案？我对显示全名和小点的部分感兴趣。特别是，如果 fullname 有足够的空间（第一项），我不能在 fullname 后面加上小点。

现在，我有了这个，但这不合适，因为点总是在右边：

    <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

您可以尝试以下方法：将 TextBlock MaxWidth 绑定到 Grid 的 Widtd 减去点的宽度（例如 10 像素）。有两种变体：使用转换器或元素绑定。以下是使用元素绑定的方法：

首先，我们需要创建具有所需宽度的元素：

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

然后将 TextBlock 的 MaxWidth 绑定到边框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>  

您也可以使用转换器将 TextBlock MaxWidth 直接绑定到网格 ActualWidth 并减去点的宽度。

Offtop：我以为VK比赛已经结束了？:)

Answer 2

通过编写自定义面板解决了这个问题：

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);
    }
}

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