WPF之多种视图切换

1,View切换,效果呈现

  • 视图1
  • 视图2
  • 视图3

2,在Xaml中添加Listview控件,Combobox控件。

XML 复制代码
<Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="143*"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <ListView Grid.IsSharedSizeScope="True" x:Name="listview01" BorderBrush="Red" BorderThickness="2" ></ListView>
        <StackPanel Grid.Row="1" Orientation="Horizontal">
            <TextBlock Text="选择视图模式:" VerticalAlignment="Center"></TextBlock>
            <ComboBox x:Name="combo01" SelectionChanged="combo01_Selected"  MinWidth="150" VerticalContentAlignment="Center">
                <sys:String>GirdView</sys:String>
                <sys:String>ImageDetailView</sys:String>
                <sys:String>ImageView</sys:String>
            </ComboBox>
        </StackPanel>
    </Grid>

3,自定义显示的视图。

cs 复制代码
 [ContentProperty("ItemTemplate")]
    /// <summary>
    /// 自定义的显示视图
    /// </summary>
    public class TitleView : ViewBase
    {
        /// <summary>
        /// ListViewItem数据模板,对应的是ListView的每一项
        /// </summary>
       public DataTemplate ItemTemplate
        {
            get; set;
        }
        /// <summary>
        /// 选中时的背景颜色
        /// </summary>
        public Brush SelectedBackgroundBrush { get; set; } = new SolidColorBrush(Colors.Transparent);
        /// <summary>
        /// 选中时的前景颜色
        /// </summary>
        public Brush SelectedForegroundBrush { get; set; } = new SolidColorBrush(Colors.Black);
        /// <summary>
        /// ListView默认样式资源建,根据此键从Themes文件下资源字典Generic.xaml中获取默认的ListView样式
        /// </summary>
        protected override object DefaultStyleKey
        {
            get
            {
                //根据反射可知只要两个 public ComponentResourceKey(Type typeInTargetAssembly, object resourceId);
                //中typeInTargetAssembly相同,resourceId相同则两个实例的hashcode相同,equal为 True 即两个实例相等
                return new ComponentResourceKey(GetType(),"TitleView");
            }
        }
        /// <summary>
        /// ListViewItem默认样式资源键,根据此键从Themes文件下资源字典Generic.xaml中获取默认的ListViewItem样式
        /// </summary>
        protected override object ItemContainerDefaultStyleKey
        {
            get
            {
                return new ComponentResourceKey(GetType(),"TitleViewItem") ;
            }
        }
    }
  • ListView.View:类型为ViewBase。
  • ViewBase为抽象类,系统只有一个派生类:GridView。
  • ListView.View用于表达ListViewItem中数据呈现的方式,在某一程度上可用ItemTemplate代替。
  • 使用ComponentResourceKey指定资源而不是使用字符串指定资源。

4,定义默认样式。

  • 同自定义无外观控件一样,其默认的样式也必须位于Themes文件夹下的资源字典Generic.xaml
XML 复制代码
 <Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:TitleView} ,ResourceId=TitleViewItem}" TargetType="ListViewItem"  >
        <Setter Property="ContentTemplate" Value="{Binding RelativeSource={RelativeSource  Mode=FindAncestor, AncestorType=ListView}, Path=View.ItemTemplate}"></Setter>
        <!--<Setter Property="Grid.IsSharedSizeScope" Value="True"></Setter>-->

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <Border x:Name="Part_Border" Background="Transparent">
                        <ContentPresenter ></ContentPresenter>
                    </Border>
                    
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter TargetName="Part_Border" Property="Background" Value="{Binding RelativeSource={RelativeSource  Mode=FindAncestor, AncestorType=ListView}, Path=View.SelectedBackgroundBrush}"></Setter>
                            <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource  Mode=FindAncestor, AncestorType=ListView}, Path=View.SelectedForegroundBrush}"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:TitleView} ,ResourceId=TitleView}" TargetType="ListView" >
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <WrapPanel></WrapPanel>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListView">
                    <Border Margin="{TemplateBinding Margin}"  BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5" Background="{TemplateBinding Background}">
                        <ScrollViewer Margin="{TemplateBinding Padding}">
                            <ItemsPresenter></ItemsPresenter>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

5,添加对象资源。

XML 复制代码
<Window.Resources>
        <GridView x:Key="GirdView">
            <GridViewColumn Header="Name" DisplayMemberBinding="{Binding ModelName}"></GridViewColumn>
            <GridViewColumn Header="Model" DisplayMemberBinding="{Binding ModelNumber}"></GridViewColumn>
            <GridViewColumn Header="Price" DisplayMemberBinding="{Binding UnitCost,  StringFormat={}{0:C2}}"></GridViewColumn>
        </GridView>
        <local:TitleView x:Key="ImageDetailView" SelectedBackgroundBrush="LightGreen" SelectedForegroundBrush="Red">
            <local:TitleView.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="SkyBlue" BorderThickness="2" Margin="5" Padding="5" CornerRadius="5">
                        <Grid >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto">
                                </ColumnDefinition>
                                <ColumnDefinition Width="auto" SharedSizeGroup="c1"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Image Margin="2" Width="100" Source="/Img/1.jpg" Stretch="Fill"></Image>
                            <StackPanel Grid.Column="1">
                                <TextBlock Text="{Binding ModelName}" FontSize="16" FontWeight="Bold"></TextBlock>
                                <TextBlock Text="{Binding ModelNumber}" ></TextBlock>
                                <TextBlock Text="{Binding UnitCost, StringFormat={}{0:C2}}" ></TextBlock>
                            </StackPanel>
                        </Grid>
                    </Border>
                </DataTemplate>
            </local:TitleView.ItemTemplate>
        </local:TitleView>
        <local:TitleView x:Key="ImageView" SelectedBackgroundBrush="LawnGreen" SelectedForegroundBrush="Blue">
            <DataTemplate>
                <Border BorderBrush="Chocolate" BorderThickness="2" Margin="3" Padding="5">
                    <StackPanel Width="100">
                        <Image Source="/Img/2.jpg" Stretch="Fill"></Image>
                        <TextBlock Text="{Binding ModelName}" TextWrapping="Wrap"></TextBlock>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </local:TitleView>
    </Window.Resources>
  • 在GridView中的GridViewColumn既设置属性DisplayMember也设置属性CellTemplate,那么GridViewColumn将会使用DisplayMember而忽略CellTemplate。

6,代码

cs 复制代码
 public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            listview01.ItemsSource = DbStore.DAL.Factory.ProductsDal.QueryAll();
            combo01.SelectedIndex = 0;
        }

        private void combo01_Selected(object sender, RoutedEventArgs e)
        {
            //获取选中的模式
            string str = combo01.SelectedItem.ToString();
            ViewBase view = this.Resources[str] as ViewBase;
            listview01.View = view;
            
        }
    }

7,Demo链接

https://download.csdn.net/download/lingxiao16888/89280022

相关推荐
未来之窗软件服务7 小时前
幽冥大陆(二)RDIFSDK 接口文档:布草洗涤厂高效运营的技术桥梁C#—东方仙盟
开发语言·c#·rdif·仙盟创梦ide·东方仙盟
1uther7 小时前
Unity核心概念⑨:Screen
开发语言·游戏·unity·c#·游戏引擎
阿幸软件杂货间8 小时前
Office转PDF转换器v1.0.py
开发语言·pdf·c#
sali-tec9 小时前
C# 基于halcon的视觉工作流-章34-环状测量
开发语言·图像处理·算法·计算机视觉·c#
玉面小君9 小时前
从 WPF 到 Avalonia 的迁移系列实战篇6:Trigger、MultiTrigger、DataTrigger 的迁移
wpf·avalonia
Tiger_shl9 小时前
【层面一】C#语言基础和核心语法-02(反射/委托/事件)
开发语言·c#
mudtools13 小时前
.NET驾驭Word之力:COM组件二次开发全攻略之连接Word与创建你的第一个自动化文档
后端·c#
王维志14 小时前
LiteDB详解
数据库·后端·mongodb·sqlite·c#·json·database
程序猿多布15 小时前
XLua教程之热补丁技术
unity·c#·lua·xlua
咕白m62516 小时前
C# Excel 读取入门教程:免费实现方法
c#·.net