Click here to Skip to main content
15,886,772 members
Articles / Desktop Programming / WPF

WPF Midi Band

Rate me:
Please Sign up or sign in to vote.
4.98/5 (65 votes)
2 Jan 2011CPOL12 min read 213.5K   7.8K   86  
Learn how to play midi files using fun WPF animations
<Window x:Class="WPFMidiBand.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ctrl="clr-namespace:WPFMidiBand.Controls"
        Title="WPF Midi Band" Height="700" Width="560" Icon="Images/guitar_icon.png">
    <Window.Background>
        <LinearGradientBrush>
            <GradientStop Offset="0.0" Color="#FF000000"/>
            <GradientStop Offset="1.0" Color="#FF000000"/>
        </LinearGradientBrush>
    </Window.Background>
    <Window.Resources>
        <Storyboard x:Key="sbClockOpen" x:Name="sbClockOpen" Duration="0:0:5">
            <DoubleAnimation From="0.0" To="1.0" 
            Storyboard.TargetName="grdClock"
            Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleX)">
                <DoubleAnimation.EasingFunction>
                    <ElasticEase Oscillations="1" EasingMode="EaseIn" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation From="0.0" To="1.0" 
            Storyboard.TargetName="grdClock"
            Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleY)">
                <DoubleAnimation.EasingFunction>
                    <ElasticEase Oscillations="1" EasingMode="EaseIn" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Key="sbClockClose" x:Name="sbClockClose" Duration="0:0:2">
            <DoubleAnimation From="1.0" To="0.0" 
            Storyboard.TargetName="grdClock"
            Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleX)">
                <DoubleAnimation.EasingFunction>
                    <ElasticEase Oscillations="1" EasingMode="EaseIn" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation From="1.0" To="0.0" 
            Storyboard.TargetName="grdClock"
            Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleY)">
                <DoubleAnimation.EasingFunction>
                    <ElasticEase Oscillations="1" EasingMode="EaseIn" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        
        
    </Window.Resources>
    <Grid Margin="10">
        <Grid>
            <StackPanel HorizontalAlignment="Center">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Button x:Name="btnOpen" Content="Open" Grid.Column="0" Click="btnOpen_Click"/>
                    <Button x:Name="btnStop" Content="Stop" Grid.Column="1" Click="btnStop_Click" IsEnabled="False" />
                    <Button x:Name="btnStart" Content="Start" Grid.Column="2" Click="btnStart_Click" IsEnabled="False"/>
                    <Button x:Name="btnContinue" Content="Continue" Grid.Column="3" Click="btnContinue_Click" IsEnabled="False"/>
                </Grid>
                <Slider x:Name="slider1" Minimum="0" Maximum="100" LargeChange="10" ValueChanged="slider1_ValueChanged"
                        Thumb.DragStarted="slider1_DragStarted" Thumb.DragCompleted="slider1_DragCompleted"/>

                <ctrl:PianoControlWPF x:Name="pianoControl1" Margin="0,10,0,0" HorizontalAlignment="Left">
                    <ctrl:PianoControlWPF.RenderTransform>
                        <ScaleTransform ScaleX="1.18" ScaleY="1.18"/>
                    </ctrl:PianoControlWPF.RenderTransform>
                </ctrl:PianoControlWPF>
                <ctrl:GuitarControl Height="107" Width="497" x:Name="guitarControl1">
                </ctrl:GuitarControl>
                <ctrl:BassControl Height="107" Width="497" x:Name="bassControl1">
                </ctrl:BassControl>
                <ctrl:DrumControl x:Name="drumControl1" HorizontalAlignment="Left" VerticalAlignment="Center">
                    <ctrl:DrumControl.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1.0" ScaleY="1.0"/>
                            <TranslateTransform X="-0" Y="-30"/>
                        </TransformGroup>
                    </ctrl:DrumControl.RenderTransform>
                </ctrl:DrumControl>

            </StackPanel>

            <Grid x:Name="grdClock" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden">
                <Grid.RenderTransform>
                    <ScaleTransform CenterX="50" CenterY="50" ScaleX="1" ScaleY="1"/>
                </Grid.RenderTransform>
                <Ellipse Width="100" Height="100" Stroke="#FF000000" Fill="#FFFFFFFF" StrokeThickness="8">
                </Ellipse>
                <Ellipse Width="100" Height="100" Stroke="#FFFFFFFF" StrokeThickness="1">
                </Ellipse>
                <Line X1="50" Y1="50" X2="50" Y2="15" Stroke="Black" StrokeThickness="8" StrokeStartLineCap="Round" StrokeEndLineCap="Triangle">
                    <Line.RenderTransform>
                        <RotateTransform x:Name="needleRotation" CenterX="50" CenterY="50" Angle="0"/>
                    </Line.RenderTransform>
                </Line>
                <Ellipse Width="50" Height="30" Margin="0,-50,0,0">
                    <Ellipse.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Offset="0.0" Color="#FFC0C0C0"/>
                            <GradientStop Offset="1.0" Color="#00C0C0C0"/>
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Ellipse Width="50" Height="30" Margin="0,50,0,0" Stroke="Transparent">
                    <Ellipse.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Offset="0.0" Color="#00D0D0D0"/>
                            <GradientStop Offset="1.0" Color="#FF808080"/>
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
            </Grid>
        </Grid>
    </Grid>
</Window>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Instructor / Trainer Alura Cursos Online
Brazil Brazil

Comments and Discussions