D22_02_创建自定义视图

 

<Window x:Class="demo.CustomListViewTest"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CustomListViewTest" Height="375" Width="525"
        xmlns:local="clr-namespace:demo">
    <Window.Resources>
        <local:ImagePathConverter x:Key="ImagePathConverter"></local:ImagePathConverter>

        <GridView x:Key="GridView">
            <GridView.Columns>
                <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Path=ModelName}"></GridViewColumn>
                <GridViewColumn Header="Model" DisplayMemberBinding="{Binding Path=ModelNumber}"></GridViewColumn>
                <GridViewColumn Header="Price" DisplayMemberBinding="{Binding Path=UnitCost}"></GridViewColumn>
            </GridView.Columns>
        </GridView>
        <!--自定义视图-->
        <local:TileView x:Key="ImageView">
            <local:TileView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Width="150" VerticalAlignment="Top">
                        <Image Source="{Binding Path=ProductImagePath,Converter={StaticResource ImagePathConverter}}"></Image>
                        <TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding Path=ModelName}"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </local:TileView.ItemTemplate>
        </local:TileView>
        <!--自定义视图-->
        <local:TileView x:Key="ImageDetailView" >
            <local:TileView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                            <ColumnDefinition Width="Auto" SharedSizeGroup="Col2"></ColumnDefinition>
                        </Grid.ColumnDefinitions>

                        <Image Margin="5" Width="100" Source="{Binding Path=ProductImagePath,Converter={StaticResource ImagePathConverter}}"></Image>
                        <StackPanel Grid.Column="1" VerticalAlignment="Center">
                            <TextBlock FontWeight="Bold" Text="{Binding Path=ModelName}"></TextBlock>
                            <TextBlock Text="{Binding Path=ModelNumber}"></TextBlock>
                            <TextBlock Text="{Binding Path=UnitCost,StringFormat={}{0:C}}"></TextBlock>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </local:TileView.ItemTemplate>
        </local:TileView>

    </Window.Resources>
    <Grid Margin="5">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <!--ListView通过View指定视图-->
        <ListView Name="lstProducts" View="{StaticResource GridView}"></ListView>
        <Grid Grid.Row="1" Margin="5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <TextBlock Margin="5" VerticalAlignment="Center">Choose your view:</TextBlock>
            <!--通过SelectionChanged事件改变视图方式-->
            <ComboBox Grid.Column="1" Margin="5" Width="150" HorizontalAlignment="Left" Name="lstView" SelectionChanged="lstView_SelectionChanged">
                <ComboBoxItem>GridView</ComboBoxItem>
                <ComboBoxItem>ImageView</ComboBoxItem>
                <ComboBoxItem>ImageDetailView</ComboBoxItem>
            </ComboBox>
        </Grid>
    </Grid>
</Window>

CustomListViewTest

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace demo
{
    /// <summary>
    /// CustomListViewTest.xaml 的交互逻辑
    /// </summary>
    public partial class CustomListViewTest : Window
    {
        public CustomListViewTest()
        {
            InitializeComponent();

            lstProducts.ItemsSource = App.StoreDb.GetProducts();
        }

        private void lstView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            //把选择项转为ComboBoxItem对象
            ComboBoxItem selectedItem = (ComboBoxItem)lstView.SelectedItem;
            //通过选择项改变listview的视图方式，TryFindResource去xaml中查找资源
            lstProducts.View = (ViewBase)this.TryFindResource(selectedItem.Content);
        }
    }
}

TileView 自定义视图

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Controls;
using System.Windows;
using System.Windows.Data;
using System.Windows.Media;


namespace demo
{
    //自定义视图，继承ViewBase，复写DefaultStyleKey，ItemContainerDefaultStyleKey方法
    public class TileView : ViewBase
    {
        private DataTemplate itemTemplate;
        public DataTemplate ItemTemplate
        {
            get { return itemTemplate; }
            set { itemTemplate = value; }
    }

        protected override object DefaultStyleKey
        {
            get
            {
                //TileView资源ID，去themes下generic.xaml文件中查找
                return new ComponentResourceKey(GetType(),"TileView");
            }
        }

        protected override object ItemContainerDefaultStyleKey
        {
            get
            {
                //TileViewItem资源ID，去themes下generic.xaml文件中查找
                return new ComponentResourceKey(GetType(),"TileViewItem");
            }
        }
    }
}

generic.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:demo">
    <Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:TileView}, ResourceId=TileView}"
         TargetType="{x:Type ListView}" BasedOn="{StaticResource {x:Type ListBox}}">
        <Setter Property="BorderBrush" Value="Black"></Setter>
        <Setter Property="BorderThickness" Value="0.5"></Setter>
        <Setter Property="Grid.IsSharedSizeScope" Value="True"></Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <WrapPanel Width="{Binding (FrameworkElement.ActualWidth),
                     RelativeSource={RelativeSource 
                                     AncestorType=ScrollContentPresenter}}"
                   ></WrapPanel>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:TileView},ResourceId=TileViewItem}"
         TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource {x:Type ListBoxItem}}">
        <Setter Property="Padding" Value="3"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
        <Setter Property="ContentTemplate" Value="{Binding Path=View.ItemTemplate,
            RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}}"></Setter>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border
           Name="Border" BorderThickness="1" CornerRadius="3" >
                        <ContentPresenter />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Border" Property="BorderBrush"
               Value="{Binding Path=View.SelectedBorderBrush,
            RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}}"></Setter>
                            <Setter TargetName="Border" Property="Background"
              Value="{Binding Path=View.SelectedBackground,
            RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}}"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

    </Style>
</ResourceDictionary>