MainPage.xaml
<UserControl xmlns:my=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data” x:Class=”Tips.MainPage”
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“
mc:Ignorable=”d”
d:DesignHeight=”300″ d:DesignWidth=”400″>
<Grid x:Name=”LayoutRoot”>
<ToggleButton Style=”{StaticResource ToggleButtonStyle}” x:Name=”SoundSetup”
Checked=”SoundSetup_Click” IsChecked=”true”
Unchecked=”SoundSetup_Click” Width=”24″ Height=”22″
VerticalAlignment=”Top” HorizontalAlignment=”Left” />
</Grid>
</UserControl>
MainPage.xaml.cs
using System.Windows;
using System.Windows.Controls;
namespace Tips
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void SoundSetup_Click(object sender, RoutedEventArgs e)
{
if (SoundSetup != null)
{
switch (this.SoundSetup.IsChecked)
{
case true:
{
MessageBox.Show(“Sound on”);
break;
}
case false:
{
MessageBox.Show(“Sound off”);
break;
}
}
}
}
}
}
App.xaml
<Application xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation“
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml“
x:Class=”Tips.App”
xmlns:vsm=”clr-namespace:System.Windows;assembly=System.Windows”
>
<Application.Resources>
<Style x:Key=”ToggleButtonStyle” TargetType=”ToggleButton”>
<Setter Property=”Background” Value=”Transparent”/>
<Setter Property=”Foreground” Value=”Black” />
<Setter Property=”Padding” Value=”4″ />
<Setter Property=”FontFamily” Value=”Trebuchet MS”/>
<Setter Property=”FontSize” Value=”12″/>
<Setter Property=”Template”>
<Setter.Value>
<ControlTemplate TargetType=”ToggleButton”>
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name=”CommonStates”>
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration=”00:00:00.1″ To=”MouseOver”/>
<vsm:VisualTransition GeneratedDuration=”00:00:00.1″ To=”Pressed”/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name=”Normal”>
<Storyboard/>
</vsm:VisualState>
<vsm:VisualState x:Name=”MouseOver”>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName=”BorderTransparency” Storyboard.TargetProperty=”(Shape.StrokeThickness)” BeginTime=”00:00:00″ Duration=”00:00:00.0010000″>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”7″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName=”BorderTransparency” Storyboard.TargetProperty=”(UIElement.Opacity)” BeginTime=”00:00:00″ Duration=”00:00:00.0010000″>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.35″/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”BackgroundStroke” Storyboard.TargetProperty=”(Shape.Stroke).(SolidColorBrush.Color)”>
<SplineColorKeyFrame KeyTime=”00:00:00″ Value=”#CCFFFFFF”/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name=”Pressed”>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName=”BorderTransparency” Storyboard.TargetProperty=”(UIElement.Opacity)” BeginTime=”00:00:00″ Duration=”00:00:00.0010000″>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.35″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName=”ScalableBorder” Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)” BeginTime=”00:00:00″ Duration=”00:00:00.0010000″>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”1″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName=”ScalableBorder” Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)” BeginTime=”00:00:00″ Duration=”00:00:00.0010000″>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”1″/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”BackgroundStroke” Storyboard.TargetProperty=”(Shape.Stroke).(SolidColorBrush.Color)”>
<SplineColorKeyFrame KeyTime=”00:00:00″ Value=”#CCFFFFFF”/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name=”Disabled”>
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”DisabledVisual” Storyboard.TargetProperty=”(UIElement.Visibility)”>
<DiscreteObjectKeyFrame KeyTime=”00:00:00″>
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name=”CheckStates”>
<vsm:VisualState x:Name=”Checked”>
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”Background” Storyboard.TargetProperty=”(UIElement.Opacity)”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.5″/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”Background” Storyboard.TargetProperty=”(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)”>
<SplineColorKeyFrame KeyTime=”00:00:00″ Value=”#FFFFFFFF”/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”Background” Storyboard.TargetProperty=”(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Offset)”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.671″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”Background” Storyboard.TargetProperty=”(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.225″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”Background” Storyboard.TargetProperty=”(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.215″/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”Background” Storyboard.TargetProperty=”(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)”>
<SplineColorKeyFrame KeyTime=”00:00:00″ Value=”#99FFFFFF”/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”Background” Storyboard.TargetProperty=”(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)”>
<SplineColorKeyFrame KeyTime=”00:00:00″ Value=”#EEFFFFFF”/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”contentPresenter” Storyboard.TargetProperty=”(UIElement.Opacity)”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.8″/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”contentPresenter” Storyboard.TargetProperty=”(ContentPresenter.Content)”>
<DiscreteObjectKeyFrame KeyTime=”00:00:00″ Value=”Sound On”/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”ToggleImageUc” Storyboard.TargetProperty=”(UIElement.Visibility)”>
<DiscreteObjectKeyFrame KeyTime=”00:00:00″>
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name=”Unchecked”>
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”contentPresenter” Storyboard.TargetProperty=”(ContentPresenter.Content)”>
<DiscreteObjectKeyFrame KeyTime=”00:00:00″ Value=”Sound Off”/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”ToggleImageC” Storyboard.TargetProperty=”(UIElement.Visibility)”>
<DiscreteObjectKeyFrame KeyTime=”00:00:00″>
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name=”Indeterminate”>
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”Background” Storyboard.TargetProperty=”(UIElement.Opacity)”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.5″/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”Background” Storyboard.TargetProperty=”(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)”>
<SplineColorKeyFrame KeyTime=”00:00:00″ Value=”#FFFFFFFF”/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”Background” Storyboard.TargetProperty=”(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Offset)”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.671″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”Background” Storyboard.TargetProperty=”(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.225″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”Background” Storyboard.TargetProperty=”(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.215″/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”Background” Storyboard.TargetProperty=”(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)”>
<SplineColorKeyFrame KeyTime=”00:00:00″ Value=”#99FFFFFF”/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”Background” Storyboard.TargetProperty=”(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)”>
<SplineColorKeyFrame KeyTime=”00:00:00″ Value=”#EEFFFFFF”/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”contentPresenter” Storyboard.TargetProperty=”(UIElement.Opacity)”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.8″/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name=”FocusStates”>
<vsm:VisualState x:Name=”Focused”>
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”FocusVisual” Storyboard.TargetProperty=”(UIElement.Visibility)”>
<DiscreteObjectKeyFrame KeyTime=”00:00:00″>
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name=”Unfocused”/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<!– Start:UI –>
<Grid x:Name=”ScalableBorder” RenderTransformOrigin=”0.5,0.5″>
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Path Stretch=”Fill” Stroke=”{TemplateBinding Background}” Data=”M20.231335,0.5 L26.636795,0.5 L153.5,0.5 L162.5,0.5 C163.05229,0.4999994 163.5,0.94771463 163.5,1.5000005 L163.5,10.499999 L163.5,35.943314 L163.5,41.943314 C163.5,53.542103 155.39055,59.5 143.3632,59.5 L140.3632,59.5 L10.499999,59.5 L1.5000005,59.5 C0.94771522,59.5 0.5,59.052284 0.5,58.5 L0.5,49.5 L0.5,23.056734 L0.5,18.056734 C0.5,7.0391827 9.4203978,0.4999994 20.636806,0.5″ StrokeThickness=”3″ x:Name=”BackColor” Fill=”{TemplateBinding Background}” Visibility=”Collapsed”/>
<Path Stretch=”Fill” Stroke=”#FF888888″ Data=”M20.231335,0.5 L26.636795,0.5 L153.5,0.5 L162.5,0.5 C163.05229,0.4999994 163.5,0.94771463 163.5,1.5000005 L163.5,10.499999 L163.5,35.943314 L163.5,41.943314 C163.5,53.542103 155.39055,59.5 143.3632,59.5 L140.3632,59.5 L10.499999,59.5 L1.5000005,59.5 C0.94771522,59.5 0.5,59.052284 0.5,58.5 L0.5,49.5 L0.5,23.056734 L0.5,18.056734 C0.5,7.0391827 9.4203978,0.4999994 20.636806,0.5″ StrokeThickness=”3″ x:Name=”Background” Visibility=”Collapsed”>
<Path.Fill>
<LinearGradientBrush StartPoint=”0.7,0″ EndPoint=”0.7,1″>
<GradientStop Color=”#CCFFFFFF” Offset=”0″ />
<GradientStop Color=”#AAFFFFFF” Offset=”0.285″ />
<GradientStop Color=”#88FFFFFF” Offset=”0.285″ />
<GradientStop Color=”#19FFFFFF” Offset=”1″ />
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path Stretch=”Fill” Stroke=”#FF888888″ Data=”M20.231335,0.5 L26.636795,0.5 L153.5,0.5 L162.5,0.5 C163.05229,0.4999994 163.5,0.94771463 163.5,1.5000005 L163.5,10.499999 L163.5,35.943314 L163.5,41.943314 C163.5,53.542103 155.39055,59.5 143.3632,59.5 L140.3632,59.5 L10.499999,59.5 L1.5000005,59.5 C0.94771522,59.5 0.5,59.052284 0.5,58.5 L0.5,49.5 L0.5,23.056734 L0.5,18.056734 C0.5,7.0391827 9.4203978,0.4999994 20.636806,0.5″ StrokeThickness=”3″ x:Name=”BackgroundStroke” Visibility=”Collapsed”/>
<Path x:Name=”BorderTransparency” Stretch=”Fill” StrokeThickness=”7″ Stroke=”#FFFFFFFF” Opacity=”0.25″ Margin=”.5″ Data=”M10.499999,0.5 L16.5,0.5 153.5,0.5 162.5,0.5 C163.05229,0.4999994 163.5,0.94771463 163.5,1.5000005 L163.5,10.499999 163.5,43.499999 163.5,49.499999 C163.5,55.022846 159.02284,59.499999 153.5,59.499999 L150.5,59.499999 10.499999,59.499999 1.5000005,59.499999 C0.94771522,59.499999 0.5,59.052284 0.5,58.499999 L0.5,49.499999 0.5,15.499999 0.5,10.499999 C0.5,4.9771518 4.9771523,0.4999994 10.499999,0.5 z” Visibility=”Collapsed”/>
<ContentPresenter HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” Margin=”{TemplateBinding Padding}” x:Name=”contentPresenter” VerticalAlignment=”{TemplateBinding VerticalContentAlignment}” ContentTemplate=”{TemplateBinding ContentTemplate}” Content=”{TemplateBinding Content}” Visibility=”Collapsed”/>
<Path x:Name=”FocusVisual” Stretch=”Fill” StrokeThickness=”1″ Stroke=”#BFFFFFFF” StrokeDashCap=”Square” StrokeDashArray=”1 2″ Margin=”5″ Visibility=”Collapsed” Data=”M10.499999,0.5 L16.5,0.5 153.5,0.5 162.5,0.5 C163.05229,0.4999994 163.5,0.94771463 163.5,1.5000005 L163.5,10.499999 163.5,43.499999 163.5,49.499999 C163.5,55.022846 159.02284,59.499999 153.5,59.499999 L150.5,59.499999 10.499999,59.499999 1.5000005,59.499999 C0.94771522,59.499999 0.5,59.052284 0.5,58.499999 L0.5,49.499999 0.5,15.499999 0.5,10.499999 C0.5,4.9771518 4.9771523,0.4999994 10.499999,0.5 z”/>
<Path x:Name=”DisabledVisual” Stretch=”Fill” Fill=”#FFFFFFFF” StrokeThickness=”3″ Stroke=”#FFFFFFFF” Visibility=”Collapsed” Data=”M10.499999,0.5 L16.5,0.5 153.5,0.5 162.5,0.5 C163.05229,0.4999994 163.5,0.94771463 163.5,1.5000005 L163.5,10.499999 163.5,43.499999 163.5,49.499999 C163.5,55.022846 159.02284,59.499999 153.5,59.499999 L150.5,59.499999 10.499999,59.499999 1.5000005,59.499999 C0.94771522,59.499999 0.5,59.052284 0.5,58.499999 L0.5,49.499999 0.5,15.499999 0.5,10.499999 C0.5,4.9771518 4.9771523,0.4999994 10.499999,0.5 z” Opacity=”0.55″/>
<Image Margin=”0,0,0,0″ x:Name=”ToggleImageC” Visibility=”Visible” Source=”Images/soundOn.png”/>
<Image Margin=”0,0,0,0″ x:Name=”ToggleImageUc” Visibility=”Visible” Source=”Images/soundOff.png”/>
</Grid>
<!– End:UI –>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
Sharker Khaleed Mahmud
Software Developer
