I am trying to play an audio file (.wav) when a toggle button is pressed (and pause when pressed again). I had it working initially, but now I must of messed something up and am looking for help. This is how I'm doing it:
Create MediaElement in XAML
<MediaElement x:Name="myMediaElement" HorizontalAlignment="Center" VerticalAlignment="Center" PosterSource="vuvuzela.png" IsLooping="True" Source="Assets/vuvuzela.wav" Grid.Row="1" AutoPlay="False"/>
Then My ToggleButton is this:
<ToggleButton x:Name="ToggleButton" Content="Activate" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="2" FontSize="32" Style="{StaticResource ToggleButtonStyle1}" Checked="Tog_Checked" Unchecked="Tog_Unchecked"/>
And in my Code-behind, I have the ToggleButton's checked/unchecked handlers:
private void Tog_Checked(object sender, RoutedEventArgs e)
{
myMediaElement.Play();
}
private void Tog_Unchecked(object sender, RoutedEventArgs e)
{
myMediaElement.Pause();
}
Any ideas as to what might be going wrong or how to check it? Thanks!
EDIT: Debugged some more. Looks like the myMediaElement is not getting past the Opening state?
Apparently it was a hardware problem. My computer (MacBook running Bootcamp) was the issue. Finally found that answer in this post --> MediaElement in WinRT / Win8 does not work at all
Thanks for all the help though everyone
Is it important to you that your media element be visual like that?
Try this in your click event instead:
var _Media = new Windows.UI.Xaml.Controls.MediaElement() { AutoPlay = false };
var _Location = Windows.ApplicationModel.Package.Current.InstalledLocation;
var _Folder = await _Location.GetFolderAsync("Assets");
var _File = await _Folder.GetFileAsync("Ding.wav");
var _Stream = await _File.OpenAsync(Windows.Storage.FileAccessMode.Read);
_Media.SetSource(_Stream, _File.ContentType);
_Media.Play();
Have shown code required to play audio file. (code for playing next audio is bonus )
1.Add media element, play/pause/stop buttons to the XAML file.
<MediaElement x:Name="media" Source="Assets/page1/para1.mp3"
Grid.Column="0" Grid.Row="0" AutoPlay="True" />
<Button Click="StopMedia" Grid.Column="0" Grid.Row="1" Content="Stop" />
<Button Click="PauseMedia" Grid.Column="1" Grid.Row="1" Content="Pause" />
<Button Click="PlayMedia" Grid.Column="2" Grid.Row="1" Content="Play" />
2.Add the following code to the code-behind file:
private void StopMedia(object sender, RoutedEventArgs e)
{
media.Stop();
}
private void PauseMedia(object sender, RoutedEventArgs e)
{
media.Pause();
}
private void PlayMedia(object sender, RoutedEventArgs e)
{
media.Source = new Uri(this.BaseUri, "Assets/page1/para1.mp3");
media.Play();
}
protected override async void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
{
media.MediaEnded += media_MediaEnded;
}
private void media_MediaEnded(object sender, RoutedEventArgs e)
{
media.Source = new Uri(this.BaseUri, "Assets/page1/para2.mp3");
media.Play();
}
Related
How to clear the contents of a canvas in wpf? Tried canvas.clear() doesn't work.
Also how can i add zoom control in a wpf application? Zoom with a scroller to move the image.
Any help is greatly appreciated
You want to do MyCanvas.Children.Clear();
Tested with the following code:
<Grid>
<Canvas Name="MyCanvas"/>
<Button Click="Button_Click" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="200" Content="Clear"/>
</Grid>
and
public MainWindow()
{
InitializeComponent();
MyCanvas.Children.Add(new TextBlock() { Text = "Foo" });
}
private void Button_Click(object sender, RoutedEventArgs e)
{
MyCanvas.Children.Clear();
}
I want the program to show the attached Flyout when user Holding the control (on the mobile) or when the user Right-click the control (on PC).
Here is my XAML :
<DataTemplate x:DataType="data:Cards" x:Key="card">
<StackPanel x:Name="cardstack" Holding="cardstack_Holding" KeyDown="cardstack_KeyDown" >
<StackPanel Background="Blue" Height="100" />
<FlyoutBase.AttachedFlyout>
<MenuFlyout x:Name="optionpass">
<MenuFlyoutItem x:Name="delete" Text="Delete" Click="delete_Click"/>
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
</StackPanel>
</DataTemplate>
and this is my C# :
private void cardstack_Holding(object sender, HoldingRoutedEventArgs e)
{
FlyoutBase.ShowAttachedFlyout(sender as FrameworkElement);
}
private void cardstack_KeyDown(object sender, KeyRoutedEventArgs e)
{
if (e.Key == Windows.System.VirtualKey.RightButton)
{
FlyoutBase.ShowAttachedFlyout(sender as FrameworkElement);
}
}
When I tap and Hold the Stackpanel on the mobile simulator, the Holding event works, but when I Right-click on my PC, it crashes! It says that "There are no attached Flyout!". I do not know what is wrong.
"Have you tried RightTapped event? Is it working?"
Yes and No :(
I just found out the solution to solve my problem.
Turns out you have to name the MenuFlyout like my one is x:Name = "option_menu", and the Flyoutbase.AttachedFlyout cannot be in the DataTemplate, means you have to put it anywhere else except in the DataTemplate, so that the .cs file can find the name of the MenuFlyout.
Here is my C# :
public void cardstack_Holding(object sender, HoldingRoutedEventArgs e)
{
option_menu.ShowAt(sender as FrameworkElement);
e.Handled = true;
}
private void cardstack_PointerPressed(object sender, PointerRoutedEventArgs e)
{
Pointer pointr = e.Pointer;
if (pointr.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Mouse)
{
Windows.UI.Input.PointerPoint pointrd = e.GetCurrentPoint(sender as UIElement);
if (pointrd.Properties.IsRightButtonPressed)
{
option_menu.ShowAt(sender as FrameworkElement);
}
}
e.Handled = true;
}
Notice that before this I use ShowAttachedFlyout, now I use option_menu.ShowAt.
KeyDown event somehow did not work with my app, so I used PointerPressed instead.
Hope this helps. (0w0)/
I m trying to build a WPF browser application after using a lot WinForms.
I don't find out the way to delete a row in my dataGrid.
The update and insert part work fine.
I've read a lot of answers about ObservableCollection, but I think it s not suitable in my case.
I tried this on:
foodSupplierDataGrid.Items.Remove(foodSupplierDataGrid.SelectedItem);
But it gives an error.
Operation is not valid while ItemsSource is in use. Access and modify elements with ItemsControl.ItemsSource instead.
So what should i do?
XAML
<
<Page
<Page.Resources>
<local:larotis_general_testDataSet x:Key="larotis_general_testDataSet"/>
<CollectionViewSource x:Key="foodSupplierViewSource" Source="{Binding foodSupplier, Source={StaticResource larotis_general_testDataSet}}"/>
</Page.Resources>
<Grid Background="#FF066E19" Margin="-463,-198,-465,-234">
<dg:DataGrid x:Name="foodSupplierDataGrid" AutoGenerateColumns="True" EnableRowVirtualization="True" ItemsSource="{Binding}" Margin="296,134,288,224" RowDetailsVisibilityMode="VisibleWhenSelected" Loaded="foodSupplierDataGrid_Loaded" CanUserDeleteRows="True" />
<Menu>
...
</Menu>
<Button x:Name="Delete" Content="Button" HorizontalAlignment="Left" Margin="933,836,0,0" VerticalAlignment="Top" Width="75" Click="Delete_Click"/>
</Grid>
</Page>
The code behind
public partial class Supplier : Page
{
larotis_general_testDataSetTableAdapters.foodSupplierTableAdapter adapter = new larotis_general_testDataSetTableAdapters.foodSupplierTableAdapter();
larotis_general_testDataSet dataset = new larotis_general_testDataSet();
public Supplier()
{
InitializeComponent();
}
private void foodSupplierDataGrid_Loaded(object sender, RoutedEventArgs e)
{
adapter.Fill(dataset.foodSupplier);
this.DataContext = dataset.foodSupplier.DefaultView;
dataset.foodSupplier.foodSupplierRowChanged += new larotis_general_testDataSet.foodSupplierRowChangeEventHandler(SupplierRowModified);
dataset.foodSupplier.foodSupplierRowDeleted += new larotis_general_testDataSet.foodSupplierRowChangeEventHandler(SupplierRowModified);
}
void SupplierRowModified(object sender, larotis_general_testDataSet.foodSupplierRowChangeEvent e)
{
adapter.Update(dataset.foodSupplier);
}
private void Delete_Click(object sender, RoutedEventArgs e)
{
}
}
Finally found it by myself.
It was quite simple.
private void Delete_Click(object sender, RoutedEventArgs e)
{
dataset.foodSupplier.DefaultView.Delete(foodSupplierDataGrid.SelectedIndex);
this.DataContext = dataset.foodSupplier.DefaultView;
}
How could I unmasked and masked the password inside the passwordBox whenever I click the checkBox? I'm using C# WPF template.
Here is my .XAML code:
<PasswordBox x:Name="passwordBox_password" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Margin="5" Height="25" />
<CheckBox x:Name="checkBox_showPassword" Grid.Row="3" Grid.Column="1" Margin="5,0,5,5" Content="show password" Checked="checkBox_showPassword_Checked" Unchecked="checkBox_showPassword_Unchecked" />
Here is my .CS code:
private void checkBox_showPassword_Checked(object sender, RoutedEventArgs e)
{
// what to do here ?
}
private void checkBox_showPassword_Unchecked(object sender, RoutedEventArgs e)
{
// what to do here ?
}
Or is there another way to do it in WPF?
It's very simple to do that.
First you should to add the value PasswordChar in your PasswordBox:
<PasswordBox Name="PasswordHidden" PasswordChar="•"/>
Next under the PasswordBox tag you should to add a TextBox with Visibility value setted to Hidden:
<TextBox Name="PasswordUnmask" Visibility="Hidden"/>
And a trigger to show / hide the password, for example a simple text or a button. In my case I'm using a simple text.
<TextBlock Name="ShowPassword"/>
Next you need to add 3 different events in the trigger element, for example (this is valid for TextBlock or Image, if you want to use a Button you should to choose another events):
<TextBlock x:Name="ShowPassword" Text="SHOW" PreviewMouseDown="ShowPassword_PreviewMouseDown" PreviewMouseUp="ShowPassword_PreviewMouseUp" MouseLeave="ShowPassword_MouseLeave"/>
The events are PreviewMouseDown PreviewMouseUp and MouseLeave but you can choose the appropriate event for your situation.
Now in your code you need to program the functions:
private void ShowPassword_PreviewMouseDown(object sender, MouseButtonEventArgs e) => ShowPasswordFunction();
private void ShowPassword_PreviewMouseUp(object sender, MouseButtonEventArgs e) => HidePasswordFunction();
private void ShowPassword_MouseLeave(object sender, MouseEventArgs e) => HidePasswordFunction();
private void ShowPasswordFunction()
{
ShowPassword.Text = "HIDE";
PasswordUnmask.Visibility = Visibility.Visible;
PasswordHidden.Visibility = Visibility.Hidden;
PasswordUnmask.Text = PasswordHidden.Password;
}
private void HidePasswordFunction()
{
ShowPassword.Text = "SHOW";
PasswordUnmask.Visibility = Visibility.Hidden;
PasswordHidden.Visibility = Visibility.Visible;
}
The following link will bring you to the answer you are looking for my good sir. Mr Lamas did a great job of answering the how-to so I'd rather redirect you to the answer :)
showing password characters on some event for passwordbox
I recommend Using MahApps.Metro ... after installing it from nuget.org ... you must use it in the head of your xaml like this
xmlns:controls="http://metro.mahapps.com/winf/xaml/controls"
and then ... just use it's style for your PasswordBox control
<PasswordBox Style="{StaticResource MetroButtonRevealedPasswordBox}" />
you can even change the content for the show icon using the controls:PasswordBoxHelper.RevealButtonContent attached property
i have a .mov file that i want to play using MediaElement of WPF , i can play and pause with no worries as i use MediaState.Manual , but i want to show the first image or frame of the video when i load it , the source is set in code behind , i tried MediaElement.ScrubbingEnabled = true both code behind and xaml but it still doesn't show.
Here is my code ( xaml side ) :
<DockPanel Height="386" HorizontalAlignment="Center" Name="dockPanel1" VerticalAlignment="Top" Width="731">
<MediaElement Name="McMediaElement" LoadedBehavior="Manual" UnloadedBehavior="Manual" Stretch="Fill" MediaOpened="Element_MediaOpened" MediaEnded="Element_MediaEnded" OpacityMask="#FF040410" Height="386" IsVisibleChanged="SingAlong_IsVisibleChanged" ScrubbingEnabled="True"></MediaElement>
</DockPanel>
Code behind ( xaml.cs) :
private void PlayAudio()
{
McMediaElement.LoadedBehavior = MediaState.Manual;
McMediaElement.Source = new Uri("../../SingAlong/GrassHopper and Ants/ants2.mov", UriKind.RelativeOrAbsolute);
McMediaElement.ScrubbingEnabled = true;
McMediaElement.Play();
}
private void button1_Click_1(object sender, RoutedEventArgs e) // Play button
{
if (McMediaElement.Source != null)
{
McMediaElement.Play();
}
else
PlayAudio();
}
private void button2_Click(object sender, RoutedEventArgs e) // Pause button
{
McMediaElement.Pause();
}
From what I can gather, you are loading your video (setting the Source) only when you click button1, yet you want the first frame to show before this happens. To accomplish this, you will have to load your video in another method, preferably when your Page or Window loads. Then you can do the following:
McMediaElement.ScrubbingEnabled = true;
McMediaElement.Play();
McMediaElement.Pause();