Windows phone 8.1 要填充的文本块宽度

Question

我想创建如下图第一部分所示的布局。但是附上代码后，我只能得到如所附图像底部所示的布局输出。

    <ListView Grid.Row="1"
              ItemsSource="{Binding Items}"
              Margin="0,20,0,0">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="40" />
                        </Grid.ColumnDefinitions>

                        <TextBlock TextWrapping="NoWrap"
                                   TextTrimming="WordEllipsis"
                                   Grid.Column="0"
                                   Text="{Binding Name}"
                                   Style="{ThemeResource ListViewItemTextBlockStyle}" />

                        <Image Grid.Column="1"
                               Source="image.png"/>

                    </Grid>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Answer 1

您不需要 DataTemplate 中的 StackPanel - 您拥有的 Grid 就足够了。

此外，为了让项目伸展，在您的 ListView 中定义一个简单的 ListView.ItemContainerStyle：

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
</ListView.ItemContainerStyle>

因此，完整代码：

<ListView Grid.Row="1"
          ItemsSource="{Binding Items}"
          Margin="0,20,0,0">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="40" />
                </Grid.ColumnDefinitions>

                <TextBlock TextWrapping="NoWrap"
                           TextTrimming="WordEllipsis"
                           Grid.Column="0"
                           Text="{Binding Name}"
                           Style="{ThemeResource ListViewItemTextBlockStyle}" />

                <Image Grid.Column="1"
                       Source="image.png"/>

            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

Answer 2

试一试

<ColumnDefinition Width="100" />

而不是 Width="*"

Windows phone 8.1 要填充的文本块宽度

Windows phone 8.1 Textblock width to Fill

xaml

textblock

windows-phone

windows-phone-8.1