博客

在C#中实现如图的功能

view的代码

<base:BaseView x:Class="Luman.Tdrc.SampleModule.Test.GaoTest.DemoListPicView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:base="clr-namespace:Luman.Project.ClientShare.Sys.Base;assembly=Luman.Project.ClientShare"
             xmlns:chart="clr-namespace:Luman.Tdrc.EchartsModule.Chart;assembly=Luman.Tdrc.EchartsModule"
             xmlns:demo="clr-namespace:Luman.Tdrc.SampleModule.Test"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <base:BaseView.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Luman.Tdrc.ShareModule;component/Sys/Themes/ResourceDictionary.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </base:BaseView.Resources>
    <base:ViewRoot>
        <Grid>
            <ListBox Name="PicList" Background ="Transparent" ItemsSource="{Binding ItemCollection}"  SelectedItem="{Binding CurItem}"  ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" Margin="39,47,42,37">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="10" Width="100" Height="120">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Image x:Name="EngineerPic" Source="/Luman.Tdrc.SysModule;component/Image/工程师头像2.jpg" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" ToolTip="{Binding ToolTipContext}" MouseEnter="EngineerPic_MouseEnter"/>
                            <TextBlock Text="{Binding EngineerName}" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" Height="20"/>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </base:ViewRoot>
</base:BaseView>


ViewModel的代码


using System.Collections;
using System.Collections.ObjectModel;
using System.Windows;
using Luman.Project.ClientShare.Sys.Base;
using Luman.Tdrc.EchartsModule.Chart;
using Luman.Tdrc.ServerData.MidEntities.Rpa;
using Prism.Commands;
using Prism.Regions;

namespace Luman.Tdrc.SampleModule.Test.GaoTest
{
    public class DemoListPicViewModel : BaseDataGridViewModel<EngineerGroupDetailData>
    {
        public DemoListPicViewModel()
        {
        }

        protected override void RefreshData(NavigationContext navigationContext)
        {
            OnQuery();
        }
       
        public new  ObservableCollection<EngineerGroupDetailData> ItemCollection
        {
            get { return _itemCollection; }
            set { SetProperty(ref _itemCollection, value); }
        }

        public override EngineerGroupDetailData CurItem
        {
            get { return _curItem; }
            set
            {
                SetProperty(ref _curItem, value);               
            }
        }

        protected override void OnQuery()
        {
            DataGridHelp.Where.Clear();
           
            DataGridHelp.InitLoad();
        }

    }
}