WPF图片选择浏览

WPF图片选择浏览
程序代码

<Window x:Class="PhotoViewerDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:PhotoViewerDemo"
        mc:Ignorable="d"
        Loaded="OnLoaded"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>

        <!-- Photo Template -->
        <DataTemplate DataType="{x:Type local:Photo}">
            <Grid VerticalAlignment="Center" HorizontalAlignment="Center" Margin="6">
                <!-- Drop Shadow -->
                <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="4"
                        Background="#44000000">
                    <Border.RenderTransform>
                        <TranslateTransform X="5" Y="5" />
                    </Border.RenderTransform>
                    <Border.BitmapEffect>
                        <BlurBitmapEffect Radius="8" />
                    </Border.BitmapEffect>
                </Border>
                <!-- Image Template -->
                <Border Padding="4" Background="White" BorderBrush="#22000000" BorderThickness="1">
                    <StackPanel Orientation="Vertical">
                        <Image Source="{Binding Image.Thumbnail}" />
                        <Label Content="{Binding Metadata.DateImageTaken}">
                            <Label.ToolTip>
                                Only JPeg images with a stored thumbnail will display a thumbnail during preview.
                            </Label.ToolTip>
                        </Label>
                    </StackPanel>
                </Border>
            </Grid>
        </DataTemplate>


        <!-- Main photo catalog view -->
        <Style TargetType="{x:Type ListBox}" x:Key="PhotoListBoxStyle">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBox}">
                        <WrapPanel Margin="5" IsItemsHost="True" Orientation="Horizontal"
                                   ItemHeight="{Binding ElementName=ZoomSlider, Path='Value'}"
                                   ItemWidth="{Binding ElementName=ZoomSlider, Path='Value'}"
                                   VerticalAlignment="Top" HorizontalAlignment="Stretch" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Style for an individual generic item -->
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border SnapsToDevicePixels="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                Background="{TemplateBinding Background}">
                            <ContentPresenter />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="#445B6249" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Removes dotted rectangle focus -->
        <Style TargetType="{x:Type ItemsControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ItemsControl}">
                        <WrapPanel IsItemsHost="True" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- For metadata properties pane -->
        <Style TargetType="{x:Type GroupBox}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupBox}">
                        <Grid>
                            <Border Background="#AAFFFFFF" CornerRadius="4" BorderBrush="#66000000" BorderThickness="1">
                                <Border CornerRadius="4" BorderBrush="#88FFFFFF" BorderThickness="1"
                                        ClipToBounds="true">
                                    <Border CornerRadius="6" BorderThickness="2" BorderBrush="#ABB497">
                                        <Border.BitmapEffect>
                                            <BlurBitmapEffect Radius="6" />
                                        </Border.BitmapEffect>
                                        <Border CornerRadius="6" BorderThickness="2" BorderBrush="#DEF2AD">
                                            <Border.BitmapEffect>
                                                <BlurBitmapEffect Radius="6" />
                                            </Border.BitmapEffect>
                                        </Border>
                                    </Border>
                                </Border>
                            </Border>
                            <ContentPresenter Margin="6" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Default label style -->
        <Style TargetType="{x:Type Label}">
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontSize" Value="11" />
        </Style>

        <!-- Headers for metadata properties -->
        <Style x:Key="MetadataHeader" TargetType="{x:Type Label}">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                        <LinearGradientBrush.GradientStops>
                            <GradientStop Offset="0.5" Color="{x:Static SystemColors.AppWorkspaceColor}" />
                            <GradientStop Offset="2" Color="Transparent" />
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontWeight" Value="Bold" />
        </Style>

        <!-- Data converters for complex fields -->
        <local:ExposureTimeConverter x:Key="ExposureTimeConverterReference" />
        <local:ExposureModeConverter x:Key="ExposureModeConverterReference" />
        <local:FocalLengthConverter x:Key="FocalLengthConverterReference" />
        <local:LensApertureConverter x:Key="LensApertureConverterReference" />
        <local:PhotoSizeConverter x:Key="PhotoSizeConverterReference" />

    </Window.Resources>

    <!-- Master Container -->
    <Grid DataContext="{Binding Source={StaticResource Photos}}"
          Margin="10">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="250" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- Photo Management Canvas -->
        <DockPanel Grid.Column="0" Grid.Row="0" Margin="0,0,0,10">
            <Button DockPanel.Dock="Right" Width="80" Click="OnImagesDirChangeClick">Change</Button>
            <Label DockPanel.Dock="Left" Margin="0,0,10,0">Path:</Label>
            <TextBox Name="ImagesDir" Margin="10,0" />
        </DockPanel>

        <GroupBox Grid.Column="0" Grid.Row="1">
            <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
                <ListBox
                    IsSynchronizedWithCurrentItem="True"
                    Name="PhotosListBox"
                    Style="{StaticResource PhotoListBoxStyle}"
                    Margin="5"
                    SelectionMode="Extended"
                    ItemsSource="{Binding}"
                    SelectedIndex="0"
                    MouseDoubleClick="OnPhotoClick">
                    <ListBox.ContextMenu>
                        <ContextMenu>
                            <MenuItem Header="Edit" Click="EditPhoto" />
                        </ContextMenu>
                    </ListBox.ContextMenu>
                </ListBox>
            </ScrollViewer>
        </GroupBox>

        <!-- Splitter -->
        <GridSplitter Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="15"
                      Background="Transparent" ShowsPreview="True" />

        <!-- Right Hand Panel -->
        <DockPanel Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"
                   Margin="15,0,0,0">

            <!-- Zoom Control -->
            <DockPanel DockPanel.Dock="Bottom" Margin="5">
                <Label DockPanel.Dock="Left">Zoom:</Label>
                <Slider Name="ZoomSlider"
                        Margin="10,0,0,0"
                        Orientation="Horizontal"
                        Minimum="80"
                        Maximum="320"
                        Value="160"
                        TickFrequency="80"
                        TickPlacement="BottomRight"
                        SmallChange="5"
                        LargeChange="20" />
            </DockPanel>

            <!-- Metadata Panel -->
            <GroupBox>
                <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
                    <StackPanel>
                        <Label Style="{StaticResource MetadataHeader}">Source:</Label>
                        <Label Content="{Binding Path=Source}" />
                        <Label Style="{StaticResource MetadataHeader}">Size:</Label>
                        <Label>
                            <Label.Content>
                                <MultiBinding Converter="{StaticResource PhotoSizeConverterReference}">
                                    <Binding Path="Metadata.Width" />
                                    <Binding Path="Metadata.Height" />
                                </MultiBinding>
                            </Label.Content>
                        </Label>
                        <Label Style="{StaticResource MetadataHeader}">Date Image Taken:</Label>
                        <Label Content="{Binding Path=Metadata.DateImageTaken}" />
                        <Label Style="{StaticResource MetadataHeader}">Camera Model:</Label>
                        <Label Content="{Binding Path=Metadata.CameraModel}" />
                        <Label Style="{StaticResource MetadataHeader}">Creation Software:</Label>
                        <Label Content="{Binding Path=Metadata.CreationSoftware}" />
                        <Label Style="{StaticResource MetadataHeader}">Lens Aperture:</Label>
                        <Label
                            Content="{Binding Path=Metadata.LensAperture, Converter={StaticResource LensApertureConverterReference}}" />
                        <Label Style="{StaticResource MetadataHeader}">Focal Length:</Label>
                        <Label
                            Content="{Binding Path=Metadata.FocalLength, Converter={StaticResource FocalLengthConverterReference}}" />
                        <Label Style="{StaticResource MetadataHeader}">ISO Speed:</Label>
                        <Label Content="{Binding Path=Metadata.IsoSpeed}" />
                        <Label Style="{StaticResource MetadataHeader}">Exposure Time:</Label>
                        <Label
                            Content="{Binding Path=Metadata.ExposureTime, Converter={StaticResource ExposureTimeConverterReference}}" />
                        <Label Style="{StaticResource MetadataHeader}">Exposure Mode:</Label>
                        <Label
                            Content="{Binding Path=Metadata.ExposureMode, Converter={StaticResource ExposureModeConverterReference}}" />
                        <Label Style="{StaticResource MetadataHeader}">Exposure Compensation:</Label>
                        <Label Content="{Binding Path=Metadata.ExposureCompensation}" />
                        <Label Style="{StaticResource MetadataHeader}">White Balance Mode:</Label>
                        <Label Content="{Binding Path=Metadata.WhiteBalanceMode}" />
                        <Label Style="{StaticResource MetadataHeader}">Color Representation:</Label>
                        <Label Content="{Binding Path=Metadata.ColorRepresentation}" />
                    </StackPanel>
                </ScrollViewer>
            </GroupBox>
        </DockPanel>
    </Grid>
</Window>