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.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>