HandyControl应用之本地图片查看器

简介: HandyControl应用之本地图片查看器

本次案例主要使用了HC中的 WaterfallPanelDrawerSimplePanel

实际效果如下:

一、准备工作

使用 HC 开始的第一步是,WPF项目引入库依赖,然后 App.xaml 引入全局资源字典。

<Application x:Class="WPFImageExplorer.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

二、控件样式

1、绑定代理类 BindingProxy

public class BindingProxy : Freezable
    {
        protected override Freezable CreateInstanceCore()
        {
            return new BindingProxy();
        }
        public object Data
        {
            get { return (object)GetValue(DataProperty); }
            set { SetValue(DataProperty, value); }
        }
        public static readonly DependencyProperty DataProperty =
            DependencyProperty.Register("Data", typeof(object), typeof(BindingProxy), new UIPropertyMetadata(null));
    }

2、父级资源

<local:BindingProxy x:Key="ImageLst" Data="{Binding ElementName=ImageLst, Mode=OneWay}"></local:BindingProxy>
        <Style x:Key="ListBoxItem.Common" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Cursor" Value="Hand"/>
            <Setter  Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
        </Style>
        <Style x:Key="ListBox.Large" BasedOn="{StaticResource ListBoxCustom}" TargetType="{x:Type ListBox}">
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="ItemContainerStyle" Value="{StaticResource ListBoxItem.Common}"/>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <hc:WaterfallPanel AutoGroup="True" DesiredLength="210" ></hc:WaterfallPanel>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate DataType="{x:Type vm:ImageObject}">
                        <Border Padding="0,4" MinWidth="210"  MinHeight="210">
                            <DockPanel x:Name="Content" MaxWidth="210"  MaxHeight="210">
                                <TextBlock TextBlock.TextAlignment="Center" TextWrapping="Wrap" Text="{Binding Name}" DockPanel.Dock="Bottom"></TextBlock>
                                <Image Stretch="Uniform" Margin="0,4" ToolTip="{Binding Name}" VerticalAlignment="Bottom" Source="{Binding Path}">
                                    <Image.Effect>
                                        <DropShadowEffect ShadowDepth="2" BlurRadius="10" Direction="270" Color="Black" Opacity="0.4"></DropShadowEffect>
                                    </Image.Effect>
                                </Image>
                            </DockPanel>
                        </Border>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ListBox.Normal" BasedOn="{StaticResource ListBoxCustom}" TargetType="{x:Type ListBox}">
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="ItemContainerStyle" Value="{StaticResource ListBoxItem.Common}"/>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <hc:WaterfallPanel AutoGroup="True" DesiredLength="210" ></hc:WaterfallPanel>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate DataType="{x:Type vm:ImageObject}">
                        <DockPanel ToolTip="{Binding Name}" MinWidth="210"  MinHeight="210">
                            <TextBlock TextBlock.TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" Text="{Binding Name}" DockPanel.Dock="Right"></TextBlock>
                            <Image Stretch="Uniform" Margin="5"  Width="100" Height="100" HorizontalAlignment="Left" VerticalAlignment="Center" Source="{Binding Path}">
                            </Image>
                        </DockPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>

3、控件布局

<DockPanel>
        <hc:Drawer Name="DrawerLeft" Dock="Right" ShowMode="Cover">
            <hc:SimplePanel>
                <Border BorderThickness="0" BorderBrush="Transparent" Background="{DynamicResource RegionBrush}" Width="{Binding Data.ActualWidth, Source={StaticResource ImageLst}}">
                    <hc:ImageViewer Name="ImageViewer"></hc:ImageViewer>
                </Border>
                <Button Cursor="Hand" Command="hc:ControlCommands.Close" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="{DynamicResource PrimaryTextBrush}" Opacity="0.5" Style="{DynamicResource ButtonIcon}" hc:IconElement.Geometry="{DynamicResource DeleteFillCircleGeometry}"/>
            </hc:SimplePanel>
        </hc:Drawer>
        <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" HorizontalAlignment="Center">
            <Button x:Name="btn_selected" Content="加载" Click="btn_selected_Click"></Button>
            <hc:ButtonGroup Style="{DynamicResource ButtonGroupSolid}">
                <RadioButton Style="{StaticResource ToggleButtonIcon}" hc:IconElement.Geometry="{DynamicResource AllGeometry}" Tag="Normal" x:Name="btn_nomal" Checked="btn_nomal_Checked"></RadioButton>
                <RadioButton Style="{StaticResource ToggleButtonIcon}" hc:IconElement.Geometry="{DynamicResource FatalGeometry}" Tag="Large" x:Name="btn_large" Checked="btn_nomal_Checked"></RadioButton>
            </hc:ButtonGroup>
        </StackPanel>
        <ListBox x:Name="ImageLst"  Padding="0" MinWidth="210" Style="{StaticResource ListBox.Normal}" SelectionChanged="ImageLst_Selected" d:ItemsSource="{d:SampleData ItemCount=5}">         
   </ListBox>
</DockPanel>

三、数据实体

1、数据实体

public class ImageObject
    {
        public ImageObject(FileInfo file)
        {
            Name = file.Name;
            Path = file.FullName;
            ModifyDate = file.LastWriteTime;
        }
        public string Name { get; set; }
        public string Path { get; set; }
        public DateTime ModifyDate { get; set; }
    }
    public class ImageCollection : Collection<ImageObject>
    {

2、加载数据

string folder = @"图片物理路径";
DateTime startdate = DateTime.Parse("2015/01/01");
DateTime enddate = DateTime.Parse("2022/02/01");
System.IO.FileInfo[] files = new System.IO.DirectoryInfo(folder).GetFiles("*.jpg").Where(x => x.LastWriteTime >= startdate && x.LastWriteTime <= enddate).OrderBy(x => x.LastWriteTime).Take(100).ToArray();
int count = files.Length;
ImageCollection images = new ImageCollection();
for (int i = 0; i < count; i++)
{
    images.Add(new ImageObject(files[i]));
}
ImageLst.ItemsSource = images;

3、样式切换

RadioButton radioButton = sender as RadioButton;
 if (radioButton != null)
{
    string tag = radioButton.Tag?.ToString();
    if (string.IsNullOrEmpty(tag))
    {
        return;
    }
    string strkey = $"ListBox.{tag}";
    var keystyle = FindResource(strkey) as Style;
    if (keystyle != null) {
        ImageLst.Style = keystyle;
    }
}

相关文章
WPF常用UI库和图标库(MahApps、HandyControl、LiveCharts)
WPF有很多开源免费的UI库,本文主要介绍常见的MahApps、HandyControl两个UI库;在开发过程中经常会涉及到图表的开发,本文主要介绍LiveCharts开源图表库。
Axure 安装图标字体元件库
学习Axure 安装图标字体元件库。
302 0
Axure 安装图标字体元件库
andorid 修改字体一文搞定
本文首发于公众号“AntDream”,欢迎微信搜索“AntDream”或扫描文章底部二维码关注,和我一起每天进步一点点 替换字体也是一个比较常见的需求,一般分几种情况。实现起来也不麻烦,这里简单记录下 全局替换字体 步骤1 assets目录下拷贝字体文件 步骤2 application中替换默认字...
1483 0
|
Web App开发 C# Windows
制作一个简单的WPF图片浏览器
原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动。先看效果: 这里实现了以下几个功能:1.  对指定文件夹下所有JPG文件进行预览2.  对选定图片进行旋转3.  对选定图片进行灰度处理4.  对选定图片进行裁切处理5.  无限制的恢复功能6. 类似加入购物车的功能以下来看看其实现过程。
992 0
|
C#
WPF中桌面屏保的制作(主要代码)
原文:WPF中桌面屏保的制作(主要代码) 制作要点:(1) 使用System.Windows.Threading.DispatcherTimer;(2) 将Window属性设置为:      this.WindowState = WindowState.Maximized;      this.WindowStyle = WindowStyle.None;      this.ResizeMode = ResizeMode.NoResize;(3) 按ESC键时,关闭窗口。
844 0
|
Web App开发 算法 C#
WPF 控件库——仿制Chrome的ColorPicker
原文:WPF 控件库——仿制Chrome的ColorPicker 一、观察   项目中的一个新需求,需要往控件库中添加颜色拾取器控件,因为公司暂时还没有UI设计大佬入住,所以就从网上开始找各种模样的ColorPicker,找来找去我就看上了谷歌浏览器自带的,它长这个样:         看上去不错,可以搞!搞之前得观察一下这里面可能的一些坑。
1460 0
|
C# UED 自然语言处理
在WPF中实现图片一边下载一边显示
原文 在WPF中实现图片一边下载一边显示 当我们上网查看一个较大的图片时,浏览器能一边下载一边显示,这样用户体验是比较好的,但在WPF程序中,当我们通过如下方式显示一幅图片时:     img.Source = new BitmapImage(new Uri("http://localhost:8000/www/test.jpg")); 只能等到图片下载完成时才能显示出来,当图片较大时需要等待很久,即使在旁边放个进度条给人的感觉仍然不好。
1070 0
|
API
uwp 获取系统字体库
原文:uwp 获取系统字体库 效果图:   要获取到字体库首先要在 NuGet 添加 SharpDx.Direct2D1  api: /// /// 获取系统字体库列表 /// public void GetFontLibrary() { SharpDX.
1134 0