Windows Phone - using DependencyProperty within MediaElement - windows

This is the code I have in my custom UserControl:
generic.xaml:
<UserControl x:Class="SoundControl.SoundClass"
x:Name="Uc"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel HorizontalAlignment="Stretch">
<Grid x:Name="mygrid"
Background="Transparent"
Width="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="70*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="350*" />
<ColumnDefinition Width="70*" />
</Grid.ColumnDefinitions>
<Button x:Name="SoundButton"
Content="{Binding MyName, ElementName=Uc}"
Grid.Column="0"
Grid.Row="0"
Click="RingtoneButton_Click" />
<Button x:Name="RingtoneButton"
Grid.Column="1"
Grid.Row="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Click="RingtoneButton_Click">
<Image Source="/Images/note.png"
Stretch="Fill"
Height="30"
Width="30" />
</Button>
<MediaElement x:Name="SoundContainer"
Source="{Binding MySound, ElementName=Uc}"
AutoPlay="False" />
</Grid>
</StackPanel>
</UserControl>
SoundControl.cs
namespace SoundControl
{
public partial class SoundClass : UserControl
{
SaveRingtoneTask saveRingtoneChooser;
public SoundClass()
{
// For ringtone
saveRingtoneChooser = new SaveRingtoneTask();
saveRingtoneChooser.Completed += new EventHandler<TaskEventArgs>(saveRingtoneChooser_Completed);
}
public static readonly DependencyProperty SoundSourceProperty =
DependencyProperty.Register("MySound", typeof(MediaElement), typeof(SoundClass), null);
public static readonly DependencyProperty SoundNameProperty =
DependencyProperty.Register("MyName", typeof(string), typeof(SoundClass), null);
public MediaElement MySound
{
get { return (MediaElement)this.GetValue(SoundSourceProperty); }
set { base.SetValue(SoundSourceProperty, value); }
}
public string MyName
{
get { return (string)this.GetValue(SoundNameProperty); }
set { base.SetValue(SoundNameProperty, value); }
}
public SoundClass()
{
InitializeComponent();
}
private void SoundButton_Click(object sender, RoutedEventArgs e)
{
SoundContainer.Play();
}
private void RingtoneButton_Click(object sender, RoutedEventArgs e)
{
saveRingtoneChooser.Source = new Uri(SoundContainer.Source.AbsoluteUri);
saveRingtoneChooser.DisplayName = MyName;
saveRingtoneChooser.Show();
}
void saveRingtoneChooser_Completed(object sender, TaskEventArgs e)
{
switch (e.TaskResult)
{
//Logic for when the ringtone was saved successfully
case TaskResult.OK:
MessageBox.Show("Ringtone saved.");
break;
//Logic for when the task was cancelled by the user
case TaskResult.Cancel:
MessageBox.Show("Save cancelled.");
break;
//Logic for when the ringtone could not be saved
case TaskResult.None:
MessageBox.Show("Ringtone could not be saved.");
break;
}
}
}
}
and my MainPage.xaml
<SoundControl:SoundClass
HorizontalAlignment="Left"
Grid.Row="0"
VerticalAlignment="Top"
Grid.ColumnSpan="2"
Width="456"
MyName="TEST123"
MySound="/project/test.mp3"
/>
The problem is the XAML in Mainpage. The MySound property is giving me the error
The TypeConverter for "MediaElement" does not support converting from a string.
Any help you can provide will be greatly appreciated!

The Source property of the MediaElement type takes a Uri, not another MediaElement object. Change the type of the dependency property MySound to Uri, not MediaElement. (Don't forget also to replace typeof(MediaElement) with typeof(Uri) within SoundSourceProperty.)
Incidentally, I'd also recommend renaming the two dependency property identifiers you have (SoundSourceProperty and SoundNameProperty) to MySoundProperty and MyNameProperty respectively. There is a convention that the name of the dependency property's identifier (i.e. the public static readonly field) is the name of the property that uses it (in your case MySound or MyName) followed by Property. Some tools will expect this convention to be followed.

Related

Xamrin Button is not working for mmvm-light Relay Command

In my Xamrin forms code i have configured MVVM light
RelayCommand is not hitting even though I have set the property in xaml page for the command.
XAML
<?xml version="1.0" encoding="utf-8"?><ContentPage BackgroundColor="White" xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ContractorActionSolution.CSA.CSAContentPages.Demo">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness">
<OnPlatform.iOS>0,20,0,0</OnPlatform.iOS>
</OnPlatform>
</ContentPage.Padding>
<ContentPage.Content>
<StackLayout Padding="10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image x:Name="imgLogo" Source="sisystems_logo.jpg" HorizontalOptions="FillAndExpand" VerticalOptions="Start"/>
<StackLayout VerticalOptions="CenterAndExpand" Padding="20" HorizontalOptions="FillAndExpand">
<Label x:Name="lblmsg" TextColor="#F25B63" Text="Error Message"/>
<Entry x:Name="txtUserName" Placeholder="Email"/>
<Entry x:Name="txtPassword" Placeholder="Password" IsPassword="True"/>
<Button Command="{Binding IncrementCommand}" Text="Continue"/>
<Label Text="Can't Login ?" TextColor="#F25B63" HorizontalOptions="Center"/>
</StackLayout>
</StackLayout>
</ContentPage.Content>
Code
public partial class Demo : ContentPage
{
DemoViewModel _myViewModel;
public Demo ()
{
InitializeComponent ();
}
protected override void OnAppearing()
{
base.OnAppearing();
BindingContext = App.Locator.DemoVM;
_myViewModel = BindingContext as DemoViewModel;
}
protected override void OnDisappearing()
{
base.OnDisappearing();
_myViewModel.CleanUP();
}
}
Model
public class DemoViewModel : BaseViewModel
{
private string _name;
public string Name
{
get { return _name; }
set { Set(() => Name, ref _name, value); }
}
private RelayCommand _incrementCommand;
/// <summary>
/// Gets the IncrementCommand.
/// </summary>
public RelayCommand IncrementCommand
{
get
{
return _incrementCommand ?? (_incrementCommand = new RelayCommand(
() =>
{
}));
}
}
public void CleanUP()
{
Name = string.Empty;
}
}
I have also tried using RelayCommand and RelayAsyncCommand both are not working.
Property bindings are working fine,
I can add binding for entry with a string property, but not able to add RelayCommand with a button.
The problem might be the fact that the handler is empty and optimization actually omits it after compilation. Try to add anything inside, like Debug.WriteLine("Test"); to see if the breakpoint is hit then.

Windows Phone: Emoticons Grid

How to create an Emoticons Grid in windows phone?
I am new in windows phone and I have not idea how to implement this and which control to use... I have searched on google but didn't get proper solution.I tried to make with grid control but its not working.
Ive created a custom control for this, like so:
<Controls:ChildWindow x:Class="ChildWindows.SmileyDialog"
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"
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=CustomControls"
xmlns:Toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
BorderThickness="2" mc:Ignorable="d"
BorderBrush="{StaticResource PhoneBorderBrush}"
Style="{StaticResource ChildWindowTemplate}" >
<Grid x:Name="LayoutRoot" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{ StaticResource PhoneBackgroundBrush }" >
<ListBox x:Name="itemControl" Margin="4" ItemsSource="{Binding}" Background="White">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Toolkit:WrapPanel HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border Margin="10" BorderThickness="1" BorderBrush="Silver">
<Image Margin="5" Width="64" Height="64" Source="{Binding ImagePaths.Large_69x69}" Toolkit:TiltEffect.IsTiltEnabled="True" />
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Controls:ChildWindow>
The code behind this control:
public partial class SmileyDialog
{
#region Fields
public event CloseEventHandler<EmoticonItem> OnClose;
#endregion Fields
#region Properties
public bool IsOpened { get { return ChildWindowPopup.IsOpen; } }
#endregion Properties
#region Constructor
public SmileyDialog()
{
InitializeComponent();
itemControl.ItemsSource = EmoticonsMap.GetEmoticons();
}
#endregion Constructor
#region overrides
protected override void OnOpened()
{
var page = ((ContentControl)Application.Current.RootVisual).Content as PhoneApplicationPage;
if (page != null) page.BackKeyPress += PageBackKeyPress;
itemControl.SelectedItem = null;
itemControl.SelectionChanged += ItemControlSelectionChanged;
}
protected override void OnClosing(CancelEventArgs e)
{
var page = ((ContentControl)Application.Current.RootVisual).Content as PhoneApplicationPage;
if (page != null) page.BackKeyPress -= PageBackKeyPress;
itemControl.SelectionChanged -= ItemControlSelectionChanged;
if (OnClose != null) OnClose(itemControl.SelectedItem as EmoticonItem);
}
#endregion overrides
#region UI events
private void PageBackKeyPress(object sender, CancelEventArgs e)
{
Close();
}
private void ItemControlSelectionChanged(object sender, SelectionChangedEventArgs e)
{
Close();
}
#endregion UI events
}
Usage:
private SmileyDialog _smileDialog;
private void RadSmileyImageButton_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
if (_smileDialog != null && _smileDialog.IsOpened) return;
//SetApplicationBarVisibility(false);
if (_smileDialog == null)
{
_smileDialog = new SmileyDialog();
_smileDialog.OnClose += SmileDialogOnClose;
}
_smileDialog.Show();
}
I hope you will be able to reuse the code, if not comment me for help.

window phone dynamic binding data

I'm new winphone. I have a issue with binding data.
I have a class weather with 2 properties Temp_C, and Temp_F. I want to bind temperature to a textblock.
I also have a switch to choose C and F.
How can I do to when I switch to C => text block binding Temp_C when I switch to F => text block binding Temp_F.
A solution could be to just have two text block and just toggle there visibility:
<TextBlock Text="{Binding Temp_C}" Visibility="{Binding Checked,ElementName=temperatureTogled,Converter={StaticResource boolToVisibilityConverter}}"/>
<TextBlock Text="{Binding Temp_F}" Visibility="{Binding Checked,ElementName=temperatureTogled,Converter={StaticResource boolToNotVisibilityConverter}}"/>
<toolkit:ToggleSwitch x:Name="temperatureTogled" .. />
Or otherwise another solution is just to add a Temp property and a IsCelsus property in your viewModel, do the switch between the two value inside your Temp property and bind the Temp property:
public class CurrentCondition : INotifyPropertyChanged
{
private bool isC;
public bool IsC
{
get { return isC; }
set
{
if (isC != value)
{
isC = value;
this.RaisePropertyChanged("IsC");
this.RaisePropertyChanged("TempShow");
}
}
}
private string temp_C;
public string Temp_C
{
get { return temp_C; }
set
{
if (temp_C != value)
{
temp_C = value;
this.RaisePropertyChanged("Temp_C");
this.RaisePropertyChanged("TempShow");
}
}
}
private string temp_F;
public string Temp_F
{
get { return temp_F; }
set
{
if (temp_F != value)
{
temp_F = value;
this.RaisePropertyChanged("Temp_F");
this.RaisePropertyChanged("TempShow");
}
}
}
private string tempShow;
public string TempShow
{
get
{
if (this.isC == true)
{
return temp_C + "°C";
}
else
{
return temp_F + "°F";
}
return tempShow;
}
}
}
<TextBlock Text="{Binding TempShow}"/>
<toolkit:ToggleSwitch x:Name="temperatureTogled" Checked="{Binding IsC,Mode=TwoWay}" />
Xaml
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock TextAlignment="Center" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}" Grid.ColumnSpan="2" Grid.Row="0" x:Name="txtTemperature" />
<RadioButton Checked="CentTempChecked" GroupName="Temperature" Grid.Column="0" Grid.Row="1" Content="C" />
<RadioButton Checked="FarTempChecked" GroupName="Temperature" Grid.Column="1" Grid.Row="1" Content="F" />
</Grid>
Code Behind
using System.Globalization;
public partial class MainPage : PhoneApplicationPage
{
private TemperatureUnitType temperatureUnitType = TemperatureUnitType.Celsius;
public MainPage()
{
InitializeComponent();
BindTemperature();
}
private void CentTempChecked(object sender, RoutedEventArgs e)
{
this.temperatureUnitType = TemperatureUnitType.Celsius;
BindTemperature();
}
private void FarTempChecked(object sender, RoutedEventArgs e)
{
this.temperatureUnitType = TemperatureUnitType.Fahrenheit;
BindTemperature();
}
private void BindTemperature()
{
var temperature = new Temperature();
txtTemperature.Text =
this.temperatureUnitType == TemperatureUnitType.Celsius ?
temperature.Celsius.ToString(CultureInfo.InvariantCulture) : temperature.Fahrenheit.ToString(CultureInfo.InvariantCulture);
}
}
public enum TemperatureUnitType
{
Celsius = 0,
Fahrenheit = 1,
}
public class Temperature
{
public double Celsius { get { return 45.3d; } }
public double Fahrenheit { get { return 96.3d; } }
}
In a publication app, you should probably use the toggle control present in the WP toolkit. You should also be persisting the temperature preference in the IsolatedStorage DB.

WP7/Silverlight How do you toggle a checkbox inside a list?

I'm having issues trying to figure this out. Basically, I have a listbox with a checkbox in it, making it a "Checked" listbox.
What I want to do is when a user hits a button, the checkbox is toggled (either shows or hides).
I've tried binding the visibility to a property in my view model but that isn't work.
What is the correct way to go about this? I've searched google and SO and couldn't find anything solid.
Thanks.
Bind visibility of the checkbox to a property of the class contained in the list that is the items source of the listbox.
Here is some code. This was a quick test and uses code behind but should be easily ported to your view model.
Class:
public class CheckString
{
public Visibility Visibility
{
get
{
Visibility retval = Visibility.Collapsed;
if (IsChecked)
{
retval = Visibility.Visible;
}
return retval;
}
}
public bool IsChecked { get; set; }
public string Description { get; set; }
public CheckString() {}
}
Code behind
public partial class MainPage : PhoneApplicationPage
{
public List<CheckString> CheckStringList { get; set; }
// Constructor
public MainPage()
{
InitializeComponent();
SetupList();
DataContext = this;
}
private void SetupList()
{
CheckStringList = new List<CheckString>();
CheckString cs1 = new CheckString { Description = "Test 1"};
CheckStringList.Add(cs1);
CheckString cs2 = new CheckString { IsChecked = true, Description = "Test 2" };
CheckStringList.Add(cs2);
CheckString cs3 = new CheckString { Description = "Test 3" };
CheckStringList.Add(cs3);
}
}
Xaml
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="Auto" />
<ColumnDefinition
Width="*" />
</Grid.ColumnDefinitions>
<CheckBox
Grid.Column="0"
Visibility="{Binding Visibility}"
IsChecked="{Binding IsChecked}" />
<TextBlock
Grid.Column="1"
Text="{Binding Description}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

ToggleSwitch - how to enable text?

I am using two toggleSwitches as below from the WP7 control toolkit. Based on the first toggle, the second toggle switch should be enabled or disabled. The disable of the second toggle switch works fine but when the enable is performed, the text foreground is never changed. Please help me figure out why this is happening.
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<toolkit:ToggleSwitch Header="twitter" Margin="10,15,0,0" Name="toggleTwitter" Checked="toggleTwitter_Checked" Unchecked="toggleTwitter_Unchecked">
<toolkit:ToggleSwitch.HeaderTemplate>
<DataTemplate>
<ContentControl FontSize="{StaticResource PhoneFontSizeLarge}" Foreground="{StaticResource PhoneForegroundBrush}" Content="{Binding}"/>
</DataTemplate>
</toolkit:ToggleSwitch.HeaderTemplate>
<toolkit:ToggleSwitch.ContentTemplate>
<DataTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Status: " FontSize="{StaticResource PhoneFontSizeMedium}"/>
<ContentControl HorizontalAlignment="Left" FontSize="{StaticResource PhoneFontSizeMedium}" Content="{Binding}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</toolkit:ToggleSwitch.ContentTemplate>
</toolkit:ToggleSwitch>
<toolkit:ToggleSwitch Header="" Margin="10,100,0,-35" Name="toggleTwitterAutoPublish" Checked="toggleTwitterAutoPublish_Checked" Unchecked="toggleTwitterAutoPublish_Unchecked">
<toolkit:ToggleSwitch.ContentTemplate>
<DataTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Auto Publish: " FontSize="{StaticResource PhoneFontSizeMedium}" Margin="0,-15,0,0" />
<ContentControl HorizontalAlignment="Left" FontSize="{StaticResource PhoneFontSizeMedium}" Content="{Binding}" IsEnabled="{Binding}" Margin="0,-15,0,0"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</toolkit:ToggleSwitch.ContentTemplate>
</toolkit:ToggleSwitch>
</Grid>
public partial class MainPage : PhoneApplicationPage
{
bool isConnected = false;
bool isAutoPublish = false;
public const string SIGNED_IN_MESSAGE = "Signed In";
public const string SIGNED_OUT_MESSAGE = "Signed Out";
// Constructor
public MainPage()
{
InitializeComponent();
}
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
toggleTwitter.IsChecked = isConnected;
AlterTwitterControlsDisplay();
base.OnNavigatedTo(e);
}
#region Twitter
private void AlterTwitterControlsDisplay()
{
if (toggleTwitter.IsChecked.Value)
{
toggleTwitter.Content = SIGNED_IN_MESSAGE;
toggleTwitterAutoPublish.IsEnabled = true;
toggleTwitterAutoPublish.IsChecked = isAutoPublish;
}
else
{
toggleTwitter.Content = SIGNED_OUT_MESSAGE;
toggleTwitterAutoPublish.IsEnabled = false;
toggleTwitterAutoPublish.IsChecked = false;
}
}
private void toggleTwitter_Checked(object sender, RoutedEventArgs e)
{
isConnected = true;
AlterTwitterControlsDisplay();
}
private void toggleTwitter_Unchecked(object sender, RoutedEventArgs e)
{
isConnected = false;
AlterTwitterControlsDisplay();
}
private void toggleTwitterAutoPublish_Checked(object sender, RoutedEventArgs e)
{
isAutoPublish = true;
}
private void toggleTwitterAutoPublish_Unchecked(object sender, RoutedEventArgs e)
{
isAutoPublish = false;
}
#endregion Twitter
}
On doing
toggleTwitterAutoPublish.IsChecked = false;
(in AlterTwitterControlsDisplay function's else part), the toggleTwitterAutoPublish_Unchecked is triggered which sets isAutoPublish = false
hence next time when you try to do
toggleTwitterAutoPublish.IsChecked = isAutoPublish;
here isAutoPublish is false hence you may not get the desired result.
That is what I have understood from your question. If this was not the problem please explain it clearly. Hope this helps

Resources