WPF: set ListViewItem from text block to Listview in DataTemplate

Question

I have a Windows Phone 8.1 project with a ListView that supplies its itemssource filled with C # code. It works, but I end up with empty space between the text blocks of one line. I tried to set the height on the text block, the grid in which it is located, the list itself. I tried setting the ItemContainerStyle with the height tied to the height of the text block, but it does not work.
If I set the TextBlock text to the actual height binding, I get 0, so I have to do something wrong. I'm sure this has something to do with the height of ListViewItems, but since they are populated from code, I can't figure out how to get them to do what I want. I also tried switching to the ItemsControl element for a list, but it does not seem to scroll and does not work. Here is the XAML Listview:

<ListView x:Name="TheList" IsHoldingEnabled="True" ItemsSource="{Binding items}" Loaded="WhenListViewBaseLoaded" ContinuumNavigationTransitionInfo.ExitElementContainer="True" IsItemClickEnabled="True"> <ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="Height" Value="{Binding ElementName=txtBibleText, Path=ActualHeight}"/> </Style> </ListView.ItemContainerStyle> <ListView.ItemTemplate> <DataTemplate> <Grid x:Name="ItemTemplateGrid" Holding="ListViewItem_Holding" Background="Blue"> <FlyoutBase.AttachedFlyout> <MenuFlyout> <MenuFlyoutItem Text="Share" Click="ShareFlyoutItem_Click" /> <MenuFlyoutItem Text="Add to Sharing" Click="AddSharingFlyoutItem_Click" /> </MenuFlyout> </FlyoutBase.AttachedFlyout> <Grid x:Name="gridText"> <TextBlock x:Name="txtBibleText" FontSize="{Binding TheFontSize}" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" TextWrapping="Wrap" Margin="0,0,0,0" FontFamily="Global User Interface"> <Run Text="{Binding VerseNumber}"/> <Run Text="{Binding BibleText}"/> </TextBlock> </Grid> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView> 

Code that populates a ListView:

 XDocument loadedData = XDocument.Load(TranlationFilePath); var data = from query in loadedData.Descendants("testament").Descendants("book").Descendants("chapter").Descendants("verse") where (string)query.Parent.Parent.Parent.Attribute("name") == GetTestament where (string)query.Parent.Parent.Attribute("name") == GetBibleBook where (string)query.Parent.Attribute("number") == GetChapter select new BibleLoad { VerseNumber = (string)query.Attribute("number"), BibleText = (string)query.Value.ToString(), TheFontSize = FontSize }; TheList.ItemsSource = data; 

Thank you for your time. This is my first question, so I hope everything is correct. I searched and searched and experimented for quite some time.

After editing XML and shortening the record.

With disabling text wrapping.

With the completion of the packaging, the height is set to 20, and the minimum - 31.

MinHeight to 20 wrapping on:

Answer 1

The extra space comes from the ListViewItem template for ItemContainerStyle. The default template includes space not only for ItemTemplate, but also for decorations, such as flags used to mark selections. Notice the height of the CheckboxContainers 25.5 rectangle and the height of the SelectedCheckMark 34.

 <Grid x:Name="CheckboxContainer"> <Grid.RenderTransform> <TranslateTransform x:Name="CheckboxContainerTranslateTransform" X="{ThemeResource ListViewItemContentOffsetX}"/> </Grid.RenderTransform> <Rectangle x:Name="NormalRectangle" Fill="{ThemeResource CheckBoxBackgroundThemeBrush}" Height="25.5" Stroke="{ThemeResource CheckBoxBorderThemeBrush}" StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}" Width="25.5"/> <Path x:Name="CheckGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource CheckBoxForegroundThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Center" Height="17" IsHitTestVisible="False" Opacity="0" Stretch="Fill" StrokeThickness="2.5" StrokeLineJoin="Round" VerticalAlignment="Center" Width="18.5"/> </Grid> 

and

 <Border x:Name="SelectedBorder" BorderBrush="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" BorderThickness="{ThemeResource GridViewItemMultiselectBorderThickness}" IsHitTestVisible="False" Opacity="0"> <Grid x:Name="SelectedCheckMark" HorizontalAlignment="Right" Height="34" Opacity="0" VerticalAlignment="Top" Width="34"> <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/> <Path x:Name="SelectedGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource ListViewItemCheckThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="14.5" Margin="0,1,1,0" Stretch="Fill" VerticalAlignment="Top" Width="17"/> </Grid> </Border> 

If you do not need selection behavior, you can deprive the ItemContainerStyle of only the parts that you need so that there is no room for decorations that are not relevant to your application. If you need a choice, you can move or resize the selection checks to fit your design.

You can create a default ItemContainerStyle item template by selecting your ListView in the designer, right-clicking and selecting Edit Additional Templates.Edit Created item container (ItemContainerStyle). Edit copy ...

Then you can edit the height of the jewelry as needed.

Answer 2

Why are you trying to set a minimum height or height? try giving the font size and it will adjust the height and keep textwrapping = wrap ... and one more thing, why do you set grid.colum = 1? You have only 1 column.