主页 / 问题 / 553951
Accepted
Lightness
Asked:2020-08-10 19:16:27 +0000 UTC2020-08-10 19:16:27 +0000 UTC

列表框视觉状态

  • 772

我怎样才能做到这一点ListBox，根据窗口的大小，我可以决定向它显示多少行信息？

假设有这个xaml：

<ListBox>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid IsItemsHost="True" Rows="2"></UniformGrid>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
</ListBox>

如果窗口的高度500px要以行UniformGrid显示2，如果更多，700px则以3. 如何实施？

PS我听说过一些事情VisualState，在我看来它们可以用于这种情况，但我没有找到一个正常的例子。

c#

1 个回答

  1. Best Answer

    如果没有代码隐藏，它可能根本无法工作。

    一个简单的解决方案是通过转换器计算将窗口高度转换为行数的逻辑：

    class WindowHeightToRowsConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter,
                          CultureInfo culture)
    {
        var height = (double)value;
        if (height < 500.0)
            return 1;
        else if (height < 700)
            return 2;
        else
            return 3;
    }

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

    有了这个你可以做一个简单的绑定：

    <Window x:Class="..." ...
        Width="525" Name="Root">
    <Window.Resources>
        <local:WindowHeightToRowsConverter x:Key="H2R"/>
    </Window.Resources>
    <Grid>
        <ListBox ItemsSource="...">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid
                        IsItemsHost="True"
                        Rows="{Binding ActualHeight, ElementName=Root,
                                 Converter={StaticResource H2R}}"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </Grid>
</Window>

    这种解决方案的缺点是类逻辑WindowHeightToRowsConverter非常具体，难以重用。一个更复杂但可能可重用的解决方案，例如这个。

    我们把比较转换器：

    class LessThanConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter,
                          CultureInfo culture)
    {
        return (double)value < (double)parameter;
    }

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

class GreaterOrEqConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter,
                          CultureInfo culture)
    {
        return (double)value >= (double)parameter;
    }

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

    现在，为了方便在代码中指定常量，这里是以下内容：

    public class DoubleExtension : MarkupExtension
{
    public DoubleExtension(double value) { Value = value; }
    public double Value { get; set; }
    public override object ProvideValue(IServiceProvider sp) { return Value; }
}

    我们编写以下 XAML：

    <Window x:Class="..."
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:local="..."
        ...
        Name="Root">
    <Window.Resources>
        <local:LessThanConverter x:Key="LT"/>
        <local:GreaterOrEqConverter x:Key="GE"/>
    </Window.Resources>

    <UniformGrid IsItemsHost="True">
    <UniformGrid.Style>
        <Style TargetType="UniformGrid">
            <Setter Property="Rows" Value="1"/>
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <!-- если высота >= 500... -->
                        <Condition Binding="{Binding ActualHeight, ElementName=Root,
                                               Converter={StaticResource GE},
                                               ConverterParameter={local:Double 500}}"
                                   Value="True"/>
                        <!-- и < 700... -->
                        <Condition Binding="{Binding ActualHeight, ElementName=Root,
                                               Converter={StaticResource LT},
                                               ConverterParameter={local:Double 700}}"
                                   Value="True"/>
                    </MultiDataTrigger.Conditions>
                    <!-- то Rows = 2 -->
                    <Setter Property="Rows" Value="2"/>
                </MultiDataTrigger>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <!-- если высота >= 700... -->
                        <Condition Binding="{Binding ActualHeight, ElementName=Root,
                                               Converter={StaticResource GE},
                                               ConverterParameter={local:Double 700}}"
                                   Value="True"/>
                    </MultiDataTrigger.Conditions>
                    <!-- то Rows = 3 -->
                    <Setter Property="Rows" Value="3"/>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
    </UniformGrid.Style>
</UniformGrid>

    这样就可以把简单的条件组合成复杂的条件。

    （local:Double工作谢谢DoubleExtension。）

    • 2

相关问题