listview WP8.1 UAP

Question

我希望列表中项目的位置显示在描述的左侧，但由于某种原因，它使我的字体混乱并将其放置在图像中所示的中心。我只是想模仿我在地图上的相同图像，因此它与listview poistion相对应。

<DataTemplate x:Key="ImageTextListInboxTemplate">
        <StackPanel Orientation="Horizontal" Width="470" Height="85">
            <Border Height="40" Width="40" Margin="10,10,0,10" VerticalAlignment="Top">
                <Image Source="/SampleImage.png" Stretch="UniformToFill"/>
            </Border>
            <StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="0,10,0,0">

                <Grid Width="40" Height="40">
                    <Ellipse Fill="Blue"  StrokeThickness="3"/>
                    <TextBlock  Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding _position}"/>
                </Grid>
                <TextBlock Text="" FontSize="20" FontWeight="Semilight" 
                       Margin="10,0,0,0" Width="320" Height="26" TextTrimming="WordEllipsis" 
                       HorizontalAlignment="Left" VerticalAlignment="Top"/>

                    <TextBlock Text="{Binding _Name}" FontSize="20" FontWeight="Semilight" 
                       Margin="10,0,0,0" Width="320" Height="26" TextTrimming="WordEllipsis" 
                       HorizontalAlignment="Left" VerticalAlignment="Top"/>
                    <TextBlock Text="{Binding _Postcode}" 
                       Margin="10,2,0,0" Width="320" TextTrimming="WordEllipsis" TextWrapping="Wrap" 
                       HorizontalAlignment="Left"/>
                <TextBlock Text="Sed varius rhoncus metus, et condimentum" 
                       Margin="10,2,0,0" Width="320" TextTrimming="WordEllipsis" TextWrapping="Wrap" 
                       HorizontalAlignment="Left"/>
            </StackPanel>
            <TextBlock Text="00:00 AM" FontSize="9" Margin="20,0,0,0" VerticalAlignment="Center"/>
        </StackPanel>
  </DataTemplate>

使用Circle如上所述

只需删除以下代码即可获得圆圈

<Grid Width="40" Height="40">
                <Ellipse Fill="Blue"  StrokeThickness="3"/>
                <TextBlock  Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding _position}"/>
            </Grid>

Answer 1

您的包含堆栈面板固定在高度=“85”。因为它是一个垂直堆栈面板，所以它会垂直向控件添加项目，所以你要指定：

• 具有10个上边距的StackPanel;
• 高度为40的网格;
• 高度为26的空TextBlock;

为_Name TextBlock留下9个像素，因此剪切了TextBlock及其下面的所有内容。

您可以通过多种方式将椭圆网格放在其中一个文本框的左侧，我可能会考虑在文本块周围包围一个网格，让它显示在左侧，如下所示：

            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid Width="40" Height="40" HorizontalAlignment="Left">
                    <Ellipse Fill="Blue"  StrokeThickness="3"/>
                    <TextBlock  Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding _position}"/>
                </Grid>
                <TextBlock Grid.Column="1" Text="Sed varius rhoncus metus, et condimentum" 
                   Margin="10,2,0,0" Width="320" TextTrimming="WordEllipsis" TextWrapping="Wrap" 
                   HorizontalAlignment="Left"/>
            </Grid>