当Container调整其高度

时间:2017-08-16 12:04:39

标签: c# wpf xaml

以下ListView将通过减少 FontSize 来调整其项目的大小,使用TextBlock DataTemplate 进行渲染。初始FontSize在Style中指定,应该是最大值(23pt)。

如果项目文本变长,则最多包裹2行。

当窗口调整其高度的大小或控件的空间小于显示项目所需的空间时,FontSize将被缩小,直到所有项目都可以显示。以前包装的文本应该是#34; unwrapped"如果可能的话

<ListView x:Name="myListView" Grid.Row="0" Grid.Column="0"
                  Background="White" BorderBrush="Black" BorderThickness="1"
                  IsHitTestVisible="False"
                  ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                  ScrollViewer.VerticalScrollBarVisibility="Disabled">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextBlock MaxHeight="80"
                               Margin="0,0,0,21"
                               Text="{Binding}"
                               TextTrimming="CharacterEllipsis"
                               TextWrapping="Wrap">
                        <TextBlock.Style>
                            <Style TargetType="{x:Type TextBlock}">
                                <Setter Property="FontSize" Value="23pt" />
                                <Setter Property="TextTrimming" Value="CharacterEllipsis" />
                                <Setter Property="FontFamily" Value="Arial Regular" />
                                <Setter Property="VerticalAlignment" Value="Center" />
                                <Setter Property="HorizontalAlignment" Value="Left" />
                            </Style>
                        </TextBlock.Style>
                    </TextBlock>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.ItemContainerStyle>
                ...
            </ListView.ItemContainerStyle>
        </ListView>

Example Picture showing what i want enter image description here

我已经尝试通过在ListView周围使用ViewBox来实现这一要求,但这也会调整高度和宽度(比率)==&gt;但是文本的可用宽度应该是不变的。

另一种方法是覆盖ListView的MeasureOverride以减少FontSize,如果需要listView的大小&gt;控件的可用大小。但这也没有用。

也许一些聪明的家伙可以帮我解决这个问题。

最诚挚的问候,

编辑17.08.2017

我错过了一些必要的信息。 ListView位于row = 0,column = 0的网格内:

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="250" />
        <ColumnDefinition Width="300" />
    </Grid.ColumnDefinitions>

GridCell 0,0只能在高度中调整大小。 ListView将采用整个Cellsize并调整其子项的FontSize以适应(使用max FontSize可用)。 将文本包装到最多2条文本行也很重要。

1 个答案:

答案 0 :(得分:0)

您可能需要执行以下操作:将FontSize绑定到ListView的宽度,然后使用自定义IValueConverter将宽度更改为FontSize允许文本适合一行。

不幸的是,没有内置功能可以做你想要的。

我现在为你找到了一个有效的解决方案!我不得不使用一些技巧来实现这一点。转换器需要能够查看有关ListView的更多信息,而不是通常能够看到的信息。为了解决这个问题,我使用IMultiValueConverter将整个ListView元素发送给它。它从MaxFontSize开始,下拉一个字体大小,直到找到最长行完全符合LitView宽度或MinFontSize的大小。

您可能需要进行一些调整以完全满足您的需求,但这应该照顾最难的部分。您可能希望查看优化大小代码,因为它可能会导致许多项目出现性能问题。应该有几个相当明显的优化,我现在没有时间做。

enter image description here

添加以下课程:

class FontSizeConverter : FrameworkElement, IMultiValueConverter
{
    public double MaxFontSize { get; set; } = 50;
    public double MinFontSize { get; set; } = 1;

    private Size MeasureString(string candidate, Typeface typeface, double fontSize, ListView listView)
    {
        var formattedText = new FormattedText(candidate,
                                              CultureInfo.CurrentUICulture,
                                              FlowDirection.LeftToRight,
                                              typeface,
                                              fontSize,
                                              Brushes.Black,
                                              VisualTreeHelper.GetDpi(listView).PixelsPerDip);

        return new Size(formattedText.Width, formattedText.Height);
    }

    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        var containerListView = values[1] as ListView;
        if (containerListView == null || containerListView.ItemsSource==null)
        {
            return MaxFontSize;
        }

        Typeface typeface = new Typeface(containerListView.FontFamily, containerListView.FontStyle, containerListView.FontWeight, containerListView.FontStretch);
        double size = MaxFontSize;
        while (size > 0)
        {
            var biggestWidth = ((IEnumerable<string>)containerListView.ItemsSource).Select(s => MeasureString(s, typeface, size, containerListView).Width).Max();
            if (biggestWidth <= containerListView.ActualWidth)
            {
                return size;
            }
            size--;
        }
        return MinFontSize;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

使用此XAML:

<Window
    x:Class="WpfApp4.MainWindow"
    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:local="clr-namespace:WpfApp4"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    Title="MainWindow"
    Width="525"
    Height="350"
    mc:Ignorable="d">
    <Window.Resources>
        <x:Array x:Key="Data" Type="{x:Type system:String}">
            <system:String>Testing Testing Testing</system:String>
            <system:String>Some more text Some more text Some more text</system:String>
            <system:String>Longer text</system:String>
            <system:String>text text text text text texttext text text text text text</system:String>
            <system:String>Testing</system:String>
        </x:Array>
        <local:FontSizeConverter x:Key="FontSizeConverter" />
    </Window.Resources>
    <ListView
        Name="TheListView"
        Margin="8"
        ItemsSource="{Binding Source={StaticResource Data}}"
        ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <ListView.FontSize>
            <MultiBinding Converter="{StaticResource FontSizeConverter}">
                <Binding ElementName="TheListView" Path="ActualWidth" />
                <Binding ElementName="TheListView" />
            </MultiBinding>
        </ListView.FontSize>
        <ListView.Resources />
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Window>