Windows Phone 8.1 (XAML). Strange text cutting bug inside ListView (with some conditions)

Question

The following XAML page markup

<Page
    x:Class="XXXX.TestPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Pivot Title="Title0">
            <PivotItem Header="Header0">
                <ListView SelectionMode="Multiple">
                    <ListViewItem>
                        <TextBlock 
                            Text="0123456 0123456 0123456 01234 0123456" 
                            TextWrapping="WrapWholeWords"
                            FontSize="24"/>
                    </ListViewItem>
                </ListView>
            </PivotItem>
        </Pivot>
    </Grid>
</Page>

causes the strange text cutting bug (two digits are cut off, red arrow is mine):

Tested under Windows Phone 8.1 Emulator (WVGA, 512MB, 4 inch, 480x800).

Required conditions: ListView with SelectionMode="Multiple" and Pivot control. This means that if I change SelectionMode to other value, or remove ListView and place TextBox right inside PivotItem, or remove Pivot and place ListView right inside Grid - the bug disappears.

Can anyone explain the reason of the bug and how to fix it?

Decade Moon Decade Moon · Accepted Answer · 2014-10-29T13:31:59

This is expected behavior.

Consider, instead, the following XAML:

<Page.BottomAppBar>
    <CommandBar>
        <AppBarToggleButton Icon="Favorite" Checked="AppBarToggleButton_Checked" Unchecked="AppBarToggleButton_Unchecked" />
    </CommandBar>
</Page.BottomAppBar>

<Grid>
    <Pivot Title="Title0">
        <PivotItem Header="Header0">
            <ListView x:Name="MyListView" Background="Blue">
                <ListViewItem>
                    <TextBlock 
                        Text="0123456 0123456 0123456 01234 0123456" 
                        TextWrapping="WrapWholeWords"
                        FontSize="24" />
                </ListViewItem>
                <ListViewItem>
                    <TextBlock 
                        Text="0123456 0123456 0123456 01234 0123456" 
                        TextWrapping="WrapWholeWords"
                        FontSize="24" />
                </ListViewItem>
                <ListViewItem>
                    <TextBlock 
                        Text="0123456 0123456 0123456 01234 0123456" 
                        TextWrapping="WrapWholeWords"
                        FontSize="24" />
                </ListViewItem>
            </ListView>
        </PivotItem>
    </Pivot>
</Grid>

with corresponding code-behind:

private void AppBarToggleButton_Checked(object sender, RoutedEventArgs e)
{
    MyListView.SelectionMode = ListViewSelectionMode.Multiple;
}

private void AppBarToggleButton_Unchecked(object sender, RoutedEventArgs e)
{
    MyListView.SelectionMode = ListViewSelectionMode.None;
}

Screenshot

Toggling the selection checkboxes doesn't cause the list box content widths to be recalculated.

Windows Phone 8.1 (XAML). Strange text cutting bug inside ListView (with some conditions)

1 Answers