Question

我有一个控件 - ItemsControl绑定到一个简单模型的ObservableCollection，我希望它的itemscontrol能够从下到上插入dircetion，如何实现呢？目前，每次插入到itemscontrol都是从上到下开始，但我想改变它..

<Window >
<Window.Resources>
    <DataTemplate x:Key="ModelTemplate" DataType="Model:Model">
        <Grid
            Tag="{Binding Path=Id}"
            Background="Transparent">
            <Border
                Name="border"
                Background="#2a3345" 
                BorderThickness="0" 
                CornerRadius="10" 
                Margin="10">
                <Border.Effect>
                    <DropShadowEffect 
                        ShadowDepth="0" 
                        Opacity="0.8" 
                        BlurRadius="10"/>
                </Border.Effect>
                <Grid 
                    Height="100" 
                    Width="280"
                    Margin="6">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>                      
                    <TextBlock 
                        Grid.Column="1" 
                        Text="{Binding Path=Title}"  
                        TextOptions.TextRenderingMode="ClearType" 
                        TextOptions.TextFormattingMode="Display"
                        Foreground="White" 
                        FontFamily="Arial" 
                        FontSize="14" 
                        FontWeight="Bold" 
                        VerticalAlignment="Center" 
                        Margin="2,4,4,2" 
                        TextWrapping="Wrap" 
                        TextTrimming="CharacterEllipsis" />                       
                    <TextBlock
                        Grid.Row="1"
                        Grid.Column="1" 
                        Text="{Binding Path=Message}" 
                        TextOptions.TextRenderingMode="ClearType"
                        TextOptions.TextFormattingMode="Display"
                        Foreground="White" 
                        FontFamily="Arial" 
                        VerticalAlignment="Center"
                        Margin="2,2,4,4" 
                        TextWrapping="Wrap" 
                        TextTrimming="CharacterEllipsis"/>
                </Grid>
            </Border>
        </Grid>
       </DataTemplate>
</Window.Resources>
<Grid>
    <ItemsControl 
        FocusVisualStyle="{x:Null}"
        ItemsSource="{Binding SimpleCollection}" 
        ItemTemplate="{StaticResource ModelTemplate}" >
    </ItemsControl>
</Grid>

Answer 1

解决方案是覆盖ItemsControl＆＃39的ItemsPanel，如下所示：

<Window >
<Window.Resources>
<ScaleTransform ScaleY="-1" x:Key="Transform"/>
<DataTemplate x:Key="ModelTemplate" DataType="Model:Model">
    <Grid
        LayoutTransform="{StaticResource Transform}"
        Tag="{Binding Path=Id}"
        Background="Transparent">
        <Border
            Name="border"
            Background="#2a3345" 
            BorderThickness="0" 
            CornerRadius="10" 
            Margin="10">
            <Border.Effect>
                <DropShadowEffect 
                    ShadowDepth="0" 
                    Opacity="0.8" 
                    BlurRadius="10"/>
            </Border.Effect>
            <Grid 
                Height="100" 
                Width="280"
                Margin="6">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>                      
                <TextBlock 
                    Grid.Column="1" 
                    Text="{Binding Path=Title}"  
                    TextOptions.TextRenderingMode="ClearType" 
                    TextOptions.TextFormattingMode="Display"
                    Foreground="White" 
                    FontFamily="Arial" 
                    FontSize="14" 
                    FontWeight="Bold" 
                    VerticalAlignment="Center" 
                    Margin="2,4,4,2" 
                    TextWrapping="Wrap" 
                    TextTrimming="CharacterEllipsis" />                       
                <TextBlock
                    Grid.Row="1"
                    Grid.Column="1" 
                    Text="{Binding Path=Message}" 
                    TextOptions.TextRenderingMode="ClearType"
                    TextOptions.TextFormattingMode="Display"
                    Foreground="White" 
                    FontFamily="Arial" 
                    VerticalAlignment="Center"
                    Margin="2,2,4,4" 
                    TextWrapping="Wrap" 
                    TextTrimming="CharacterEllipsis"/>
            </Grid>
        </Border>
    </Grid>
   </DataTemplate>
    <ItemsPanelTemplate x:Key="ItemsPanelTemplateVerticalAlignment">
        <StackPanel VerticalAlignment="Bottom" LayoutTransform="{StaticResource Transform}"/>
    </ItemsPanelTemplate>
</Window.Resources>
<Grid>
    <ItemsControl 
        FocusVisualStyle="{x:Null}"
        ItemsSource="{Binding SimpleCollection}" 
        ItemTemplate="{StaticResource ModelTemplate}" 
        ItemsPanel="{StaticResource ItemsPanelTemplateVerticalAlignment}"/>
    </Grid>
</Window>

Answer 2

ItemsControl中的项目顺序与ObservableCollection中的相同。因此，如果您执行Collection.Insert(0, item)，ItemsControl中的新项目将显示在顶部。

如何将插入方向更改为ItemsControl

2 个答案: