首页 > 代码库 > D22_02_创建自定义视图

D22_02_创建自定义视图

imageimageimage

 

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

D22_02_创建自定义视图