用WPF窗体打造个性化界面的图片浏览器

简介: 原文:用WPF窗体打造个性化界面的图片浏览器 本文使用WPF窗体(XAML及C#)与Win Form控件(FolderBrowserDialog)结合的方式, 演示制作了一个简易漂亮的WPF图片浏览器。
原文: 用WPF窗体打造个性化界面的图片浏览器

本文使用WPF窗体(XAML及C#)与Win Form控件(FolderBrowserDialog)结合的方式, 演示制作了一个简易漂亮的WPF图片浏览器。

首先看看运行中的样子:
BrawDraw胶卷式图片浏览器样式

 XAML源码:
<Window x:Class="BrawDraw.Com.FilmEffect.PhotoViewer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="684" Width="643">
    <Canvas Width="612" Height="623">
<!-- 胶片效果的界面XAML -->
        <Canvas>
            <Path Fill="#ff000000" Data="F1 M 440.0,623.6 L 0.0,623.6 L 0.0,0.0 L 440.0,0.0 L 440.0,623.6 Z"/>
            <Path Fill="#ffffffff" Data="F1 M 52.6,78.8 C 52.6,83.6 48.6,87.6 43.8,87.6 L 29.1,87.6 C 24.2,87.6 20.3,83.6 20.3,78.8 L 20.3,54.6 C 20.3,49.7 24.2,45.8 29.1,45.8 L 43.8,45.8 C 48.6,45.8 52.6,49.7 52.6,54.6 L 52.6,78.8 Z"/>
            <Path Fill="#ffffffff" Data="F1 M 125.6,78.8 C 125.6,83.6 121.6,87.6 116.8,87.6 L 102.1,87.6 C 97.2,87.6 93.3,83.6 93.3,78.8 L 93.3,54.6 C 93.3,49.7 97.2,45.8 102.1,45.8 L 116.8,45.8 C 121.6,45.8 125.6,49.7 125.6,54.6 L 125.6,78.8 Z"/>
            <Path Fill="#ffffffff" Data="F1 M 200.1,78.8 C 200.1,83.6 196.1,87.6 191.3,87.6 L 176.6,87.6 C 171.7,87.6 167.8,83.6 167.8,78.8 L 167.8,54.6 C 167.8,49.7 171.7,45.8 176.6,45.8 L 191.3,45.8 C 196.1,45.8 200.1,49.7 200.1,54.6 L 200.1,78.8 Z"/>
            <Path Fill="#ffffffff" Data="F1 M 273.1,78.8 C 273.1,83.6 269.1,87.6 264.3,87.6 L 249.6,87.6 C 244.7,87.6 240.8,83.6 240.8,78.8 L 240.8,54.6 C 240.8,49.7 244.7,45.8 249.6,45.8 L 264.3,45.8 C 269.1,45.8 273.1,49.7 273.1,54.6 L 273.1,78.8 Z"/>
            <Path Fill="#ffffffff" Data="F1 M 347.1,78.8 C 347.1,83.6 343.1,87.6 338.3,87.6 L 323.6,87.6 C 318.7,87.6 314.8,83.6 314.8,78.8 L 314.8,54.6 C 314.8,49.7 318.7,45.8 323.6,45.8 L 338.3,45.8 C 343.1,45.8 347.1,49.7 347.1,54.6 L 347.1,78.8 Z"/>
            <Path Fill="#ffffffff" Data="F1 M 420.1,78.8 C 420.1,83.6 416.1,87.6 411.3,87.6 L 396.6,87.6 C 391.7,87.6 387.8,83.6 387.8,78.8 L 387.8,54.6 C 387.8,49.7 391.7,45.8 396.6,45.8 L 411.3,45.8 C 416.1,45.8 420.1,49.7 420.1,54.6 L 420.1,78.8 Z"/>
            <Canvas>
                <Path Fill="#fff6931b" Data="F1 M 392.0,611.4 L 390.2,611.4 L 390.2,601.3 C 389.8,601.7 389.3,602.1 388.6,602.4 C 387.9,602.8 387.3,603.1 386.8,603.3 L 386.8,601.7 C 387.7,601.3 388.6,600.8 389.3,600.2 C 390.0,599.6 390.6,599.1 390.9,598.5 L 392.0,598.5 L 392.0,611.4 Z"/>
                <Path Fill="#fff6931b" Data="F1 M 398.8,601.8 C 398.8,602.4 399.0,602.9 399.4,603.3 C 399.8,603.6 400.4,603.8 401.1,603.8 C 401.8,603.8 402.3,603.6 402.7,603.3 C 403.2,602.9 403.4,602.4 403.4,601.9 C 403.4,601.3 403.2,600.8 402.7,600.4 C 402.3,600.0 401.7,599.8 401.1,599.8 C 400.4,599.8 399.9,600.0 399.4,600.4 C 399.0,600.8 398.8,601.2 398.8,601.8 Z M 398.2,607.7 C 398.2,608.2 398.3,608.6 398.6,609.0 C 398.8,609.4 399.1,609.8 399.6,610.0 C 400.1,610.2 400.6,610.3 401.1,610.3 C 401.9,610.3 402.6,610.1 403.2,609.6 C 403.7,609.1 404.0,608.5 404.0,607.8 C 404.0,607.0 403.7,606.4 403.1,605.9 C 402.6,605.4 401.9,605.1 401.0,605.1 C 400.2,605.1 399.5,605.4 399.0,605.9 C 398.5,606.3 398.2,607.0 398.2,607.7 Z M 399.1,604.4 C 398.4,604.2 397.9,603.9 397.5,603.4 C 397.2,603.0 397.0,602.4 397.0,601.8 C 397.0,600.9 397.4,600.1 398.1,599.5 C 398.8,598.8 399.8,598.5 401.0,598.5 C 402.3,598.5 403.3,598.8 404.0,599.5 C 404.8,600.1 405.2,600.9 405.2,601.9 C 405.2,602.5 405.0,603.0 404.6,603.4 C 404.3,603.9 403.8,604.2 403.1,604.4 C 403.9,604.7 404.6,605.1 405.1,605.7 C 405.5,606.3 405.7,606.9 405.7,607.7 C 405.7,608.8 405.3,609.8 404.5,610.5 C 403.6,611.3 402.5,611.6 401.1,611.6 C 399.7,611.6 398.6,611.3 397.7,610.5 C 396.9,609.8 396.4,608.8 396.4,607.7 C 396.4,606.9 396.7,606.2 397.1,605.6 C 397.6,605.0 398.3,604.6 399.1,604.4 Z"/>
                <Path Fill="#fff6931b" Data="F1 M 410.7,606.1 L 415.5,606.1 L 414.0,602.6 C 413.6,601.5 413.3,600.6 413.0,599.9 C 412.8,600.7 412.6,601.6 412.2,602.4 L 410.7,606.1 Z M 406.6,611.4 L 412.0,598.6 L 414.1,598.6 L 419.9,611.4 L 417.7,611.4 L 416.1,607.5 L 410.1,607.5 L 408.6,611.4 L 406.6,611.4 Z"/>
            </Canvas>
            <Canvas>
                <Path Fill="#fff6931b" Data="F1 M 202.7,20.0 L 202.7,24.8 C 203.5,24.7 204.0,24.6 204.2,24.5 C 204.4,24.3 204.5,23.9 204.5,23.2 L 204.5,21.6 C 204.5,20.9 204.4,20.4 204.2,20.3 C 204.0,20.1 203.5,20.1 202.7,20.0 Z M 202.7,13.7 L 202.7,17.4 C 202.9,17.4 203.1,17.4 203.2,17.4 C 203.8,17.4 204.1,17.3 204.3,17.1 C 204.4,16.9 204.5,16.3 204.5,15.3 C 204.5,14.7 204.5,14.4 204.3,14.2 C 204.2,13.9 204.0,13.8 203.8,13.8 C 203.6,13.7 203.2,13.7 202.7,13.7 Z M 197.1,10.8 L 202.7,10.8 C 204.4,10.8 205.8,10.9 206.7,11.1 C 207.6,11.3 208.3,11.7 208.9,12.4 C 209.4,13.0 209.7,14.1 209.7,15.6 C 209.7,16.5 209.5,17.2 209.1,17.6 C 208.7,18.0 207.9,18.3 206.8,18.5 C 208.1,18.7 209.0,19.1 209.4,19.7 C 209.9,20.2 210.1,21.0 210.1,22.1 L 210.1,23.7 C 210.1,24.8 209.9,25.7 209.6,26.2 C 209.3,26.8 208.7,27.2 208.0,27.4 C 207.3,27.6 205.8,27.7 203.6,27.7 L 197.1,27.7 L 197.1,10.8 Z"/>
                <Path Fill="#fff6931b" Data="F1 M 217.7,13.7 L 217.7,17.4 C 218.3,17.4 218.8,17.3 219.0,17.2 C 219.3,17.1 219.4,16.6 219.4,15.9 L 219.4,15.0 C 219.4,14.4 219.3,14.1 219.0,13.9 C 218.8,13.7 218.3,13.7 217.7,13.7 Z M 212.1,10.8 L 216.1,10.8 C 218.7,10.8 220.5,10.8 221.4,11.0 C 222.3,11.2 223.1,11.6 223.7,12.2 C 224.3,12.9 224.6,13.9 224.6,15.4 C 224.6,16.7 224.4,17.6 224.0,18.0 C 223.5,18.5 222.7,18.7 221.5,18.8 C 222.6,19.1 223.3,19.3 223.7,19.7 C 224.1,20.1 224.3,20.4 224.4,20.7 C 224.5,21.0 224.6,21.8 224.6,23.2 L 224.6,27.7 L 219.4,27.7 L 219.4,22.0 C 219.4,21.1 219.3,20.6 219.1,20.4 C 218.9,20.1 218.5,20.0 217.7,20.0 L 217.7,27.7 L 212.1,27.7 L 212.1,10.8 Z"/>
                <Path Fill="#fff6931b" Data="F1 M 233.4,21.6 C 233.2,19.7 232.9,17.3 232.6,14.5 C 232.0,17.8 231.7,20.1 231.5,21.6 L 233.4,21.6 Z M 236.4,10.8 L 239.6,27.7 L 233.9,27.7 L 233.6,24.6 L 231.6,24.6 L 231.3,27.7 L 225.5,27.7 L 228.3,10.8 L 236.4,10.8 Z"/>
                <Path Fill="#fff6931b" Data="F1 M 261.1,10.8 L 258.6,27.7 L 251.7,27.7 C 251.0,25.1 250.5,22.1 250.0,18.8 C 249.7,20.2 249.2,23.2 248.4,27.7 L 241.5,27.7 L 238.9,10.8 L 244.4,10.8 L 245.0,16.7 L 245.6,22.4 C 245.8,19.4 246.3,15.5 247.1,10.8 L 252.9,10.8 C 253.0,11.3 253.2,13.1 253.5,16.3 L 254.2,22.8 C 254.5,18.7 255.0,14.7 255.7,10.8 L 261.1,10.8 Z"/>
                <Path Fill="#fff6931b" Data="F1 M 267.9,13.7 L 267.9,24.8 C 268.7,24.8 269.2,24.6 269.3,24.4 C 269.5,24.1 269.6,23.4 269.6,22.3 L 269.6,15.8 C 269.6,15.0 269.6,14.5 269.5,14.3 C 269.5,14.1 269.3,13.9 269.1,13.8 C 268.9,13.7 268.5,13.7 267.9,13.7 Z M 262.3,10.8 L 266.5,10.8 C 269.2,10.8 271.0,10.8 271.9,11.0 C 272.9,11.2 273.6,11.6 274.1,12.0 C 274.6,12.5 274.9,12.9 275.0,13.5 C 275.2,14.0 275.2,15.1 275.2,16.7 L 275.2,22.6 C 275.2,24.2 275.1,25.2 274.9,25.7 C 274.8,26.2 274.4,26.6 274.0,26.9 C 273.5,27.2 273.0,27.4 272.3,27.5 C 271.7,27.6 270.7,27.7 269.3,27.7 L 262.3,27.7 L 262.3,10.8 Z"/>
                <Path Fill="#fff6931b" Data="F1 M 282.9,13.7 L 282.9,17.4 C 283.5,17.4 284.0,17.3 284.2,17.2 C 284.5,17.1 284.6,16.6 284.6,15.9 L 284.6,15.0 C 284.6,14.4 284.5,14.1 284.2,13.9 C 284.0,13.7 283.6,13.7 282.9,13.7 Z M 277.3,10.8 L 281.3,10.8 C 283.9,10.8 285.7,10.8 286.6,11.0 C 287.6,11.2 288.3,11.6 288.9,12.2 C 289.5,12.9 289.8,13.9 289.8,15.4 C 289.8,16.7 289.6,17.6 289.2,18.0 C 288.8,18.5 287.9,18.7 286.7,18.8 C 287.8,19.1 288.6,19.3 288.9,19.7 C 289.3,20.1 289.6,20.4 289.7,20.7 C 289.7,21.0 289.8,21.8 289.8,23.2 L 289.8,27.7 L 284.6,27.7 L 284.6,22.0 C 284.6,21.1 284.5,20.6 284.3,20.4 C 284.2,20.1 283.7,20.0 282.9,20.0 L 282.9,27.7 L 277.3,27.7 L 277.3,10.8 Z"/>
                <Path Fill="#fff6931b" Data="F1 M 298.7,21.6 C 298.4,19.7 298.1,17.3 297.8,14.5 C 297.3,17.8 296.9,20.1 296.7,21.6 L 298.7,21.6 Z M 301.6,10.8 L 304.8,27.7 L 299.1,27.7 L 298.8,24.6 L 296.8,24.6 L 296.5,27.7 L 290.7,27.7 L 293.6,10.8 L 301.6,10.8 Z"/>
                <Path Fill="#fff6931b" Data="F1 M 326.3,10.8 L 323.9,27.7 L 316.9,27.7 C 316.3,25.1 315.7,22.1 315.2,18.8 C 314.9,20.2 314.4,23.2 313.6,27.7 L 306.7,27.7 L 304.2,10.8 L 309.6,10.8 L 310.2,16.7 L 310.8,22.4 C 311.0,19.4 311.5,15.5 312.3,10.8 L 318.1,10.8 C 318.2,11.3 318.4,13.1 318.7,16.3 L 319.4,22.8 C 319.7,18.7 320.2,14.7 320.9,10.8 L 326.3,10.8 Z"/>
            </Canvas>
            <Canvas>
                <Path Fill="#fff6931b" Data="F1 M 351.7,26.6 C 350.7,26.9 348.8,27.4 347.0,27.4 C 344.4,27.4 342.6,26.7 341.3,25.4 C 340.0,24.0 339.3,22.1 339.3,19.8 C 339.4,14.8 342.7,11.9 347.3,11.9 C 349.1,11.9 350.5,12.2 351.2,12.6 L 350.5,15.4 C 349.8,15.0 348.8,14.7 347.3,14.7 C 344.7,14.7 342.7,16.3 342.7,19.6 C 342.7,22.8 344.5,24.6 347.1,24.6 C 347.8,24.6 348.4,24.5 348.6,24.4 L 348.6,21.2 L 346.5,21.2 L 346.5,18.5 L 351.7,18.5 L 351.7,26.6 Z"/>
                <Path Fill="#fff6931b" Data="F1 M 364.4,26.8 C 363.8,27.1 362.5,27.5 360.8,27.5 C 356.0,27.5 353.5,24.2 353.5,19.8 C 353.5,14.6 356.9,11.8 361.1,11.8 C 362.7,11.8 364.0,12.1 364.5,12.4 L 363.9,15.2 C 363.3,14.9 362.4,14.6 361.2,14.6 C 358.7,14.6 356.8,16.2 356.8,19.7 C 356.8,22.7 358.4,24.6 361.2,24.6 C 362.2,24.6 363.3,24.4 363.9,24.1 L 364.4,26.8 Z"/>
                <Path Fill="#fff6931b" Data="F1 M 375.7,21.2 L 375.7,17.9 C 375.7,17.0 375.7,16.1 375.8,15.2 L 375.7,15.2 C 375.3,16.1 374.9,17.0 374.5,17.9 L 372.7,21.1 L 372.7,21.2 L 375.7,21.2 Z M 375.7,27.3 L 375.7,23.7 L 369.7,23.7 L 369.7,21.5 L 374.8,12.6 L 378.7,12.6 L 378.7,21.2 L 380.3,21.2 L 380.3,23.7 L 378.7,23.7 L 378.7,27.3 L 375.7,27.3 Z"/>
                <Path Fill="#fff6931b" Data="F1 M 386.5,24.9 C 387.7,24.9 388.4,23.2 388.4,19.9 C 388.4,16.6 387.8,14.9 386.5,14.9 C 385.3,14.9 384.6,16.6 384.6,19.9 C 384.6,23.3 385.3,24.9 386.5,24.9 L 386.5,24.9 Z M 386.5,27.5 C 383.0,27.5 381.5,24.1 381.4,19.9 C 381.4,15.7 383.1,12.3 386.6,12.3 C 390.2,12.3 391.6,15.8 391.6,19.8 C 391.6,24.4 389.9,27.5 386.5,27.5 L 386.5,27.5 Z"/>
                <Path Fill="#fff6931b" Data="F1 M 398.0,24.9 C 399.2,24.9 399.9,23.2 399.9,19.9 C 399.9,16.6 399.3,14.9 398.0,14.9 C 396.8,14.9 396.1,16.6 396.1,19.9 C 396.1,23.3 396.8,24.9 398.0,24.9 L 398.0,24.9 Z M 398.0,27.5 C 394.5,27.5 393.0,24.1 392.9,19.9 C 392.9,15.7 394.6,12.3 398.1,12.3 C 401.7,12.3 403.1,15.8 403.1,19.8 C 403.1,24.4 401.4,27.5 398.0,27.5 L 398.0,27.5 Z"/>
                <Path Fill="#fff6931b" Data="F1 M 409.8,20.2 L 409.8,22.5 L 404.4,22.5 L 404.4,20.2 L 409.8,20.2 Z"/>
                <Path Fill="#fff6931b" Data="F1 M 416.2,14.6 C 415.1,14.6 414.6,15.4 414.6,16.3 C 414.6,17.3 415.4,18.0 416.5,18.3 C 417.2,18.1 417.8,17.4 417.8,16.5 C 417.8,15.5 417.4,14.6 416.2,14.6 L 416.2,14.6 Z M 416.2,25.1 C 417.3,25.1 418.1,24.3 418.1,23.3 C 418.1,22.0 417.2,21.2 416.0,20.9 C 414.9,21.2 414.3,22.0 414.3,23.1 C 414.3,24.1 415.1,25.1 416.2,25.1 L 416.2,25.1 Z M 416.3,12.3 C 419.4,12.3 420.8,14.3 420.8,16.1 C 420.8,17.4 420.1,18.6 418.8,19.3 L 418.8,19.4 C 420.1,19.9 421.3,21.1 421.3,23.0 C 421.3,25.7 419.2,27.5 416.1,27.5 C 412.7,27.5 411.1,25.4 411.1,23.4 C 411.1,21.6 412.0,20.4 413.5,19.7 L 413.5,19.7 C 412.2,18.9 411.6,17.7 411.6,16.4 C 411.6,14.0 413.6,12.3 416.3,12.3 L 416.3,12.3 Z"/>
            </Canvas>
            <Path Fill="#fff6931b" Data="F1 M 228.5,623.6 L 234.2,623.6 L 234.2,558.2 L 228.5,558.2 L 228.5,623.6 Z M 247.2,577.3 L 247.2,623.6 L 261.0,623.6 L 261.0,577.6 L 249.6,577.6 C 248.7,577.6 248.0,577.5 247.2,577.3 Z M 216.0,623.6 L 221.2,623.6 L 221.2,557.7 L 216.0,557.7 L 216.0,623.6 Z M 268.7,576.4 L 268.7,623.6 L 272.7,623.6 L 272.7,571.3 C 272.1,573.5 270.6,575.3 268.7,576.4 Z M 206.5,623.6 L 212.7,623.6 L 212.7,557.9 L 206.5,557.9 L 206.5,623.6 Z M 332.2,577.6 L 332.2,623.6 L 334.2,623.6 L 334.2,577.6 L 332.2,577.6 Z M 189.5,577.6 L 189.5,623.6 L 193.0,623.6 L 193.0,577.4 C 192.4,577.5 191.9,577.6 191.3,577.6 L 189.5,577.6 Z M 323.5,577.6 L 323.5,623.6 L 327.5,623.6 L 327.5,577.6 L 323.6,577.6 C 323.5,577.6 323.5,577.6 323.5,577.6 Z M 293.5,623.6 L 300.0,623.6 L 300.0,558.9 L 293.5,558.9 L 293.5,623.6 Z M 277.0,623.6 L 291.0,623.6 L 291.0,559.4 L 277.0,559.4 L 277.0,623.6 Z M 314.8,568.8 L 314.8,544.6 C 314.8,543.5 315.0,542.4 315.4,541.4 L 308.7,541.4 L 308.7,623.6 L 318.2,623.6 L 318.2,575.7 C 316.1,574.1 314.8,571.6 314.8,568.8 Z M 200.1,544.6 L 200.1,568.8 C 200.1,570.5 199.6,572.1 198.7,573.5 L 198.7,623.6 L 201.2,623.6 L 201.2,540.7 L 199.1,540.7 C 199.7,541.9 200.1,543.2 200.1,544.6 Z M 65.0,623.6 L 71.2,623.6 L 71.2,557.4 L 65.0,557.4 L 65.0,623.6 Z M 32.2,623.6 L 41.3,623.6 L 41.3,577.6 L 32.2,577.6 L 32.2,623.6 Z M 52.6,544.6 L 52.6,568.8 C 52.6,572.3 50.5,575.3 47.6,576.7 L 47.6,623.6 L 53.1,623.6 L 53.1,541.4 L 52.0,541.4 C 52.4,542.4 52.6,543.5 52.6,544.6 Z M 5.0,623.6 L 9.0,623.6 L 9.0,559.4 L 5.0,559.4 L 5.0,623.6 Z M 20.3,568.8 L 20.3,544.6 C 20.3,543.5 20.5,542.4 20.9,541.4 L 18.0,541.4 L 18.0,559.4 L 14.0,559.4 L 14.0,623.6 L 27.5,623.6 L 27.5,577.4 C 23.4,576.7 20.3,573.1 20.3,568.8 Z M 167.8,568.8 L 167.8,568.7 L 166.7,568.7 L 166.7,623.6 L 176.5,623.6 L 176.5,577.6 C 171.6,577.5 167.8,573.6 167.8,568.8 Z M 137.0,623.6 L 142.5,623.6 L 142.5,557.4 L 137.0,557.4 L 137.0,623.6 Z M 150.7,623.6 L 162.7,623.6 L 162.7,558.7 L 150.7,558.7 L 150.7,623.6 Z M 98.9,577.0 L 98.9,542.6 L 90.4,542.6 L 90.4,559.4 L 82.5,559.4 L 82.5,623.6 L 91.5,623.6 L 91.5,581.0 L 96.5,581.0 L 96.5,623.6 L 103.2,623.6 L 103.2,577.6 L 102.1,577.6 C 101.0,577.6 99.9,577.4 98.9,577.0 Z M 125.6,544.6 L 125.6,568.8 C 125.6,572.6 123.1,575.9 119.7,577.1 L 119.7,623.6 L 130.2,623.6 L 130.2,541.2 L 124.9,541.2 C 125.3,542.2 125.6,543.4 125.6,544.6 Z M 105.7,623.6 L 110.5,623.6 L 110.5,577.6 L 105.7,577.6 L 105.7,623.6 Z"/>
            <Path Fill="#ffffffff" Data="F1 M 117.1,536.2 L 102.4,536.2 C 97.5,536.2 93.6,540.1 93.6,545.0 L 93.6,569.1 C 93.6,574.0 97.5,577.9 102.4,577.9 L 117.1,577.9 C 122.0,577.9 125.9,574.0 125.9,569.1 L 125.9,545.0 C 125.9,540.1 122.0,536.2 117.1,536.2 Z"/>
            <Path Fill="#ffffffff" Data="F1 M 191.6,536.2 L 176.9,536.2 C 172.0,536.2 168.1,540.1 168.1,545.0 L 168.1,569.1 C 168.1,574.0 172.0,577.9 176.9,577.9 L 191.6,577.9 C 196.5,577.9 200.4,574.0 200.4,569.1 L 200.4,545.0 C 200.4,540.1 196.5,536.2 191.6,536.2 Z"/>
            <Path Fill="#ffffffff" Data="F1 M 264.6,536.2 L 249.9,536.2 C 245.0,536.2 241.1,540.1 241.1,545.0 L 241.1,569.1 C 241.1,574.0 245.0,577.9 249.9,577.9 L 264.6,577.9 C 269.5,577.9 273.4,574.0 273.4,569.1 L 273.4,545.0 C 273.4,540.1 269.5,536.2 264.6,536.2 Z"/>
            <Path Fill="#ffffffff" Data="F1 M 411.6,536.2 L 396.9,536.2 C 392.0,536.2 388.1,540.1 388.1,545.0 L 388.1,569.1 C 388.1,574.0 392.0,577.9 396.9,577.9 L 411.6,577.9 C 416.5,577.9 420.4,574.0 420.4,569.1 L 420.4,545.0 C 420.4,540.1 416.5,536.2 411.6,536.2 Z"/>
            <Path StrokeThickness="5.0" Stroke="#fff6931b" StrokeMiterLimit="1.0" Data="F1 M 94.0,542.9 C 93.7,543.7 93.6,544.6 93.6,545.5 L 93.6,569.6 C 93.6,574.5 97.5,578.4 102.4,578.4 L 117.1,578.4 C 122.0,578.4 125.9,574.5 125.9,569.6 L 125.9,545.5 C 125.9,544.6 125.8,543.7 125.5,542.9"/>
            <Path StrokeThickness="5.0" Stroke="#fff6931b" StrokeMiterLimit="1.0" Data="F1 M 168.3,571.6 C 169.2,575.5 172.7,578.4 176.9,578.4 L 191.6,578.4 C 196.5,578.4 200.4,574.5 200.4,569.6 L 200.4,545.5 C 200.4,542.8 199.2,540.4 197.3,538.7"/>
            <Path StrokeThickness="5.0" Stroke="#fff6931b" StrokeMiterLimit="1.0" Data="F1 M 21.3,542.1 C 20.8,543.1 20.6,544.3 20.6,545.5 L 20.6,569.6 C 20.6,574.5 24.5,578.4 29.4,578.4 L 44.1,578.4 C 48.8,578.4 52.6,574.8 52.9,570.2"/>
            <Path StrokeThickness="5.0" Stroke="#fff6931b" StrokeMiterLimit="1.0" Data="F1 M 315.1,545.5 L 315.1,569.6 C 315.1,572.2 316.2,574.5 317.9,576.1 L 319.0,576.9 C 320.4,577.9 322.1,578.4 323.9,578.4 L 338.6,578.4 C 340.4,578.4 342.1,577.9 343.5,576.9"/>
            <Path Fill="#ffffffff" Data="F1 M 44.1,536.2 L 29.4,536.2 C 24.5,536.2 20.6,540.1 20.6,545.0 L 20.6,569.1 C 20.6,574.0 24.5,577.9 29.4,577.9 L 44.1,577.9 C 49.0,577.9 52.9,574.0 52.9,569.1 L 52.9,545.0 C 52.9,540.1 49.0,536.2 44.1,536.2 Z"/>
            <Path Fill="#ffffffff" Data="F1 M 338.6,536.2 L 323.9,536.2 C 319.0,536.2 315.1,540.1 315.1,545.0 L 315.1,569.1 C 315.1,574.0 319.0,577.9 323.9,577.9 L 338.6,577.9 C 343.5,577.9 347.4,574.0 347.4,569.1 L 347.4,545.0 C 347.4,540.1 343.5,536.2 338.6,536.2 Z"/>

<!-- 图片显示,这里设置了一个初始的图片文件路径, 根据需要进行改写 -->
            <Image Source="E:/WPF_Book/Chapter 20/FilmEffect/HuangXiaoLinPhoto05.JPG" Canvas.Left="12" Canvas.Top="92" Height="432" Name="imageBox" Stretch="Uniform" Width="418" />

<!-- 用于选择图片的ListBox -->
            <ListBox Canvas.Left="444" Canvas.Top="57" Height="431" Name="listBoxPhotos" Width="168"  SelectionChanged="listBoxPhotos_SelectionChanged" />
        </Canvas>

<!-- CheckBox及按钮 -->
        <CheckBox Canvas.Left="444" Canvas.Top="35" Height="16" Name="rBtnIncludeChild" Width="120">Include Sub-Dir</CheckBox>
        <Button Canvas.Left="444" Canvas.Top="4.7" Height="23" Name="btnSelectFolder" Width="101" Click="btnSelectFolder_Click">选择图片文件夹</Button>
    </Canvas>
</Window>

对应的C#源码:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Forms;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace BrawDraw.Com.FilmEffect
{
    /// <summary>
    /// Interaction logic for PhotoViewer.xaml
    /// </summary>
    public partial class PhotoViewer :  Window
    {
        public PhotoViewer()
        {
            InitializeComponent();
        }

        string selectedPath = string.Empty;
        string getFilesFilter = "*.jpg;*.jpeg;*.jpe;*.gif;*.bmp;*.png;";

        private void btnSelectFolder_Click(object sender, RoutedEventArgs e)
        {
            // 这里使用了Window Forms中的文件夹选取对话框
            FolderBrowserDialog dlgFolder = new FolderBrowserDialog();

            dlgFolder.SelectedPath = @"C:/Photo_Frame/BurnedDisk";
            dlgFolder.RootFolder = Environment.SpecialFolder.MyComputer;

           if (System.Windows.Forms.DialogResult.OK == dlgFolder.ShowDialog())
            {
                selectedPath = dlgFolder.SelectedPath;
                // 使用OpenFilesDirs()读取选定文件夹下的所有图片,如果选择包含子目录,则同时读入所有子目录的图片
                OpenFilesDirs(selectedPath);
            }
        }

        private void OpenFilesDirs(string openFilePath)
        {
            string[] arrDirs = Directory.GetDirectories(openFilePath);
            string[] arrFilter = getFilesFilter.Split(';');

            System.IO.DirectoryInfo dirInfo =
                new System.IO.DirectoryInfo(openFilePath);

            for (int i = 0; i < arrFilter.Length; i++)
            {
                System.IO.FileInfo[] files = dirInfo.GetFiles(arrFilter[i]);

                if (files != null)
                {
                    foreach (System.IO.FileInfo file in files)
                    {
                        listBoxPhotos.Items.Add(file.FullName);
                    }
                }
            }

            if ((bool)rBtnIncludeChild.IsChecked)
            {
                if (arrDirs.Length != 0)
                {
                    for (int i = 0; i < arrDirs.Length; i++)
                    {
                         // 递归读取子目录
                        OpenFilesDirs(openFilePath + "//" + System.IO.Path.GetFileName(arrDirs[i]));
                    }
                }
                else
                    return;
            }
        }

        private void listBoxPhotos_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // 由于有些图片暂时仍无法使用WPF的图片解码器进行读取,所以以下的try{}catch(){}语句是必要的
            try
            {
                imageBox.Source = new BitmapImage(new Uri(listBoxPhotos.SelectedValue.ToString(), UriKind.RelativeOrAbsolute));
            }
            catch (Exception exc)
            {
                // 这里使用了一个WPF Window进行错误显示, 如有时间的话,  还可以把它做得更漂亮些.
                Window win = new Window();
                win.Title = "Error!";
                win.Content = exc.Message + ". File name is " + listBoxPhotos.SelectedValue.ToString() ;
                win.ShowDialog();
            }
        }

    }
}

星期八旅行网,“走进大自然,爱上星期八”。春游,漂流,上星期八旅行网。 http://www.eightour.com
目录
相关文章
|
6月前
|
计算机视觉 C++
基于Qt的简易图片浏览器设计与实现
基于Qt的简易图片浏览器设计与实现
284 1
|
JavaScript 对象存储
在阿里云OpenAPI 为什么oss 图片链接, 在浏览器访问直接下载了,不是预览呢?
在阿里云OpenAPI 为什么oss 图片链接, 在浏览器访问直接下载了,不是预览呢?
1283 1
|
3月前
|
XML 缓存 JSON
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
237 0
|
2月前
|
编解码 C# 数据库
C# + WPF 音频播放器 界面优雅,体验良好
【9月更文挑战第18天】这是一个用 C# 和 WPF 实现的音频播放器示例,界面简洁美观,功能丰富。设计包括播放/暂停按钮、进度条、音量控制滑块、歌曲列表和专辑封面显示。功能实现涵盖音频播放、进度条控制、音量调节及歌曲列表管理。通过响应式设计、动画效果、快捷键支持和错误处理,提升用户体验。可根据需求扩展更多功能。
|
3月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
|
3月前
|
机器人 C# 人工智能
智能升级:WPF与人工智能的跨界合作——手把手教你集成聊天机器人,打造互动新体验与个性化服务
【8月更文挑战第31天】聊天机器人已成为现代应用的重要组成部分,提供即时响应、个性化服务及全天候支持。随着AI技术的发展,聊天机器人的功能日益强大,不仅能进行简单问答,还能实现复杂对话管理和情感分析。本文通过具体案例分析,展示了如何在WPF应用中集成聊天机器人,并通过示例代码详细说明其实现过程。使用Microsoft的Bot Framework可以轻松创建并配置聊天机器人,增强应用互动性和用户体验。首先,需在Bot Framework门户中创建机器人项目并编写逻辑。然后,在WPF应用中添加聊天界面,实现与机器人的交互。
86 0
|
3月前
|
C# UED 开发者
WPF动画大揭秘:掌握动画技巧,让你的界面动起来,告别枯燥与乏味!
【8月更文挑战第31天】在WPF应用开发中,动画能显著提升用户体验,使其更加生动有趣。本文将介绍WPF动画的基础知识和实现方法,包括平移、缩放、旋转等常见类型,并通过示例代码展示如何使用`DoubleAnimation`创建平移动画。此外,还将介绍动画触发器的使用,帮助开发者更好地控制动画效果,提升应用的吸引力。
134 0
|
3月前
|
容器 C# 开发者
XAML语言大揭秘:WPF标记的魅力所在,让你轻松实现界面与逻辑分离,告别复杂代码!
【8月更文挑战第31天】XAML提供了一种直观且易于维护的界面设计方式,使得开发者可以专注于逻辑和业务代码的编写,而无需关心界面细节。通过数据绑定、布局管理和动画效果等特性,XAML可以实现丰富的界面交互和视觉效果。在实际开发过程中,开发者应根据具体需求选择合适的技术方案,以确保应用程序能够满足用户的需求。希望本文的内容能够帮助您在WPF应用程序开发中更好地利用XAML语言。
41 0
|
3月前
|
数据处理 开发者 C#
WPF数据绑定实战:从零开始,带你玩转数据与界面同步,让你的应用程序更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,数据绑定是核心技能之一,它能实现界面元素与数据源的同步更新。本文详细介绍了WPF数据绑定的概念与实现方法,包括属性绑定、元素绑定及路径绑定等技术,并通过示例代码展示了如何创建数据绑定。通过数据绑定,开发者不仅能简化代码、提高可维护性,还能提升用户体验。无论初学者还是有经验的开发者,都能从中受益,更好地掌握WPF数据绑定技巧。
65 0
|
5月前
|
Web App开发 JavaScript 前端开发
使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?
115 1
使用 JS 实现在浏览器控制台打印图片 console.image()