0

このサンプルの 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>

サンプル

4

2 に答える 2

1

次のアプローチを試すことができます: TextBlock MaxWidth をグリッドの Widtd からドットの幅を引いた値 (たとえば 10 ピクセル) にバインドします。2 つのバリアントがあります。コンバーターまたは要素バインディングを使用します。要素バインディングを使用してこれを行う方法は次のとおりです。

まず、目的の幅の要素を作成する必要があります。

<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 コンテストはもう終わったと思っていたのですが?:)

于 2012-09-21T03:25:37.087 に答える
0

カスタムパネルを書くことでこの質問を解決しました：

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>
于 2012-09-21T13:11:22.863 に答える