WPF:从DataTemplate中的Listview中的textblock设置ListViewItem

时间:2014-08-24 01:59:49

标签: c# xaml listview windows-phone-8.1 datatemplate

我有一个带有ListView的Windows Phone 8.1项目,其后面的c#代码填充了它的itemssource。它工作,但我最终在单行文本块之间有空格。我已经尝试在文本块上设置高度,它位于列表视图中。我尝试设置一个ItemContainerStyle,将高度绑定到文本块的高度,但它不起作用。
如果我将TextBlock的文本设置为Actual Height绑定,我得到0,所以我一定做错了。我很确定它与ListViewItems的高度有关,但由于它们是从代码中填充的,我无法弄清楚如何让它们按照我的意愿行事。我也尝试切换到列表的ItemsControl,但它似乎也不会滚动和工作。 这是Listview的XAML:

<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>

后面的代码填充了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;

感谢您的时间。这是我第一次发帖提问,希望我做得对。我已经搜索,搜索和实验了很长一段时间。

enter image description here

编辑XML并缩短记录。 With verse 8 edited

关闭文字包装。

enter image description here

重新打开时,高度设置为20,最小高度设置为31。 enter image description here

MinHeight to 20 wrap on:

enter image description here

2 个答案:

答案 0 :(得分:1)

额外空间来自ItemContainerStyle的ListViewItem模板。默认模板不仅包括ItemTemplate的空间,还包括用于标记选择的复选框等装饰。请注意CheckboxContainers的Rectangle的高度为25.5,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>

<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>

如果您不需要选择行为,则可以将ItemContainerStyle剥离为您需要的部分,这样就不必为与您的应用无关的装饰腾出空间。如果您确实需要选择,您可以移动或调整选择检查的大小,以便它们符合您的设计。

您可以通过在设计器中选择ListView来生成默认的ItemContainerStyle模板,右键单击并选择Edit Additional Templates.Edit Generated Item Container(ItemContainerStyle)编辑副本... enter image description here

然后,您可以根据需要编辑装饰高度。

答案 1 :(得分:0)

你为什么要设置最小高度或高度?尝试给出一个字体大小,它会调整高度本身保持textwrapping = wrap ...另外一件事你为什么设置grid.colum = 1? ..你只有一列。