Below is my XAML part of windows Phone 8.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" > <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> In this, I have tried to make the below part as vertical alignment to the bottom. But it doesn't work.
<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> Please help me to solve this issue. Thank you
2 Answers
Answers 1
Use This code.
<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> This might be work for you.
Answers 2
Most XAML containers like list views and stack panels fill from top to bottom and their height is equal to the sum of the heights of their contents.
If you've got something you want to appear at the bottom of the container you have the following choices:
- Use a canvas of the desired dimensions and explicitly place each element on the canvas. This loses you a big benefit of XAML - namely that it reacts to changes in the available space and repositions elements for you.
- Insert some padding into your layout to force elements to be in the place you want them to be. Again you might lose the ability to change view size etc.
You might find using a Grid rather than a StackPanel gives you a bit more control over placement - but again usually the row heights and column widths are governed by the sizes of the elements contained therein.
0 comments:
Post a Comment