<UserControl x:Class="Filtration.ThemeEditor.Views.ThemeEditorView"
             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:viewModels="clr-namespace:Filtration.ThemeEditor.ViewModels"
             xmlns:views="clr-namespace:Filtration.ThemeEditor.Views"
             xmlns:componentModel="clr-namespace:System.ComponentModel;assembly=WindowsBase"
             xmlns:converters="clr-namespace:Filtration.ThemeEditor.Converters"
             mc:Ignorable="d" 
             d:DataContext="{d:DesignInstance Type=viewModels:ThemeEditorViewModel}"
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary>
                    <CollectionViewSource Source="{Binding Components}" x:Key="ComponentsViewSource">
                        <CollectionViewSource.GroupDescriptions>
                            <PropertyGroupDescription PropertyName="ComponentType" />
                        </CollectionViewSource.GroupDescriptions>
                        <CollectionViewSource.SortDescriptions>
                            <componentModel:SortDescription PropertyName="ComponentType" />
                        </CollectionViewSource.SortDescriptions>
                    </CollectionViewSource>
                    <converters:ThemeComponentTypeToStringConverter x:Key="ThemeComponentTypeToStringConverter" />
                </ResourceDictionary>
                <ResourceDictionary Source="pack://application:,,,/Filtration.Common;component/Styles/SharedResourcesDictionary.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid Margin="10">
        <ScrollViewer HorizontalScrollBarVisibility="Disabled">
            <ListView ItemsSource="{Binding Source={StaticResource ComponentsViewSource}}"
                      SelectedItem="{Binding SelectedThemeComponent}"
                      Margin="5"
                      ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                <ListView.Resources>
                    <Style TargetType="ListViewItem">
                        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListViewItem">
                                    <Border Name="Border" BorderBrush="Black" Background="White"  BorderThickness="1" CornerRadius="3" Margin="2" SnapsToDevicePixels="true">
                                        <ContentPresenter />
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsSelected" Value="true">
                                            <Setter TargetName="Border" Property="Background" Value="#A9BDD8"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListView.Resources>
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <TextBlock Margin="7,5,0,0" FontWeight="Bold" FontSize="15" Text="{Binding Path=Name, Converter={StaticResource ThemeComponentTypeToStringConverter}}"/>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                    </GroupStyle>
                </ListView.GroupStyle>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <views:ThemeComponentControl DataContext="{Binding}" Margin="10,5,10,5" />
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </ScrollViewer>
    </Grid>
</UserControl>