首页 > 代码库 > D22_02_创建自定义视图
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>
D22_02_创建自定义视图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。