locked
How to display the title of a grid list view item always in the bottom?

    Question

  • Hello, Dear all,

     

    I've attached a screen shot for the VS2013 and the office 2010 from the start screen:

     

    Example

     

    From it we could see that:

    1. if the title is only one line, it will be displayed at the bottom (Here it is "Visual Studio 2013");

    2. if the title is more than one line, it will be displayed with two lines, and the first line will be moved up (Here the "Microsoft Outlook" is at the first line, and "2010" is at the second line).

     

    But in my test codes, "Visual Studio 2013" will be in the same line with "Microsoft Outlook" instead of the line of "2010", namely, it will be in the upper line instead of the bottom. How to do like the above effect? Thanks.

     

    As for the example, we could create a VC++ grid app with VS2013, and change the title field to a longer one in the file SampleData.json.


    • Edited by B0L Monday, February 24, 2014 11:22 PM
    Monday, February 24, 2014 11:10 PM

Answers

  • You can control the layout in your ItemTemplate however you'd like.

    To align your TextBlock to the bottom of its Row set its VerticalAlignmentProperty to "Bottom" and don't hardcode its height:

                    <DataTemplate>
                        <Grid HorizontalAlignment="Left" Width="250" Height="250">
                            <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
                                <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                            </Border>
                            <TextBlock Text="{Binding Title}"   Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}"  Margin="15,0,15,15" VerticalAlignment="Bottom"/>
                        </Grid>
                    </DataTemplate>
    

    --Rob

    • Marked as answer by B0L Tuesday, February 25, 2014 1:57 AM
    Monday, February 24, 2014 11:34 PM
    Owner

All replies

  • You can control the layout in your ItemTemplate however you'd like.

    To align your TextBlock to the bottom of its Row set its VerticalAlignmentProperty to "Bottom" and don't hardcode its height:

                    <DataTemplate>
                        <Grid HorizontalAlignment="Left" Width="250" Height="250">
                            <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
                                <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                            </Border>
                            <TextBlock Text="{Binding Title}"   Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}"  Margin="15,0,15,15" VerticalAlignment="Bottom"/>
                        </Grid>
                    </DataTemplate>
    

    --Rob

    • Marked as answer by B0L Tuesday, February 25, 2014 1:57 AM
    Monday, February 24, 2014 11:34 PM
    Owner
  • Rob, thanks. It works! And if I want to display 2 lines, I could set the MaxLines="2" to the TextBlock.
    Tuesday, February 25, 2014 1:59 AM