Wpf ListView展示风格

ListView数据绑定控件，通常是竖列展示，也可以通过改变ListView的布局来改变它的展示方式

如图展示：

主要需用修改的样式如下：

 1   <!--GridView Header样式 去除Gridview自带的Header框-->
 2         <Style TargetType="{x:Type GridViewColumnHeader}" >
 3             <Setter Property="HorizontalContentAlignment" Value="Center"/>
 4             <Setter Property="FrameworkElement.Visibility" Value="Hidden"/>
 5             <Setter Property="Height" Value="0"></Setter>
 6         </Style>
 7         <!--ListView 布局样式 使图片可以横向展示-->
 8         <Style  TargetType="{x:Type ListView}" >
 9             <Setter Property='ItemsPanel'>
10                 <Setter.Value>
11                     <ItemsPanelTemplate>
12                         <WrapPanel  Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource   AncestorType=ScrollContentPresenter}}"></WrapPanel>
13                     </ItemsPanelTemplate>
14                 </Setter.Value>
15             </Setter>
16          </Style>
17         
18         <!--ListView Item样式和点击后样式模板-->
19         <ControlTemplate x:Key="ListViewItemTemplate" TargetType="ListBoxItem">
20             <Border Name="Border">
21                 <StackPanel>
22                     <GridViewRowPresenter>
23                     </GridViewRowPresenter>
24                 </StackPanel>
25             </Border>
26             <ControlTemplate.Triggers>
27                 <Trigger Property="IsSelected" Value="true">
28                     <Setter TargetName="Border"  Property="Background" Value="#ffffff"/>
29                 </Trigger> 
30                 <Trigger Property="IsMouseOver" Value="True">
31                     <Setter TargetName="Border"  Property="Background" Value="#ffffff"/>
32                 </Trigger>
33             </ControlTemplate.Triggers>
34         </ControlTemplate>
35         <!--ListView Item样式和点击后样式-->
36         <Style x:Key="{x:Type ListViewItem}"  TargetType="ListViewItem">
37             <Setter Property="Template" Value="{StaticResource ListViewItemTemplate}"/>
38             <Setter Property="FocusVisualStyle" Value="{x:Null}"></Setter> 
39         </Style>

Xaml代码如下：

<!-- ListView 中的ScrollViewer.HorizontalScrollBarVisibility="Disabled" 代码的意思是为了让WrapPanel 可以自带换行--> 
<ListView Name="LCon" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                            <ListView.View>
                                <GridView >
                                    <GridView.Columns>
                                        <GridViewColumn > 
                                            <GridViewColumnHeader></GridViewColumnHeader>
                                            <GridViewColumn.CellTemplate>
                                                <DataTemplate>
                                                    <StackPanel Margin="10 20 0 0" >
                                                        <Border Width="112" Height="167" Name="Bor_Movie1" >
                                                            <Border.Background>
                                                                <ImageBrush ImageSource="{Binding MovieImageUrl}"></ImageBrush>
                                                            </Border.Background>
                                                        </Border>
                                                        <Label MaxWidth="112"  Margin="0,10,0,0" >
                                                            <TextBlock TextWrapping="Wrap" TextAlignment="Center" FontSize="12" FontWeight="Bold" Text="{Binding Movie_Tilte}" Height="27" Width="105"></TextBlock>
                                                        </Label>
                                                    </StackPanel>
                                                </DataTemplate>
                                            </GridViewColumn.CellTemplate>
                                        </GridViewColumn>
                                    </GridView.Columns>
                                </GridView>
                            </ListView.View>
                        </ListView>

 

posted @ 2015-06-03 15:46  王小贝  阅读(16115)  评论(1)  编辑  收藏  举报