<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">
        <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>
    </Grid>
</UserControl>