垂直对齐不起作用-Windows Phone 8.1

Question

下面是我的Windows Phone 8.1的XAML部分。

<Grid Background="#FAE8C9"> 
     <ListView x:Name="articleListing"> 
      <ListView.ItemTemplate> 
       <DataTemplate> 
        <Grid Margin="5,5,5,5"> 
         <StackPanel Background="#FFFEDC" RequestedTheme="Light" Tapped="RedirectToArticle" Tag="{Binding URL}" > 
          <StackPanel Orientation="Horizontal" > 

           <StackPanel Margin="10 0 0 0" Width="{Binding Width}"> 
            <StackPanel VerticalAlignment="Top"> 
            <TextBlock TextWrapping="Wrap" Text="{Binding HeadLine}" FontSize="22"/> 
            </StackPanel> 

            <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom"> 
             <Image Source="/Images/cal.png" Width="20" /> 
             <TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" /> 
             <Image Source="/Images/clock.png" Width="20"/> 
             <TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" /> 
            </StackPanel> 
           </StackPanel> 

           <StackPanel Background="Transparent" Width="{Binding Width}" > 
            <Image Source="{Binding ImageURL}" /> 
           </StackPanel> 

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

在这里，我试图让下面的部分垂直对齐到底部。但它不起作用。

<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom"> 
             <Image Source="/Images/cal.png" Width="20" /> 
             <TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" /> 
             <Image Source="/Images/clock.png" Width="20"/> 
             <TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" /> 
            </StackPanel> 
           </StackPanel> 

请帮我解决这个问题。谢谢

Answer 1

使用此代码。

<Grid Background="#FAE8C9"> 
      <ListView x:Name="articleListing"> 
       <ListView.ItemTemplate> 
        <DataTemplate> 
         <Grid Margin="5,5,5,5"> 
          <StackPanel Background="#FFFEDC" RequestedTheme="Light" Tapped="RedirectToArticle" Tag="{Binding URL}" > 
           <StackPanel Orientation="Horizontal" > 
            <Grid Margin="10 0 0 0" Width="{Binding Width}"> 
             <StackPanel VerticalAlignment="Top"> 
              <TextBlock TextWrapping="Wrap" Text="{Binding HeadLine}" FontSize="22"/> 
             </StackPanel> 
             <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom"> 
              <Image Source="/Images/cal.png" Width="20" /> 
              <TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" /> 
              <Image Source="/Images/clock.png" Width="20"/> 
              <TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" /> 
             </StackPanel> 
            </Grid> 

            <StackPanel Background="Transparent" Width="{Binding Width}" > 
             <Image Source="{Binding ImageURL}" /> 
            </StackPanel> 

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

这可能适合你。

Answer 2

大多数XAML容器如列表视图和堆栈面板都是从上到下填充的，它们的高度等于其内容高度的总和。

如果你已经得到了你想要出现在您有以下选择容器的底部东西：

1. 使用所需尺寸的画布上，并明确把每个元素在画布上。这会让你失去XAML的一大优势 - 即它会对可用空间的变化作出反应，并为您重新定位元素。
2. 在您的布局中插入一些填充以强制元素位于您想要的位置。同样，你可能会失去改变视图大小的能力等

您可能会发现使用Grid，而不是一个StackPanel让您放置多一点控制 - 但通常也是该行高和列宽由管辖包含在其中的元件的尺寸。