4

Имеется следующая разметка:

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Margin="2.5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <TextBlock Padding="5"
                           Text="{Binding Name}"/>

                <TextBlock Grid.Column="1"
                           Padding="5"
                           Text="{Binding Weight}"/>

                <Rectangle Grid.ColumnSpan="2" Panel.ZIndex="-1"
                           Fill="LightGreen" HorizontalAlignment="Left"
                           Width="..."/>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Здесь Items - некая коллекция элементов, упорядоченная по убыванию Weight. Что я хочу: подложить под TextBlock'и зеленый прямоугольник, но так, чтобы его ширина была пропорциональна значению Weight, причем за 100% принять большее значение (оно самое первое будет). Шаблон набросал, но что вписать в свойство Width никак не соображу. Тут надо, во-первых, учесть что эти 100% заведомо неизвестны, а во-вторых, что ширина Grid может быть любой.

Нарисовал что хочу получить:

введите сюда описание изображения

9
  • В принципе можно набросать конвертер и передать в него параметром Items, но как учесть ширину тогда... 20 апр 2017 в 16:01
  • А если у rectangle сделать HorizontalAlignment="Stretch" и убрать задание Width?
    – Gardes
    20 апр 2017 в 16:17
  • @Gardes, тогда они все будут одинаковыми 20 апр 2017 в 16:22
  • не совсем понимаю что нужно, можете приложить скриншот того что получается и того что хотите?
    – Gardes
    20 апр 2017 в 16:30
  • А хороший вопрос, кстати. Если бы максимум был известен в VM, было бы куда проще.
    – VladD
    20 апр 2017 в 16:32

1 ответ 1

5

Если максимальный вес есть отдельно в VM, то получается такой вот код:

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Margin="2.5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <TextBlock Padding="5"
                   Text="{Binding Name}"/>

                <TextBlock Grid.Column="1"
                   Padding="5"
                   Text="{Binding Weight}"/>

                <ProgressBar Grid.ColumnSpan="2" Panel.ZIndex="-1"
                   Background="Transparent" Foreground="LightGreen"
                   Value="{Binding Weight}" BorderThickness="0"
                   Maximum="{Binding DataContext.MaxWeight,
                        RelativeSource={RelativeSource FindAncestor,
                            AncestorType=ItemsControl}}"/>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

На Windows 7 выглядит так:

картинка

Если хотите, чтобы стиль был один и тот же, проще всего таки приспособить прямоугольник. Для этого концептуально проще всего использовать конвертер.

Например, так. Ширина прямоугольника равна доступной ширине грида, умноженной на отношение Weight к MaxWeight. Оформляем это в виде конвертера.

class ProportionConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type t, object p, CultureInfo ci) =>
        (double)values[0] / (double)values[1] * (double)values[2];

    public object[] ConvertBack(object value, Type[] tt, object p, CultureInfo ci) =>
        throw new NotSupportedException();
}

И оформляем такую разметку:

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.Resources>
        <local:ProportionConverter x:Key="ProportionConverter"/>
    </ItemsControl.Resources>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Margin="2.5" Name="ContainerGrid">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <TextBlock Padding="5"
                   Text="{Binding Name}"/>

                <TextBlock Grid.Column="1"
                   Padding="5"
                   Text="{Binding Weight}"/>

                <Rectangle Grid.ColumnSpan="2" Panel.ZIndex="-1"
                   Fill="LightGreen" HorizontalAlignment="Left">
                    <Rectangle.Width>
                        <MultiBinding Converter="{StaticResource ProportionConverter}">
                            <Binding Path="Weight"/>
                            <Binding Path="DataContext.MaxWeight"
                                     RelativeSource="{RelativeSource FindAncestor,
                                         AncestorType=ItemsControl}"/>
                            <Binding Path="ActualWidth" ElementName="ContainerGrid"/>
                        </MultiBinding>
                    </Rectangle.Width>
                </Rectangle>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Результат:

и ещё картинка


Для эстетов, которые не хотят плодить конвертеры, можно извратиться, и реализовать деление при помощи двух трансформаций, причём одну из них нужно обратить. Вот так:

<Grid Grid.ColumnSpan="2" Panel.ZIndex="-1"
    RenderTransformOrigin="0,0.5" x:Name="HelperGrid">
    <Grid.Tag>
        <ScaleTransform
            ScaleX="{Binding DataContext.MaxWeight,
                RelativeSource={RelativeSource FindAncestor, AncestorType=ItemsControl}}"
            ScaleY="1"/>
    </Grid.Tag>
    <Grid.RenderTransform>
        <ScaleTransform ScaleX="{Binding Weight}" ScaleY="1"/>
    </Grid.RenderTransform>
    <Rectangle Fill="LightGreen" RenderTransformOrigin="0,0.5"
        RenderTransform="{Binding Tag.Inverse, ElementName=HelperGrid}"/>
</Grid>

Картинка получается та же.

Ещё один вариант, который предложил в комментариях @Pavel Mayorov:

<Viewbox Stretch="Fill" Grid.ColumnSpan="2" Panel.ZIndex="-1">
    <Grid Width="{Binding DataContext.MaxWeight,
                    RelativeSource={RelativeSource FindAncestor, AncestorType=ItemsControl}}"
          Height="1">
        <Rectangle Width="{Binding Weight}" HorizontalAlignment="Left"
            Fill="LightGreen"/>
    </Grid>
</Viewbox>

(Я пробовал ещё варианты с GradientBrush и RenderTransform через конвертер, они тоже работают.)

13
  • Спасибо, хак с заменой на ProgressBar интересный, но есть минус - на разных ОС выглядит по разному, если на Win10 все плоско как и задумывалось, то на Win7 уже не то (на WinXP будут вообще прерывистые квадратики) 20 апр 2017 в 16:57
  • Ну уж вам не угодишь :) Сейчас сделаю.
    – VladD
    20 апр 2017 в 17:01
  • @Андрей: Готово.
    – VladD
    20 апр 2017 в 17:21
  • работает как надо, спасибо! 20 апр 2017 в 17:34
  • 2
    Зачем так сложно с трансформациями? Можно просто взять Grid размера MaxWeight, а внутрь вложить прямоугольник размера Weight, после чего все вместе обернуть во Viewbox. 20 апр 2017 в 18:32

Ваш ответ

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

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