CODEWITHSUNDEEP
xamluwpuwp-xaml
Hemil
Hemil

Reputation: 1016

How to wrap text in grid view

I am making a library management software.

I have the following xaml:

<GridView ItemsSource="{x:Bind Path=ViewModel.Books, Mode=OneWay}">
        <GridView.ItemTemplate>
            <DataTemplate x:DataType="data:Book">

                <StackPanel Margin="5" HorizontalAlignment="Center">

                    <Image Width="200" Height="200" Source="{x:Bind Path=CoverImageLocation, Mode=OneWay}" /> 

                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                        <StackPanel>
                            <TextBlock FontSize="16" Text="{x:Bind Path=Title, Mode=OneWay}" 
                                       TextWrapping="WrapWholeWords"/>
                            <TextBlock FontSize="10" Text="{x:Bind Path=Author, Mode=OneWay}" 
                                       Margin="0, 3, 0, 0" TextWrapping="WrapWholeWords"/>
                        </StackPanel>

                        <TextBlock FontSize="20" Text="{x:Bind Path=Quantity, Mode=OneWay}"
                                   VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
                    </StackPanel>
                </StackPanel>

            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

The text in the text block is acquired from a database. Implementation details are not required I feel. The text blocks represent the title, author and quantity of the book respectively.

I have a book named: 'The subtle art of not giving a f*ck'. As you might have noticed, TextWrapping is set to WrapWholeWords. But this is the screenshot of the app: screenshot

There are two things to note:

  1. The text is not wrapped
  2. Quantity is missing

How do I specify that the text block be wrapped? Or if that is not possible at least show ellipses at the end of long texts so that Quantity is not compromised?

Upvotes: 0

Views: 275

Answers (1)

Muhammad Touseef
Muhammad Touseef

Reputation: 4455

  1. Use Grid Instead of StackPanel to get proper text trimming with TextTrimming property.

    <DataTemplate x:DataType="data:Book">
    <StackPanel Margin="5" HorizontalAlignment="Center">
        <Image Width="200" Height="200" Source="{x:Bind Path=CoverImageLocation, Mode=OneWay}" /> 
        <Grid HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <StackPanel>
                <TextBlock FontSize="16" Text="{x:Bind Path=Title, Mode=OneWay}" 
                          TextTrimming="CharacterEllipsis"/>
                <TextBlock FontSize="10" Text="{x:Bind Path=Author, Mode=OneWay}" 
                           Margin="0, 3, 0, 0" TextWrapping="WrapWholeWords"/>
            </StackPanel>
            <TextBlock FontSize="20" Text="{x:Bind Path=Quantity, Mode=OneWay}"
                       Grid.Column="1" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
        </Grid>
    </StackPanel>
</DataTemplate>

Upvotes: 1

Related Questions