math-suite/Source/GraphingCalculator/Controls/GraphingCanvas.xaml

<Canvas x:Class="GraphingCalculator.GraphingCanvas"
             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" 
             mc:Ignorable="d" d:DesignHeight="234" d:DesignWidth="348"
             ClipToBounds="True" 
             SizeChanged="Canvas_SizeChanged"
             MouseWheel="Canvas_MouseWheel"
        >

    <Canvas.Resources>
        <Style TargetType="Button">
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Name="grid">
                            <Border Name="border" CornerRadius="4" Visibility="Collapsed"
                                     VerticalAlignment="Stretch"
                                     HorizontalAlignment="Stretch"
                                     BorderBrush="Orange"
                                     BorderThickness="1">
                                <Border.Background>
                                    <RadialGradientBrush Center=".5, .5" GradientOrigin=".5,1" RadiusX="1" RadiusY=".7">
                                        <GradientStop Color="#FFBF6A" Offset="0" />
                                        <GradientStop Color="#FFF6E2" Offset="1" />
                                    </RadialGradientBrush>
                                </Border.Background>
                            </Border>

                            <Border Name="blackness" CornerRadius="4" Background="Brown" Opacity="0" />

                            <ContentPresenter VerticalAlignment="Center" Margin="3"
                                              HorizontalAlignment="Center" />
                        </Grid>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="Visibility" Value="Visible" />
                            </Trigger>

                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="blackness" Property="Opacity" Value=".3" />
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="RepeatButton">
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Grid Name="grid">
                            <Border Name="border" CornerRadius="4" Visibility="Collapsed"
                                     VerticalAlignment="Stretch"
                                     HorizontalAlignment="Stretch"
                                     BorderBrush="Orange"
                                     BorderThickness="1">
                                <Border.Background>
                                    <RadialGradientBrush Center=".5, .5" GradientOrigin=".5,1" RadiusX="1" RadiusY=".7">
                                        <GradientStop Color="#FFBF6A" Offset="0" />
                                        <GradientStop Color="#FFF6E2" Offset="1" />
                                    </RadialGradientBrush>
                                </Border.Background>
                            </Border>

                            <Border Name="blackness" CornerRadius="4" Background="Brown" Opacity="0" />

                            <ContentPresenter VerticalAlignment="Center" Margin="3"
                                              HorizontalAlignment="Center" />
                        </Grid>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="Visibility" Value="Visible" />
                            </Trigger>

                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="blackness" Property="Opacity" Value=".3" />
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Canvas.Resources>

    <RepeatButton Name="buttonUp" Canvas.Right="25" Canvas.Top="5"
                Width="20" Height="20" Click="buttonUp_Click">
        <Path Height="12" Stretch="Fill" Fill="Gray" 
              Data="F1 M 190.792,238.149L 182.688,252.184L 198.895,252.184L 190.792,238.149 Z "/>
    </RepeatButton>

    <RepeatButton Name="buttonLeft" Canvas.Right="45" Canvas.Top="25"
                Width="20" Height="20" Click="buttonLeft_Click" >
        <Path Width="12" Stretch="Fill" Fill="Gray" Data="F1 M 204.774,246.729L 218.809,254.833L 218.809,238.626L 204.774,246.729 Z "/>
    </RepeatButton>

    <Button Name="buttonReset" 
            Canvas.Right="25" Canvas.Top="25"
            Width="20" Height="20" 
            Click="buttonReset_Click"
            ToolTip="Reset" >
        <Ellipse Width="12" Height="12" Fill="Gray"/>
    </Button>

    <RepeatButton Name="buttonRight"
                Canvas.Right="5" Canvas.Top="25"
                Width="20" Height="20" Click="buttonRight_Click" >
        <Path Width="12" Stretch="Fill" Fill="Gray" Data="F1 M 214.722,227.667L 200.686,219.563L 200.686,235.77L 214.722,227.667 Z "/>
    </RepeatButton>

    <RepeatButton Name="buttonBottom" Canvas.Right="25" Canvas.Top="45"
                Width="20" Height="20" Click="buttonBottom_Click" >
        <Path Height="12" Stretch="Fill" Fill="Gray" Data="F1 M 188.333,235.024L 196.437,220.988L 180.23,220.988L 188.333,235.024 Z "/>
    </RepeatButton>

    <!-- Zoom buttons -->
    <RepeatButton Name="buttonZoomIn" Canvas.Right="5" Canvas.Bottom="5"
                Width="25" Height="20" Click="buttonZoomIn_Click">
        <Path Width="12" Height="12" Stretch="Fill" Fill="Gray" Data="M 139.292,225.542L 147.292,225.542L 147.292,233.542L 155.292,233.542L 155.292,241.542L 147.292,241.542L 147.292,249.542L 139.292,249.542L 139.292,241.542L 131.292,241.542L 131.292,233.542L 139.292,233.542L 139.292,225.542 Z "/>
    </RepeatButton>

    <RepeatButton Name="buttonZoomOut" Canvas.Right="30" Canvas.Bottom="5"
                Width="25" Height="20" Click="buttonZoomOut_Click">
        <Rectangle Width="12" Height="4.32" Stretch="Fill" Fill="Gray"/>
    </RepeatButton>

</Canvas>