WPF列表,其后续大小为

时间:2016-06-16 09:33:25

标签: wpf list

我必须向最终用户显示建议列表。 我希望列表中的1.项目最容易阅读,2。项目应该更小,3项目甚至更小。

  • 索引0处的项目必须很大,所有文本都是黑色的
  • 索引1处的项目必须小一些,所有文本主要是黑色但其中有一些灰色
  • 索引2及以上的项目必须很小,所有文字都是灰色的

示例

Like this

我正在使用WPF,但还没有找到办法做到这一点。

目前我有:

<ListView ItemsSource="{Binding MyList}" Height="auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" Background="Transparent">
<ListView.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="75"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Label Grid.Column="0" Content="{Binding SomeText}"/>
            <Label Grid.Column="1" Content="{Binding MoreText}"/>
        </Grid>
    </DataTemplate>
</ListView.ItemTemplate>

这只生成一个平面列表,每个元素的大小相同。

我一直在看AlternationCount + ItemsControl.AlternationIndex,但那些会交替,这不是我想要的,我想要一个特殊的1.和2.行,其余的行是相同的。

编辑解决方案 感谢@Adrian Faciu的解决方案。

看起来像这样:

<ItemsControl ItemsSource="{Binding MyList}" AlternationCount="1000" ScrollViewer.VerticalScrollBarVisibility="Disabled" Background="Transparent">
<ItemsControl.Resources>
    <Style TargetType="{x:Type Label}">
        <Setter Property="Foreground" Value="Red"></Setter>
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource TemplatedParent}}" Value="0">
                <Setter Property="Foreground" Value="Green"></Setter>
                <Setter Property="FontSize" Value="20" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource TemplatedParent}}" Value="1">
                <Setter Property="Foreground" Value="Yellow"></Setter>
                <Setter Property="FontSize" Value="15" />
            </DataTrigger>
        </Style.Triggers>
    </Style>
</ItemsControl.Resources>
<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="75"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Label Grid.Column="0" Content="{Binding MyText}"/>
            <Label Grid.Column="1" Content="{Binding AnotherText}"/>
        </Grid>
    </DataTemplate>
</ItemsControl.ItemTemplate>

2 个答案:

答案 0 :(得分:3)

你走在正确的轨道上。您可以将AlternationCount绑定到集合的长度,然后为默认项创建样式,并首先更改行:

<Style x:Key="differentItemsStyle" TargetType="{x:Type Label}">
    <Setter Property="Foreground" Value="Red"></Setter>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource TemplatedParent}}" Value="0">
            <Setter Property="Foreground" Value="Green"></Setter>
        </DataTrigger>
        <DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource TemplatedParent}}" Value="1">
            <Setter Property="Foreground" Value="Yellow"></Setter>
        </DataTrigger>
    </Style.Triggers>
</Style>

在您的示例中,您将拥有选项C,D,E的默认样式,您可以根据需要覆盖选项A和选项B.

修改 为了使这个工作适用于ListBox,需要更改绑定:

<DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource AncestorType=ListBoxItem}}" Value="1">
     <Setter Property="Foreground" Value="Yellow"></Setter>
</DataTrigger>

有关详细信息,请参阅this answer

答案 1 :(得分:1)

我认为你可以在你的类中添加一个属性,并用标签的字体大小绑定它。

的Xaml:

  <ListView ItemsSource="{Binding MyList}" Height="auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" Background="Transparent">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="75"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" FontSize="{Binding FontSize}" Foreground="{Binding Foreground}" Content="{Binding Name}"/>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

视图模型:

  MyList = new List<ListItems>();
        MyList.Add(new ListItems() { Name = "Option A", FontSize = 20, Foreground = Brushes.Black });
        MyList.Add(new ListItems() { Name = "Option B", FontSize = 15, Foreground = Brushes.Black });
        MyList.Add(new ListItems() { Name = "Option C", FontSize = 8, Foreground = Brushes.Gray });
        MyList.Add(new ListItems() { Name = "Option D", FontSize = 8, Foreground = Brushes.Gray });
        MyList.Add(new ListItems() { Name = "Option E", FontSize = 8, Foreground = Brushes.Gray });