listview WP8.1 UAP 的椭圆填充问题答案

【问题标题】：Ellipse fill issues with listview WP8.1 UAPlistview WP8.1 UAP 的椭圆填充问题
【发布时间】：2015-07-14 18:11:51
【问题描述】：

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

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

【问题讨论】：

标签： c# xaml windows-phone-8.1

【解决方案1】：

您的包含堆栈面板固定在 Height="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>

【讨论】：