Wpf ListView展示風格

本文轉載自查看原文 2015-06-03 15:46 12957 Wpf

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 WPF ListView展示層疊信息 [WPF開發] WPF中Listbox/ListView 橫向展示/滑動內容的方法 android listview展示圖片 wpf listview images WPF ListView 選中問題 WPF ListView 分組 Grouping WPF基本的 LISTVIEW 排序實現 Wpf設置listview樣式 WPF ListView 樣式 WPF ListView DataTemplate & ItemsControl