1.概述
最近利用WPF做了一个图片浏览器,能够将文件夹中的所有图片以小图的形式显示,并将选中的图片以512*512大小显示。显示大图当然用的是WPF自带的Image控件,而显示小图则需要将所有的图片放入ListBox控件中,ListBox里的每一个Item为Image控件。为了方便显示多张小图,在ListBox控件外加入了ScrollViewer控件,以便可以拖动显示ListBox中的Item。并实现了对图片的一系列操作,如放大、缩小、恢复1:1的比例、上一张、下一张等功能。效果图如下:
2.XAML设计
2.1 ScrollViewer样式
即为滚动条添加一个动画,只有鼠标移到滚动条或是通过滑轮切换图片,或是连续点击上一张、下一张按钮时,滚动条才会显示,其他状态下隐藏。
2.2 ListBox样式
<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>
<ScrollViewer Panel.ZIndex="1" Name="scrolls" Style="{StaticResource for_scrollviewer}" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Visible" Margin="181,561,1107,0" MaxWidth="560" Height="174" VerticalAlignment="Top" Canvas.Left="463" Canvas.Top="158" Width="516" HorizontalAlignment="Center" HorizontalContentAlignment="Center">
<ListBox IsSynchronizedWithCurrentItem="True" Name="list1" Style="{StaticResource PhotoListBoxStyle}" Margin="5" SelectionMode="Extended" SelectedIndex="-1" Height="150" SelectionChanged="list1_SelectionChanged" UIElement.MouseWheel="ImageList_MouseWheel">
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Blue" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Blue" Opacity=".3"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="White" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}