使用高级扩展选定项目包装ListView

时间:2016-06-16 10:24:29

标签: c# wpf xaml listview

我需要一些建议。我想创建Wrapping ListView,其中所选项目的详细信息已在其他项目之间内联查看。

一张图片胜过千言万语。 没有任何选定的项目: any selected items 使用所选项目: selected item 我正在努力实现与Google Image类似的效果。 我试过不同的方法来实现这一目标。也许改变DataTemplate Change WPF DataTemplate,但仍然不是我想要的。

我很乐意接受任何建议。非常感谢。

到目前为止,我只有这段代码:

RestResult<Agent> agentResults;
RestResult<Company> companyResults;
RestResult<Contact> contactResults;
RestResult<Ticket> ticketResults;

Parallel.Invoke(
    () => agentResults = agentService.GetAll(),
    () => companyResults = companyService.GetAll(),
    () => contactResults = contactService.GetAll(),
    () => ticketResults = ticketService.GetAll()
);

更新

您好, 一段时间后我回到了这个问题,但我需要一些建议。我想我正走在正确的轨道上。 我用ItemDetailTemplatem创建了自己的ListView控件。一切都运作良好,除了ItemDetail。我需要ItemDetail跨越宽度ListView。 看图: 以下是源代码:ListViewWrapPanelExpand.zip 我会很高兴任何建议。非常感谢

    <ListView x:Name="ListViewData" 
             ScrollViewer.HorizontalScrollBarVisibility="Disabled"  
             VirtualizingStackPanel.VirtualizationMode="Recycling"  
             VirtualizingStackPanel.IsVirtualizing="True" 
             IsSynchronizedWithCurrentItem="True"
             SelectedItem="{Binding SelectedItemListView}"  
             ItemsSource="{Binding EmployeesDataList}" Background="{x:Null}" BorderBrush="{x:Null}" >
        <ie:Interaction.Triggers >
            <ie:EventTrigger EventName="SelectionChanged">
                <ie:InvokeCommandAction Command="{Binding SelectedItemCommand}" 
        CommandParameter="{Binding Path=SelectedItem, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListView}}}"/>
            </ie:EventTrigger>
        </ie:Interaction.Triggers>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel VirtualizingPanel.IsVirtualizing="True" Orientation="Horizontal" IsItemsHost="True"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <!-- ItemContainerStyle -->
        <ListView.ItemContainerStyle>

            <Style TargetType="{x:Type ListViewItem}">
                <!--<Setter Property="ContentTemplate" Value="{StaticResource ItemTemplate}" />-->
                <Setter Property="Template">

                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <Grid  Focusable="False"  >
                                <Rectangle  Focusable="False"  Fill="{TemplateBinding Background}" />
                                <ContentPresenter Margin="3"  Content="{TemplateBinding Content}"
                                 ContentTemplate="{TemplateBinding ContentTemplate}"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>

                </Setter>

                <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                <Style.Triggers>
                    <Trigger Property="IsMouseOver"
                Value="True">
                        <Setter Property="Background"
                Value="#00000000" />
                    </Trigger>
                    <Trigger Property="IsSelected"
                Value="True">
                        <Setter Property="Background"
                Value="#00ADD8E6" />
                    </Trigger>
                    <!--<Trigger Property="IsSelected" Value="True">
                        <Setter Property="ContentTemplate" Value="{StaticResource SelectedTemplate}" />
                    </Trigger>-->

                </Style.Triggers>
            </Style>
        </ListView.ItemContainerStyle>
        <!-- ItemTemplate -->
        <ListView.ItemTemplate>
            <DataTemplate>
                <DataTemplate.Resources>
                    <DropShadowEffect x:Key="z-depth4" BlurRadius="25" ShadowDepth="8" Direction="270" Color="#BBBBBB"/>
                </DataTemplate.Resources>

                <Grid Effect="{StaticResource z-depth4}" d:DesignWidth="250" d:DesignHeight="100" Width="250" Height="100" Background="{Binding Colors}" >
                    <TextBlock x:Name="txtId" TextOptions.TextFormattingMode="Display" RenderOptions.BitmapScalingMode="NearestNeighbor" Margin="39,25,0,0" Text="{Binding Id}" FontSize="33.333" HorizontalAlignment="Left" Width="Auto" Foreground="White" VerticalAlignment="Top" Panel.ZIndex="3">
                        <TextBlock.Effect>
                            <DropShadowEffect ShadowDepth="4"
                    Direction="330"
                    Color="Black"
                    Opacity="0.5"
                    BlurRadius="4"/>
                        </TextBlock.Effect>
                    </TextBlock>

                    <Rectangle x:Name="Rectangle2" HorizontalAlignment="Stretch" Height="Auto" VerticalAlignment="Stretch" Width="Auto" Panel.ZIndex="4" Fill="#00000000" Margin="0,0,0,1" Grid.ColumnSpan="1"/>
                    <Grid x:Name="pathSelected" HorizontalAlignment="Left" Width="30" Height="30" VerticalAlignment="Top" Margin="71,0,0,0" Visibility="Hidden" Panel.ZIndex="3" Grid.ColumnSpan="1">
                        <Polygon x:Name="checkPoly" Points="0,0 29,29 29,0 0,0" Stroke="Purple" StrokeThickness="0" Width="30" Height="29" 
                            VerticalAlignment="Top" HorizontalAlignment="Right" Fill="Red" />
                        <Path Stroke="White" Data="M 6,6 L 9, 9 L 16,2" StrokeThickness="2"
                            VerticalAlignment="Top" HorizontalAlignment="Right" Panel.ZIndex="1" Margin="0,3.25,2.75,0" />
                    </Grid>
                    <TextBlock TextOptions.TextFormattingMode="Display" RenderOptions.BitmapScalingMode="HighQuality" TextTrimming="CharacterEllipsis" x:Name="txtTitle" HorizontalAlignment="Stretch" Margin="112,10,10,0" TextWrapping="Wrap" Text="{Binding Title}" VerticalAlignment="Top" Height="23" Width="Auto" FontSize="17.333" Grid.Column="0"/>
                    <TextBlock TextOptions.TextFormattingMode="Display" RenderOptions.BitmapScalingMode="HighQuality" TextTrimming="CharacterEllipsis" x:Name="txtName" Margin="112,43,0,0" TextWrapping="Wrap" Text="{Binding Name}" VerticalAlignment="Top" Height="Auto" Width="128" HorizontalAlignment="Left" Grid.Column="0"/>
                    <Rectangle x:Name="Rectangle1"  HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Panel.ZIndex="2" Fill="#7F143EB0" Visibility="Visible"/>
                </Grid>

                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorLevel=1, AncestorType={x:Type ListViewItem}, Mode=FindAncestor}}" Value="True">
                        <Setter TargetName="pathSelected" Property="Visibility" Value="Visible"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorLevel=1, AncestorType={x:Type ListViewItem}, Mode=FindAncestor}}" Value="True">
                        <Setter TargetName="Rectangle1" Property="Visibility" Value="Visible"/>
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

ItemDetailTemplate

   <controls:ListViewExpand 
        ItemsSource="{Binding CollectionCvs.View}" 
        ItemDetailTemplate="{StaticResource SelectedDetailTemplate}" 
        ItemMianTemplate="{StaticResource ItemMainTemplate}">
        <controls:ListViewExpand.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </controls:ListViewExpand.ItemsPanel>
    </controls:ListViewExpand>

ListViewExpand样式

<DataTemplate x:Key="SelectedDetailTemplate">
        <Canvas x:Name="Canvas1" ClipToBounds="False" Width="147" Height="320" Panel.ZIndex="100" >

            <Grid Margin="0" Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}}"
                  ClipToBounds="False" Panel.ZIndex="100"  x:Name="Grid1" Canvas.Top="5"  Background="Transparent"  Height="320" VerticalAlignment="Stretch" >
                <Grid Background="Green" x:Name="ItemDetail1"  Margin="10" >
                    <Button Width="100" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{Binding ItemCount}"></Button>
                    <!--<TextBlock Text="Item detail" Foreground="White" FontSize="25" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>-->
                </Grid>
            </Grid>
        </Canvas>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorLevel=1, AncestorType={x:Type ListViewItem}, Mode=FindAncestor}}" Value="True">


                <!--<Setter TargetName="Canvas1" Property="Height" Value="320"/>
                <Setter TargetName="Grid1" Property="Height" Value="320"/>-->

            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>

enter image description here

0 个答案:

没有答案