Pradeep AJ- Msft MVP
Pradeep AJ- Msft MVP

Reputation: 600

How to wrap ListPicker SelectedItem in windows phone 8

I am using ListPicker from windows phone toolkit. My options are pretty lengthy so my ItemTemplate is,

<DataTemplate>
<TextBlock TextWrapping="Wrap"/>
</DataTemplate> 

Now, when I select a lengthy option(say three lines) in Expansion Mode (less then 5 options) it is working good as expected, but when I Use FullMode(more than 5 items) it is not wrapped in the ListPicker.

To be more clear, It is wrapped as expected in the FullModePage but it is not within the control.

 <toolkit:ListPicker  Margin="0"   MinHeight="70"  toolkit:TiltEffect.SuppressTilt="True"  Template="{StaticResource ListPickerControlCustomTemplate}"   HorizontalAlignment="Stretch" VerticalAlignment="Top" FontFamily="{StaticResource RegularFont}" 
    SelectionChanged="SharedAppsCategoryListPicker_OnSelectionChanged" Name="SharedAppsCategoryListPicker"
                        LayoutUpdated="SharedAppsCategoryListPicker_OnLayoutUpdated" >

            <toolkit:ListPicker.ItemTemplate>
            <DataTemplate>

                <Grid Margin="0,0,20,0">
                    <TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="20,15,120,15" FontSize="20" Text="{Binding groupname}" Foreground="{StaticResource ListPickerForegroundColor}"></TextBlock>
                    <Rectangle Margin="20,10,0,-11"   Height="0.5"   HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Stroke="{StaticResource ListPickerDividerColor}"  StrokeThickness="0.5" />
                </Grid>
            </DataTemplate>
        </toolkit:ListPicker.ItemTemplate>

        <toolkit:ListPicker.FullModeItemTemplate>
            <DataTemplate>
                    <Grid Margin="0,0,20,0">
                        <TextBlock MaxWidth="250" Width="250" TextWrapping="Wrap" FontSize="20" Margin="0,0,120,0"  VerticalAlignment="Center" Text="{Binding groupname}" Foreground="{StaticResource ListPickerForegroundColor}" FontFamily="{StaticResource RegularFont}"></TextBlock>                           
                    </Grid>
                </DataTemplate>
        </toolkit:ListPicker.FullModeItemTemplate>

    </toolkit:ListPicker>

Upvotes: 0

Views: 545

Answers (1)

Amit Bhatiya
Amit Bhatiya

Reputation: 2621

you would be needed to give width for the Textblock after then Text Would be Wrapped if content is larger than the width of the Textblock.

try this :

<DataTemplate>
<TextBlock TextWrapping="Wrap" width=200/>
</DataTemplate> 

Edit:

I have Implemeted it this way

XAML:

<toolkit:ListPicker  Margin="0"   MinHeight="70"  toolkit:TiltEffect.SuppressTilt="True"  HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="SharedAppsCategoryListPicker" >
                    <toolkit:ListPicker.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="0,0,20,0">
                                <TextBlock Width="300" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="20,15,120,15" FontSize="20" Text="{Binding}" ></TextBlock>
                            </Grid>
                        </DataTemplate>
                    </toolkit:ListPicker.ItemTemplate>

                    <toolkit:ListPicker.FullModeItemTemplate>
                        <DataTemplate>
                            <Grid Margin="0,0,20,0">
                                <TextBlock Width="400" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0"  VerticalAlignment="Center" Text="{Binding}" ></TextBlock>
                            </Grid>
                        </DataTemplate>
                    </toolkit:ListPicker.FullModeItemTemplate>
                </toolkit:ListPicker>

Images of O/P:

Normal Full mode

Upvotes: 2

Related Questions