2

Как сделать, чтобы ListBox в зависимости от размеров окна мог решать во сколько строк ему выводить информацию?

Допусти есть вот такой xaml:

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

Если высота окна 500px то чтобы UniformGrid выводился в 2 строки, а если больше 700px то в 3. Как такое реализовать?

P.S. Что-то слышал о VisualState и мне кажется что их можно было б применить в данной ситуации, но нормального примера не нашел.

5
  • Через code-behind?
    – VladD
    10 авг 2016 в 12:45
  • @VladD, А в xaml нельзя?
    – Lightness
    10 авг 2016 в 12:46
  • Давайте попробую, момент. Триггер должен покатить, по идее.
    – VladD
    10 авг 2016 в 13:01
  • Окей, вопрос. Какое должно быть значение Rows, если высота окна меньше 500? Если от 500 до 700? У вас в вопросе только для ровно 500 и больше 700.
    – VladD
    10 авг 2016 в 13:08
  • @VladD, Я это просто для примера написал, мне главное идею реализации понять. Допустим до 500 будет 1, от 500 до 700 будет 2, а больше 700 будет 3.
    – Lightness
    10 авг 2016 в 13:11

1 ответ 1

2

Совсем без code behind, наверное, не выйдет.

Простое решение — высчитывать логику преобразования высоты окна в количество строк через конвертер:

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
  • Сразу несколько новых вещей увидел : MarkupExtension и Condition . Все работает, большое спасибо!
    – Lightness
    10 авг 2016 в 13:53
  • @Lightness: Пожалуйста! Рад, что пригодилось!
    – VladD
    10 авг 2016 в 14:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.