Digital Peak Level Meter – Sample Application

There is no code behind just XAML – such a good feeling…..

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        xmlns:i4="clr-namespace:VolumeIndicatorControl;assembly=VolumeIndicatorControl" 
        mc:Ignorable="d" 
        x:Class="VolumeIndicator.MainWindow" 
        Title="MainWindow" 
        Height="278" 
        Width="536">
    <Window.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="0" />
            <GradientStop Color="White" Offset="1" />
        </LinearGradientBrush>
    </Window.Background>
    <Grid x:Name="mainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="10" />
            <RowDefinition Height="38" />
            <RowDefinition Height="144" />
            <RowDefinition Height="32" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.024*" />
            <ColumnDefinition Width="0.014*" />
            <ColumnDefinition Width="0.865*" />
            <ColumnDefinition Width="0.02*" />
            <ColumnDefinition Width="0.077*" />
        </Grid.ColumnDefinitions>
        <Slider x:Name="leftInput" Margin="0" Maximum="100" TickFrequency="10" Value="99" Grid.Column="2" Grid.Row="3" 
                Grid.ColumnSpan="2" VerticalAlignment="Bottom" />
        <Slider x:Name="rightInput" Margin="0" Maximum="100" TickFrequency="10" Value="50" Grid.Column="2" Grid.Row="1" 
                Grid.ColumnSpan="2" VerticalAlignment="Top" />
        <Border BorderBrush="Black" BorderThickness="1" Grid.Column="1" Margin="0" Grid.Row="2" Grid.ColumnSpan="3" 
                CornerRadius="3" Background="Black">
            <Grid Margin="4">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.137*" />
                    <ColumnDefinition Width="0.863*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.381*" />
                    <RowDefinition Height="0.238*" />
                    <RowDefinition Height="0.381*" />
                </Grid.RowDefinitions>
                <ProgressBar x:Name="rightChannel" Margin="0" Value="{Binding Value, ElementName=rightInput}" 
                             Template="{DynamicResource VolumeIndicatorControlTemplate}" 
                             i4:LevelHelper.LevelCompletion="{Binding Value, RelativeSource={RelativeSource Self}}" Grid.Column="1" />
                <ProgressBar x:Name="leftChannel" Margin="0" Value="{Binding Value, ElementName=leftInput}" 
                             Template="{DynamicResource VolumeIndicatorControlTemplate}" 
                             i4:LevelHelper.LevelCompletion="{Binding Value, RelativeSource={RelativeSource Self}}" 
                             Grid.Row="2" Grid.Column="1" />
                <Label x:Name="labelLeft" Content="Left" Margin="0" Grid.Row="2" Foreground="White" VerticalAlignment="Center" />
                <Label x:Name="labelRight" Content="Right" Margin="0" Foreground="White" VerticalAlignment="Center" />
                <Grid Grid.Column="1" Margin="0" Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.067*" />
                        <ColumnDefinition Width="0.176*" />
                        <ColumnDefinition Width="0.142*" />
                        <ColumnDefinition Width="0.101*" />
                        <ColumnDefinition Width="0.324*" />
                        <ColumnDefinition Width="0.136*" />
                        <ColumnDefinition Width="0.054*" />
                    </Grid.ColumnDefinitions>
                    <Label x:Name="label" Content="dB" Margin="0,0,2.648,0" d:LayoutOverrides="Width, Height" 
                           Foreground="{DynamicResource WhiteBlockBrush}" />
                    <Label x:Name="label24" Content="-24" Margin="0,0,-0.005,0" 
                           Foreground="{DynamicResource WhiteBlockBrush}" d:LayoutOverrides="Width, Height" 
                           Grid.Column="1" Grid.ColumnSpan="6" />
                    <Label x:Name="label20" Content="-20" Margin="0,0,-0.005,0" 
                           Foreground="{DynamicResource WhiteBlockBrush}" d:LayoutOverrides="Width, Height" 
                           Grid.Column="2" Grid.ColumnSpan="6" />
                    <Label x:Name="label12" Content="-12" Margin="-0.001,0,-0.006,0" 
                           Foreground="{DynamicResource WhiteBlockBrush}" Grid.Column="4" 
                           d:LayoutOverrides="Width, Height, GridBox" Grid.ColumnSpan="5" />
                    <Label x:Name="label4" Content="-4" Margin="0,0,-0.006,0" 
                           Foreground="{DynamicResource WhiteBlockBrush}" Grid.Column="5" 
                           d:LayoutOverrides="Width, Height, GridBox" Grid.ColumnSpan="3" />
                    <Label x:Name="label0" Content="0" Margin="0,0,-0.007,0" 
                           Foreground="{DynamicResource WhiteBlockBrush}" Grid.Column="6" 
                           d:LayoutOverrides="Width, Height, GridBox" Grid.ColumnSpan="2" />
                </Grid>
            </Grid>
        </Border>

    </Grid>
</Window>

One Response to “Digital Peak Level Meter – Sample Application”

  1. […] The source can be found here, the XAML mark-up here, and the simple test application source here. […]

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: