你的位置:首页 > ASP.net教程

[ASP.net教程]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>