MultiTerm/MultiTerm.Wpf.CustomControl/MultiFormatDataView/MultiFormatDataView.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:MultiTerm.Wpf.CustomControl"
                    xmlns:vm="clr-namespace:MultiTerm.Core.ViewModel;assembly=MultiTerm.Core"
                    xmlns:wpftk="clr-namespace:WpfToolkit.Controls;assembly=VirtualizingWrapPanel"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib">

    <Style TargetType="{x:Type local:MultiFormatDataView}">
        <Style.Resources>
            <SolidColorBrush x:Key="CHAR_Background" Color="#B4EBEB"/>
            <SolidColorBrush x:Key="HEX_Background" Color="#C8C8FF"/>
            <SolidColorBrush x:Key="BIN_Background" Color="#C8FFC8"/>
            <DataTemplate x:Key="dataContainerTemplate" DataType="vm:DataViewModel">
                <StackPanel Orientation="Vertical" Margin="0 0 5 0" x:Name="ItemStackPanel">
                    <StackPanel.Triggers>
                        <EventTrigger SourceName="ItemStackPanel" RoutedEvent="Loaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemStackPanel" 
                                                                   Storyboard.TargetProperty="(local:MultiFormatDataView.ItemLoaded)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <sys:Boolean>True</sys:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger SourceName="ItemStackPanel" RoutedEvent="Unloaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemStackPanel" 
                                                                   Storyboard.TargetProperty="(local:MultiFormatDataView.ItemUnloaded)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <sys:Boolean>True</sys:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </StackPanel.Triggers>
                    <!-- Character -->
                    <Border BorderThickness="0">
                        <Label Content="{Binding DisplayStringUtf16}">
                            <Label.Style>
                                <Style TargetType="Label">
                                    <Setter Property="HorizontalAlignment" Value="Left"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding ElementName=cbHex,Path=IsChecked}" Value="True">
                                            <Setter Property="HorizontalAlignment" Value="Right"/>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding ElementName=cbBin,Path=IsChecked}" Value="True">
                                            <Setter Property="HorizontalAlignment" Value="Right"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Label.Style>
                        </Label>
                        <Border.Style>
                            <Style TargetType="Border">
                                <Setter Property="Visibility" Value="Collapsed"/>
                                <Setter Property="Background" Value="Transparent"/>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding ElementName=cbCharacter,Path=IsChecked}" Value="True">
                                        <Setter Property="Visibility" Value="Visible"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding ElementName=cbHex,Path=IsChecked}" Value="True">
                                        <Setter Property="Background" Value="{StaticResource CHAR_Background}"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding ElementName=cbBin,Path=IsChecked}" Value="True">
                                        <Setter Property="Background" Value="{StaticResource CHAR_Background}"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>
                    </Border>
                    <!-- Hexadecimal -->
                    <Border BorderThickness="0" Background="{StaticResource HEX_Background}">
                        <Label Content="{Binding DisplayStringHex}" HorizontalAlignment="Right"/>
                        <Border.Style>
                            <Style TargetType="Border">
                                <Setter Property="Visibility" Value="Collapsed"/>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding ElementName=cbHex,Path=IsChecked}" Value="True">
                                        <Setter Property="Visibility" Value="Visible"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>
                    </Border>
                    <!-- Binary -->
                    <Border BorderThickness="0" Background="{StaticResource BIN_Background}">
                        <Label Content="{Binding DisplayStringBin}" HorizontalAlignment="Right"/>
                        <Border.Style>
                            <Style TargetType="Border">
                                <Setter Property="Visibility" Value="Collapsed"/>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding ElementName=cbBin,Path=IsChecked}" Value="True">
                                        <Setter Property="Visibility" Value="Visible"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>
                    </Border>
                </StackPanel>
            </DataTemplate>
        </Style.Resources>
        
        <!-- Template -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:MultiFormatDataView}">
                    <DockPanel>
                        <GroupBox Header="Display Formats" DockPanel.Dock="Top">
                            <DockPanel LastChildFill="False">
                                <CheckBox DockPanel.Dock="Left" Content="Character" VerticalAlignment="Center" x:Name="cbCharacter" Padding="20 0" IsChecked="True"/>
                                <CheckBox DockPanel.Dock="Left" Content="Hexadecimal" VerticalAlignment="Center" x:Name="cbHex" Padding="20 0"/>
                                <CheckBox DockPanel.Dock="Left" Content="Binary" VerticalAlignment="Center" x:Name="cbBin" Padding="20 0"/>
                                <Button x:Name="btnClear" Content="Clear" Margin="5" />
                                <StackPanel DockPanel.Dock="Right" Orientation="Horizontal" VerticalAlignment="Center">
                                    <Label Content="Realized Items: " Margin="0 0 5 0"/>
                                    <Label Width="30" Content="{TemplateBinding RealizedItemsCount}"/>
                                </StackPanel>
                            </DockPanel>
                        </GroupBox>
                        <ListView Name="itemsControl"
                              ItemsSource="{TemplateBinding DataSource}"
                              ScrollViewer.VerticalScrollBarVisibility="Auto"
                              ScrollViewer.CanContentScroll="true"
                              ScrollViewer.PanningMode="VerticalOnly"
                              HorizontalAlignment="Left"
                              VirtualizingPanel.IsVirtualizingWhenGrouping="True"
                              VirtualizingPanel.CacheLengthUnit="Item"
                              ItemTemplate="{StaticResource dataContainerTemplate}"
                              SelectionMode="Extended">

                            <ListView.ItemContainerStyle>
                                <Style TargetType="ListViewItem">
                                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                    <Setter Property="VerticalContentAlignment" Value="Stretch" />
                                </Style>
                            </ListView.ItemContainerStyle>

                            <ListView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <wpftk:VirtualizingWrapPanel Orientation="Vertical" />
                                </ItemsPanelTemplate>
                            </ListView.ItemsPanel>

                        </ListView>
                    </DockPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>