locked
Playing sound on button click RRS feed

  • Question

  • Hi,

    I want to play click sound on button click. I know I can achieve this by using media element.

    <MediaElement x:Name="SoundClick" Source="/Alert1.mp3" />

    <HyperlinkButton x:Name="btnHome" Height="25" Width="120" Content="Home" Style="{StaticResource MenuButton}" VerticalContentAlignment="Center" HorizontalContentAlignment="Left" Click="btnHome_Click"></HyperlinkButton>

    But I want to play that sound on every button click. So I want to achieve this in style only here in Menubutton style. Is it possible to play sound in style, so that I Don't need to play that sound on every button click I have used in my whole application. Something like

    <VisualState x:Name="Pressed">

    ///here i want to play that sound

    </VisualState>

    if I can achieve this, I no need to play sound explicitly on every button click,

    Any Idea guys ??

    Thursday, June 23, 2011 2:51 AM

Answers

  • Hi pune_silverlight,

    You can add a MediaElement inside Button template and set Source of MediaElement to a certain source and AutoPlay to true in Pressed visual state. Then it will play sound when click on the button.

    Below is the modified style, please have a try

    <Style x:Key="ButtonStyle1" TargetType="Button">
       <Setter Property="Background" Value="#FF1F3B53"/>
       <Setter Property="Foreground" Value="#FF000000"/>
       <Setter Property="Padding" Value="3"/>
       <Setter Property="BorderThickness" Value="1"/>
       <Setter Property="BorderBrush">
        <Setter.Value>
         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
          <GradientStop Color="#FFA3AEB9" Offset="0"/>
          <GradientStop Color="#FF8399A9" Offset="0.375"/>
          <GradientStop Color="#FF718597" Offset="0.375"/>
          <GradientStop Color="#FF617584" Offset="1"/>
         </LinearGradientBrush>
        </Setter.Value>
       </Setter>
       <Setter Property="Template">
        <Setter.Value>
         <ControlTemplate TargetType="Button">
          <Grid>
           <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
             <VisualState x:Name="Normal"/>
             <VisualState x:Name="MouseOver">
              <Storyboard>
               <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
               <ColorAnimation Duration="0" To="#F2FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
               <ColorAnimation Duration="0" To="#CCFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
               <ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
              </Storyboard>
             </VisualState>
             <VisualState x:Name="Pressed">
              <Storyboard>
               <ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>
               <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
               <ColorAnimation Duration="0" To="#D8FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
               <ColorAnimation Duration="0" To="#C6FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
               <ColorAnimation Duration="0" To="#8CFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
               <ColorAnimation Duration="0" To="#3FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
               <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(MediaElement.AutoPlay)" Storyboard.TargetName="mediaElement">
                <DiscreteObjectKeyFrame KeyTime="0">
                 <DiscreteObjectKeyFrame.Value>
                  <System:Boolean>True</System:Boolean>
                 </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
               </ObjectAnimationUsingKeyFrames>
               <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(MediaElement.Source)" Storyboard.TargetName="mediaElement">
                <DiscreteObjectKeyFrame KeyTime="0">
                 <DiscreteObjectKeyFrame.Value>
                     <System:String>Kalimba.mp3</System:String>
                 </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
               </ObjectAnimationUsingKeyFrames>
              </Storyboard>
             </VisualState>
             <VisualState x:Name="Disabled">
              <Storyboard>
               <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
              </Storyboard>
             </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="FocusStates">
             <VisualState x:Name="Focused">
              <Storyboard>
               <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
              </Storyboard>
             </VisualState>
             <VisualState x:Name="Unfocused"/>
            </VisualStateGroup>
           </VisualStateManager.VisualStateGroups>
           <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="3">
            <Grid Background="{TemplateBinding Background}" Margin="1">
             <Border x:Name="BackgroundAnimation" Background="#FF448DCA" Opacity="0"/>
             <Rectangle x:Name="BackgroundGradient">
              <Rectangle.Fill>
               <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                <GradientStop Color="#C6FFFFFF" Offset="1"/>
               </LinearGradientBrush>
              </Rectangle.Fill>
             </Rectangle>
            </Grid>
           </Border>
           <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
           <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>
           <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
           <MediaElement x:Name="mediaElement" AutoPlay="False" HorizontalAlignment="Right" Height="36" Margin="0,-47,-139,0" VerticalAlignment="Top" Width="81" Source="Kalimba.mp3"/>
           
          </Grid>
         </ControlTemplate>
        </Setter.Value>
       </Setter>
      </Style>

     

    Best Regards,

    Tuesday, June 28, 2011 3:22 AM
  • Hi pune_silverlight,

    The second Storyboard is to set the Source of MediaElement. As you have found, only setting AutoPlay=true and source all together will trigger MediaElement to play.

     

    Best Regards,

    Tuesday, June 28, 2011 10:19 PM

All replies

  • HI 
    I allready have gone through that articles. But here the reqirement is different.
    Please read my question and understand my reuirements.

    Thursday, June 23, 2011 2:59 AM
  • Hi pune_silverlight,

    You can add a MediaElement inside Button template and set Source of MediaElement to a certain source and AutoPlay to true in Pressed visual state. Then it will play sound when click on the button.

    Below is the modified style, please have a try

    <Style x:Key="ButtonStyle1" TargetType="Button">
       <Setter Property="Background" Value="#FF1F3B53"/>
       <Setter Property="Foreground" Value="#FF000000"/>
       <Setter Property="Padding" Value="3"/>
       <Setter Property="BorderThickness" Value="1"/>
       <Setter Property="BorderBrush">
        <Setter.Value>
         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
          <GradientStop Color="#FFA3AEB9" Offset="0"/>
          <GradientStop Color="#FF8399A9" Offset="0.375"/>
          <GradientStop Color="#FF718597" Offset="0.375"/>
          <GradientStop Color="#FF617584" Offset="1"/>
         </LinearGradientBrush>
        </Setter.Value>
       </Setter>
       <Setter Property="Template">
        <Setter.Value>
         <ControlTemplate TargetType="Button">
          <Grid>
           <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
             <VisualState x:Name="Normal"/>
             <VisualState x:Name="MouseOver">
              <Storyboard>
               <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
               <ColorAnimation Duration="0" To="#F2FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
               <ColorAnimation Duration="0" To="#CCFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
               <ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
              </Storyboard>
             </VisualState>
             <VisualState x:Name="Pressed">
              <Storyboard>
               <ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>
               <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
               <ColorAnimation Duration="0" To="#D8FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
               <ColorAnimation Duration="0" To="#C6FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
               <ColorAnimation Duration="0" To="#8CFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
               <ColorAnimation Duration="0" To="#3FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
               <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(MediaElement.AutoPlay)" Storyboard.TargetName="mediaElement">
                <DiscreteObjectKeyFrame KeyTime="0">
                 <DiscreteObjectKeyFrame.Value>
                  <System:Boolean>True</System:Boolean>
                 </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
               </ObjectAnimationUsingKeyFrames>
               <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(MediaElement.Source)" Storyboard.TargetName="mediaElement">
                <DiscreteObjectKeyFrame KeyTime="0">
                 <DiscreteObjectKeyFrame.Value>
                     <System:String>Kalimba.mp3</System:String>
                 </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
               </ObjectAnimationUsingKeyFrames>
              </Storyboard>
             </VisualState>
             <VisualState x:Name="Disabled">
              <Storyboard>
               <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
              </Storyboard>
             </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="FocusStates">
             <VisualState x:Name="Focused">
              <Storyboard>
               <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
              </Storyboard>
             </VisualState>
             <VisualState x:Name="Unfocused"/>
            </VisualStateGroup>
           </VisualStateManager.VisualStateGroups>
           <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="3">
            <Grid Background="{TemplateBinding Background}" Margin="1">
             <Border x:Name="BackgroundAnimation" Background="#FF448DCA" Opacity="0"/>
             <Rectangle x:Name="BackgroundGradient">
              <Rectangle.Fill>
               <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                <GradientStop Color="#C6FFFFFF" Offset="1"/>
               </LinearGradientBrush>
              </Rectangle.Fill>
             </Rectangle>
            </Grid>
           </Border>
           <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
           <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>
           <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
           <MediaElement x:Name="mediaElement" AutoPlay="False" HorizontalAlignment="Right" Height="36" Margin="0,-47,-139,0" VerticalAlignment="Top" Width="81" Source="Kalimba.mp3"/>
           
          </Grid>
         </ControlTemplate>
        </Setter.Value>
       </Setter>
      </Style>

     

    Best Regards,

    Tuesday, June 28, 2011 3:22 AM
  • Hello shi ding,
         Thanks alot for the trick, I was working around the same idea but not working well.
         Here you have added source to media element in storyboard.
       Its working fine. But what is need to set source in storyboard ?
     if I remove this

    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(MediaElement.Source)" Storyboard.TargetName="mediaElement">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <System:String>/BtnClickSound.mp3</System:String>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>


     it is not working. What is need of this storyboard.

    Tuesday, June 28, 2011 6:40 AM
  • Hi pune_silverlight,

    The second Storyboard is to set the Source of MediaElement. As you have found, only setting AutoPlay=true and source all together will trigger MediaElement to play.

     

    Best Regards,

    Tuesday, June 28, 2011 10:19 PM
  • thats right. Thanks

    Wednesday, June 29, 2011 1:43 AM