<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:Gallery"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"
    x:Class="Gallery.MainWindow"
    x:Name="Window"
    Title="Фото галерея WPF"
    UseLayoutRounding="True"
    Width="640" Height="480" Background="Black">
    <Window.Resources>
        <local:PathConverter x:Key="PathConverter"/>
        <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
            <VirtualizingStackPanel IsItemsHost="True" Orientation="Horizontal"/>
        </ItemsPanelTemplate>
        <DataTemplate x:Key="DataTemplate1">
            <Image Width="100" Source="{Binding Attribute[preview].Value, Converter={StaticResource PathConverter}}"/>
        </DataTemplate>
        <Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="Padding" Value="2,0,0,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="Bd" Padding="3" SnapsToDevicePixels="true" Margin="2" CornerRadius="5" Background="#FF454545">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Background" TargetName="Bd" Value="#FF212121"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ListBoxStyle1" TargetType="{x:Type ListBox}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBox}">
                        <ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}" Margin="0,0,4,4" ScrollViewer.HorizontalScrollBarVisibility="Hidden" MouseMove="ScrollViewer_MouseMove" >
                            <ScrollViewer.OpacityMask>
                                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                    <GradientStop Color="Black" Offset="0.5"/>
                                    <GradientStop Offset="1" Color="#00000000"/>
                                    <GradientStop Color="#00000000"/>
                                </LinearGradientBrush>
                            </ScrollViewer.OpacityMask>
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="25,0"/>
                        </ScrollViewer>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <DataTemplate x:Key="DataTemplate2">
            <TextBlock TextWrapping="Wrap" Text="{Binding Mode=OneWay}"/>
        </DataTemplate>
        <Style x:Key="ListBoxItemStyle2" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="Padding" Value="2,0,0,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="0,0,15,0"/>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Foreground" Value="#FF212121"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <SolidColorBrush x:Key="ListBorder" Color="#828790"/>
        <Style x:Key="ListBoxStyle2" TargetType="{x:Type ListBox}">
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
            <Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
            <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBox}">
                        <ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}" Margin="0" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </ScrollViewer>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid x:Name="LayoutRoot">
        <ListBox x:Name="listBoxPreview" Margin="8,0,8,8" ItemsPanel="{DynamicResource ItemsPanelTemplate1}" ItemTemplate="{DynamicResource DataTemplate1}" ItemContainerStyle="{DynamicResource ListBoxItemStyle1}" Style="{DynamicResource ListBoxStyle1}" ScrollViewer.CanContentScroll="False" Height="76" VerticalAlignment="Bottom" SelectionChanged="listBoxPreview_SelectionChanged" HorizontalAlignment="Center" />
        <ListBox x:Name="listBoxTags" Margin="8,0,0,86" Height="23" VerticalAlignment="Bottom" ItemsPanel="{DynamicResource ItemsPanelTemplate1}" ItemTemplate="{DynamicResource DataTemplate2}" ItemContainerStyle="{DynamicResource ListBoxItemStyle2}" Style="{DynamicResource ListBoxStyle2}" Foreground="#FF454545" HorizontalAlignment="Left" SelectionChanged="listBoxTags_SelectionChanged"/>
        <Image x:Name="image" Margin="8,8,8,113"/>
    </Grid>
</Window>