c# - Elipse fill issues with listview WP8.1 UAP -

i wanting position of item in list appear left of description reason making font messed , placing in center shown in image. wanting mimic same image have on map coresponds 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> 

with circle above

without circle removing following code

<grid width="40" height="40">                 <ellipse fill="blue"  strokethickness="3"/>                 <textblock  foreground="white" verticalalignment="center" horizontalalignment="center" text="{binding _position}"/>             </grid> 

your containing stack panel fixed @ height="85". because it's vertical stack panel add items control vertically, you're specifying:

• a stackpanel 10 top margin;
• a grid of height 40;
• an empty textblock of height 26;

leaving 9 pixels _name textblock, hence clipping of textblock , under you're seeing there.

there's number of ways ellipse grid left of 1 of text boxes, consider wrapping grid around textblock want displayed left of this:

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