Windows手机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 - 您拥有的网格就足够了。

另外，为了让项目伸展，在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 =＆＃34; *＆＃34;