ListView數據綁定控件,一般是豎列展現,也能夠經過改變ListView的佈局來改變它的展現方式app
如圖展現:佈局
主要需用修改的樣式以下:spa
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代碼以下:code
<!-- 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>