KeyboardAudioVisualizer/KeyboardAudioVisualizer/UI/Visualization/EqualizerVisualization.xaml

<styles:CachedResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                 xmlns:styles="clr-namespace:KeyboardAudioVisualizer.Styles"
                                 xmlns:visualization="clr-namespace:KeyboardAudioVisualizer.UI.Visualization"
                                 xmlns:equalizer="clr-namespace:KeyboardAudioVisualizer.AudioProcessing.Equalizer"
                                 xmlns:converter="clr-namespace:KeyboardAudioVisualizer.Converter">

    <styles:CachedResourceDictionary.MergedDictionaries>
        <styles:CachedResourceDictionary Source="/KeyboardAudioVisualizer;component/Styles/FrameworkElement.xaml" />
        <styles:CachedResourceDictionary Source="/KeyboardAudioVisualizer;component/Styles/Theme.xaml" />
    </styles:CachedResourceDictionary.MergedDictionaries>

    <converter:OffsetToPosXConverter x:Key="OffsetToPosXConverter" />
    <converter:ValueToPosYConverter x:Key="ValueToPosYConverter" />
    <converter:EqualizerBandsToPointsConverter x:Key="EqualizerBandsToPointsConverter" />

    <Style x:Key="StyleEqualizerVisualizer"
           BasedOn="{StaticResource StyleFrameworkElement}"
           TargetType="{x:Type visualization:EqualizerVisualizer}">
        <Setter Property="SnapsToDevicePixels" Value="False" />
        <Setter Property="UseLayoutRounding" Value="False" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type visualization:EqualizerVisualizer}">
                    <Grid>
                        <Grid x:Name="Container" Background="Transparent"
                              Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Equalizer.IsEnabled, Converter={StaticResource BoolToVisibilityConverter}}">
                            <Polyline x:Name="PART_Line" Stroke="White" StrokeThickness="2" StrokeLineJoin="Round">
                                <Polyline.Points>
                                    <MultiBinding Converter="{StaticResource EqualizerBandsToPointsConverter}" ConverterParameter="120">
                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Equalizer" />
                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Equalizer.Bands" />
                                        <Binding Path="ActualWidth" ElementName="Container" />
                                        <Binding Path="ActualHeight" ElementName="Container" />
                                    </MultiBinding>
                                </Polyline.Points>
                            </Polyline>

                            <ItemsControl x:Name="PART_Grips" Opacity="0"
                                          ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Equalizer.Bands}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <Canvas />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>

                                <ItemsControl.ItemTemplate>
                                    <DataTemplate DataType="equalizer:EqualizerBand">
                                        <Border Width="24" Height="24" CornerRadius="12"
                                                BorderThickness="3" BorderBrush="{StaticResource BrushEqualizerBorder}"
                                                Background="{StaticResource BrushEqualizerBackground}" />
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>

                                <ItemsControl.ItemContainerStyle>
                                    <Style TargetType="ContentPresenter">
                                        <Setter Property="Canvas.Left">
                                            <Setter.Value>
                                                <MultiBinding Converter="{StaticResource OffsetToPosXConverter}" ConverterParameter="12">
                                                    <Binding Path="Offset" />
                                                    <Binding Path="ActualWidth" ElementName="PART_Grips" />
                                                </MultiBinding>
                                            </Setter.Value>
                                        </Setter>
                                        <Setter Property="Canvas.Top">
                                            <Setter.Value>
                                                <MultiBinding Converter="{StaticResource ValueToPosYConverter}" ConverterParameter="12">
                                                    <Binding Path="Value" />
                                                    <Binding Path="ActualHeight" ElementName="PART_Grips" />
                                                </MultiBinding>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </ItemsControl.ItemContainerStyle>
                            </ItemsControl>
                        </Grid>

                        <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left"
                                    Margin="0,-4,0,0" Orientation="Horizontal">
                            <CheckBox VerticalAlignment="Center" Content="Enable Equalizer"
                                      Foreground="{StaticResource BrushForeground}"
                                      IsChecked="{Binding Path=Equalizer.IsEnabled, RelativeSource={RelativeSource TemplatedParent}}" />

                            <Button VerticalAlignment="Center" Margin="12,0,0,0" 
                                    Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Equalizer.IsEnabled, Converter={StaticResource BoolToVisibilityConverter}, ConverterParameter=True}"
                                    Content="Reset" Command="{TemplateBinding ResetCommand}" />
                        </StackPanel>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.2" To="1"
                                                         Storyboard.TargetName="PART_Grips" Storyboard.TargetProperty="Opacity" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.25" To="0"
                                                         Storyboard.TargetName="PART_Grips" Storyboard.TargetProperty="Opacity" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</styles:CachedResourceDictionary>