Wpf ListView display style, wpflistview display

Wpf ListView display style, wpflistview display

The ListView data binding control is usually a Vertical Column Display. You can also change the display mode by changing the layout of the ListView.

Display:

The main style to be modified is as follows:

1 <! -- The GridView Header Style removes the Header box that comes with the Gridview --> 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 layout Style enables horizontal display of images --> 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 style and click-Back Style template --> 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 Style and click Style --> 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>

The Xaml code is as follows:

<! -- ScrollViewer. HorizontalScrollBarVisibility = "Disabled" code in ListView indicates that WrapPanel can bring a line break. -->

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