Question

我正在创建一个应用程序，其中图像保存在文件夹中。我希望我的表单中的文件夹图标设置如下。这有点像画廊，缩略图代表下面给出的文件夹图标。：

我的文件夹包含图片，我想要从该文件夹中包含的图像设置文件夹预览。我如何在WPF中实现这一目标？这里给出了实际的表格。

Answer 1

我在这上花了大约一个小时，似乎是一个很酷的挑战。我创建了一个用户控件，它接受两个ImageSources FirstImage和SecondImage。

用户控制XAML：

<UserControl x:Class="WpfApplication5.ImageFolder"
         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:local="clr-namespace:WpfApplication5"
         mc:Ignorable="d" Width="64" Height="64" DataContext="{Binding RelativeSource={RelativeSource Self}}"
         >
<Grid>
    <Viewbox HorizontalAlignment="Left" >
        <Canvas Name="svg2" Width="269.29134" Height="396.85038">
            <Canvas.RenderTransform>
                <TranslateTransform X="0" Y="0"/>
            </Canvas.RenderTransform>
            <Canvas Name="layer1">
                <Canvas.RenderTransform>
                    <TranslateTransform X="0" Y="-655.51183"/>
                </Canvas.RenderTransform>
                <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="rect3336" Fill="#FFFFDD00" StrokeThickness="1.09853339" Stroke="#FF000000" StrokeMiterLimit="4" StrokeLineJoin="Round" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat">
                    <Path.Data>
                        <PathGeometry Figures="m 0.54926665 657.22566 0 334.57177 239.00742335 0 c 24.95946 1.8505 29.46623 -4.51136 29.46623 -33.1005 l 0 -264.62615 c 0.93911 -33.3285 -0.56051 -36.84512 -27.44668 -36.84512 z" FillRule="evenodd"/>
                    </Path.Data>
                </Path>
            </Canvas>
        </Canvas>
    </Viewbox>
    <Viewport3D Name="viewport3D1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Viewport3D.Camera>
            <PerspectiveCamera x:Name="cam" FarPlaneDistance="25" UpDirection="0,1,0" NearPlaneDistance="1" FieldOfView="50" LookDirection="0,0,-0.1" Position="1,0,2" />
        </Viewport3D.Camera>
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <AmbientLight x:Name="AmbLight" />
            </ModelVisual3D.Content>
        </ModelVisual3D>
                    <ModelVisual3D x:Name="MyModel">
            <ModelVisual3D.Content>
                <GeometryModel3D>
                    <GeometryModel3D.Geometry>
                        <MeshGeometry3D x:Name="meshMain" 
                            Positions="0.1 0.8 0  1.6 0.5 0  0.1 -0.3 0  1.6 -.6 0"   TextureCoordinates="0 0  1 0  0 1  1 1 "  TriangleIndices="0 2 1  1 2 3" />
                    </GeometryModel3D.Geometry>
                    <GeometryModel3D.Material>
                        <DiffuseMaterial x:Name="matDiffuseMain">
                            <DiffuseMaterial.Brush>
                                <ImageBrush  TileMode="Tile"  ImageSource="{Binding SecondImage}"    Stretch="UniformToFill"  AlignmentX="Left" AlignmentY="Top" />
                            </DiffuseMaterial.Brush>
                        </DiffuseMaterial>
                    </GeometryModel3D.Material>
                </GeometryModel3D>
            </ModelVisual3D.Content>
        </ModelVisual3D>
        <ModelVisual3D x:Name="MyModel2">
            <ModelVisual3D.Content>
                <GeometryModel3D>
                    <GeometryModel3D.Geometry>
                        <MeshGeometry3D x:Name="meshMain2" 
                            Positions="0.1 0.8 0  1.3 0.2 0  0.1 -0.4 0  1.3 -.9 0" TextureCoordinates="0 0  1 0  0 1  1 1 "  TriangleIndices="0 2 1  1 2 3" />
                    </GeometryModel3D.Geometry>
                    <GeometryModel3D.Material>
                        <DiffuseMaterial x:Name="matDiffuseMain2">
                            <DiffuseMaterial.Brush>
                                <ImageBrush  TileMode="Tile"  ImageSource="{Binding FirstImage}"    Stretch="UniformToFill"  AlignmentX="Left" AlignmentY="Top" />
                            </DiffuseMaterial.Brush>
                        </DiffuseMaterial>
                    </GeometryModel3D.Material>
                </GeometryModel3D>
            </ModelVisual3D.Content>
        </ModelVisual3D>
    </Viewport3D>
    <Viewbox Opacity=".9" HorizontalAlignment="Left" >
        <Canvas Name="svg3" Width="269.29134" Height="396.85038">
            <Canvas.RenderTransform>
                <TranslateTransform X="0" Y="0"/>
            </Canvas.RenderTransform>
            <Canvas Name="layer2">
                <Canvas.RenderTransform>
                    <TranslateTransform X="0" Y="-655.51183"/>
                </Canvas.RenderTransform>

                <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="rect33367" Fill="#FFFFDD00" StrokeThickness="0.85550147" Stroke="#FF000000" StrokeMiterLimit="4" StrokeLineJoin="Round" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat">
                    <Path.Data>
                        <PathGeometry Figures="m 1.0899167 656.51237 0 334.7718 114.5306633 57.62143 c 15.12832 1.8517 22.51282 -0.4776 21.90056 -22.0085 l 2.02031 -119.99685 11.74957 5.10893 c 8.27938 5.41357 10.47378 -1.16744 10.47378 -10.1597 l -1.01015 -136.70624 c 0 0 2.69072 -26.76563 -16.63587 -36.86716 z" FillRule="evenodd"/>
                    </Path.Data>
                </Path>
            </Canvas>
        </Canvas>
    </Viewbox>
</Grid>

用户控制代码背后：

public partial class ImageFolder : UserControl
{
    public static DependencyProperty SecondImageProperty = DependencyProperty.Register("SecondImage", typeof(ImageSource), typeof(ImageFolder), new FrameworkPropertyMetadata(new PropertyChangedCallback(SecondImage_Changed)));
    public static DependencyProperty FirstImageProperty = DependencyProperty.Register("FirstImage", typeof(ImageSource), typeof(ImageFolder), new FrameworkPropertyMetadata(new PropertyChangedCallback(FirstImage_Changed)));

    public ImageSource FirstImage
    {
        get { return (ImageSource)GetValue(FirstImageProperty); }
        set { SetValue(FirstImageProperty, value); }
    }


    private static void FirstImage_Changed(DependencyObject o, DependencyPropertyChangedEventArgs args)
    {
        ImageFolder thisClass = (ImageFolder)o;
        thisClass.SetFirstImage();
    }

    private void SetFirstImage()
    {
        //Put Instance FirstImage Property Changed code here
    }

    public ImageSource SecondImage
    {
        get { return (ImageSource)GetValue(SecondImageProperty); }
        set { SetValue(SecondImageProperty, value); }
    }


    private static void SecondImage_Changed(DependencyObject o, DependencyPropertyChangedEventArgs args)
    {
        ImageFolder thisClass = (ImageFolder)o;
        thisClass.SetSecondImage();
    }

    private void SetSecondImage()
    {
        //Put Instance SecondImage Property Changed code here
    }


    public ImageFolder()
    {
        InitializeComponent();
    }
}

使用用户控制：

<local:ImageFolder Grid.Column="1" Height="64" Width="64" FirstImage="images/YourImageHere1.jpg" SecondImage="images/YourImageHere2.jpg" />

如何在Wpf应用程序中为文件夹视图创建缩略图？

1 个答案: