主页 / 问题 / 656282
Accepted
Андрей NOP
Asked:2020-04-21 00:00:04 +0800 CST2020-04-21 00:00:04 +0800 CST

ItemsControl：从元素访问有关父元素的信息

  • 772

有以下标记：

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

Here Items- 特定的元素集合，按降序排列Weight。我想要的：放在TextBlock'и绿色矩形下方，但使其宽度与 value 成正比Weight，并且 100% 取一个更大的值（它将是第一个）。Width我草拟了模板，但我不知道要在属性中输入什么。这里有必要首先考虑到这 100% 显然是未知的，其次，宽度Grid可以是任意的。

我画了我想要得到的：

在此处输入图像描述

c#

1 个回答

  1. Best Answer

    如果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它们也有效。）

    • 5

相关问题