Outside a datatemplate On..PropertyValueChanged doesn't run - c#

I have a custom control which uses On(propertyname)ValueChanged to read items from a dictionary and set up the parameters for that control.
I would also like to use that control as a stand alone and not just a databound control.
So how come OnPropertyValueChanged only works in a dataset?
Do Dependency properties only work from the xaml, does that mean i will have to bind from properties in the container class? (may have answered my own question)
in my mainpage.xaml
<local:spriteToggleButton x:Name="testButton" HorizontalAlignment="Center" Text="{Binding testString, ElementName=mainPage}" Correct="true" Margin="93,561,93,63" Grid.Row="1" Sprites="{Binding testSprites, ElementName=mainPage}" />
in mainpage.xaml.cs
testSprites.Add("idle", idlesprite); // a dictionary of a custom sprite object
testSprites.Add("highlighted", highlightedsprite);
testSprites.Add("selected", selectedsprite);
testString = "this is a test"; // this property is picked up by the binding.
when i add sprites from the binding it runs the dependency property changed callback but the properties inside the spriteToggleButton class are not updating when the control is used standalone
this is my dependency property changed callback
private static void OnSpritesPropertyValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var control = d as spriteToggleButton;
var sprites = e.NewValue as Dictionary<string, Quiz.Sprite>;
control.idleSprite = sprites["idle"];
control.selectedSprite = sprites["selected"];
control.highlightedSprite = sprites["highlighted"];
}
this is inside my spriteToggleButton
<local:spriteView x:Name="Idle" Width="294" Height="57" HorizontalAlignment="Center" Sprite="{Binding idleSprite, ElementName=toggleSpriteControl}" />
...
Sprite is also a dependency property in that control

I very much suspect that you haven't implemented idleSprite, selectedSprite and highlightedSprite of the spriteToggleButton class as dependency properties. Do that and it should start working.
For what its worth it appears you are implementing spriteToggleButton using a UserControl, I would instead derive from ToggleButton and replace the default template.

Related

WPF binding xaml UI property to dynamic instance control property

I have a custom media player object that I create in code behind from a user control. There can be 1 to 4 of these at any time, but i want to bind the volume and the mute property of only one to a xaml control EG.
The control is:
MediaControlplayer vcMediaPlayerMaster = new MediaControlplayer();
In this case the mute option to the ischecked state of the control does not work. How can I hook the binding up to the properties of the control when it is instantiated in code behind ?
xaml is like this. The variable vcMediaPlayerMaster is a global variable in code behind. When i instantiated it i assumed its declaration as a global predefined variable would allow the xaml below to bind to it, but it seems not to be the case.
<ToggleButton x:Name="btnAudioToggle" ToolTip="Audio Mute/Unmute"
Click="BtnAudioToggle_OnClick" IsChecked="{Binding Mode =TwoWay,
ElementName=vcMediaPlayerMaster, Path=Mute}" BorderBrush="LightBlue"
Width="32" Height="32" Margin="0,5,10,10" Background="{StaticResource
IbAudio}" Style="{DynamicResource ToggleButtonStyle1}" > </ToggleButton>
I thought perhaps creating a binding in code behind may be the way to go, but i cant seem to find a simple example that explains the code behind process to do that to fit my case.
You could create a helper class to hold the currently active MediaPlayer.
As a simple example:
public class MediaPlayerHelper : INotifyPropertyChanged
{
private MediaControlplayer currentPlayer;
public static MediaPlayerHelper Instance { get; } = new MediaPlayerHelper();
public MediaControlplayer CurrentPlayer
{
get => this.currentPlayer;
set { /* Implement a setter with INotifyPropertyChanged */ }
}
// Implement INotifyPropertyChanged here
}
The binding to this would look like the following
<Slider Value="{Binding Volume, Source={x:Static helper:MediaPlayerHelper.Instance}}"/>
Don't forget to include the namespace in the opening tag of your class in XAML:
xmlns:helper="clr-namespace:SomeNamespace.Helper"
Now you just have to change the currently used MediaPlayer whenever it changes:
MediaPlayerHelper.Instance.CurrentPlayer = newCurrentPlayer;
Ok i finally got it to work. Applied the binding in code behind fully.
I was able to bind the property i wanted to the ischecked property of a button to toggle the bool property of the mediaplayer object
MediaControlplayer vcMediaPlayerMaster = new MediaControlplayer();
Binding myMuteBinding = new Binding("Mute");
myMuteBinding.Source = vcMediaPlayerMaster;
myMuteBinding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
myMuteBinding.Mode = BindingMode.TwoWay;
btnAudioToggle.SetBinding(SimpleButton.IsCheckedProperty, myMuteBinding);
So this worked fine for me and i used the same principle to bind other properties.

C# referencing a Grid in WPF to change properties

Hello im new to making apps with WPF and XAML in Visual Studio. So I have a grid I want to change its properties in the code.
My Grid's properties:
<Grid HorizontalAlignment="Left"
Height="603"
Margin="0,51,0,0"
x:Name="usersPan"
VerticalAlignment="Top"
Width="1286">
How I have been trying to change its properties
this.usersPan.SetValue(Grid.WidthProperty, PAN_SIZE);
usersPan.SetValue(Grid.WidthProperty, PAN_SIZE);
usersPan.Width = 0;
usersPan.Visibility = Visibility.Collapsed;
When I try to do that^ it says null reference for userPan
Thanks
Noooooooo, Don't ever do that. Make a ViewModel that is bound to the Grid's Width property, and then just change the value.
My suspicion is that you do not need this at all. Have a look into containers, and how to position them.
In all of this years, there have been rare occasions I needed to do that and I suspect you do not need to. Tell me what you are doing.
EDIT:
You have a VM which needs to implement the NotifyPropertyChanged interface (I won't do that here, there are plenty of examples on hoew to do that)
public class MainVM
{
public ObservableCollection<TabVM> TabsVms {get;set;}
public int SelectedIndex {get;set}
}
bound to the control
<TabControl DataContext={TabsVMs} SelectedIndex="{Binding SelectedIndex}">
...
</TabControl>
And in runtime you create a couple of Tabs
var TabsVMs = new ObservableCollection<TabVM>();
TabsVMs.add(new TabVM());
TabsVMs.add(new TabVM());
TabsVMs.add(new TabVM());
Then in runtime you change the value of the index.
MainVm.SelectedIndex = 1
and the the coresponding tab will become selected.
EDIT:
I can also recommend you to use Fody for the MVVM notification.
Also, when it comes to bindings, I can recommend you to use WPF inspector. a handy little tool
The best way to write WPF programs is to use the MVVM (Model-View-View Model) design pattern. There are two (2) ideas behind MVVM:
Write as little code as possible in the view's code-behind and put all of the logic in the View Model object, using WPF's data binding feature to connect the properties of the View Model object to the view's controls.
Separate the logic from the display so you can replace the view with some other construct without having to change the logic.
MVVM is a huge topic on its own. There are lots of articles about it, and frameworks that you can use to build your program. Check out MVVM Light, for example.
Don't know exactly why Grid is invisible in code-behind, but You can access it's properties using events (but don't think it is perfect solution).
For example add to your grid event Loaded
<Grid HorizontalAlignment="Left"
Height="603"
Margin="0,51,0,0"
x:Name="usersPan"
VerticalAlignment="Top"
Width="1286"
Loaded="FrameworkElement_OnLoaded">
and then from code-behind you can access grid in next way:
private void FrameworkElement_OnLoaded(object sender, RoutedEventArgs e)
{
var grid = sender as Grid;
if (grid != null)
{
grid.Width = 0;
}
}
Better solution :
Add some boolean property to your ViewModel like public bool IsGridVisible{get;set;}
And bind it to your Grid
<Grid HorizontalAlignment="Left"
Height="603"
Margin="0,51,0,0"
x:Name="usersPan"
VerticalAlignment="Top"
Width="1286"
Visibility="{Binding Path=IsGridVisible, Converter={StaticResource BoolToVis}">
where BoolToVis is converter which converts true to Visible and false to Hidden. You can define it in App.xaml like :
<BooleanToVisibilityConverter x:Key="BoolToVis" />
I was able to do something like this so I can change properties outside of an event.
private Grid userGrid;
private void onUserGridLoaded(object sender, RoutedEventArgs e)
{
userGrid = sender as Grid;
}

How do i override a dependency property set in XAML to the value i need to in codebehind

I have a dependency property RecordContainerGenerationMode defined for XamDatagrid , irrespective of what the user sets in the XAML i need it to default to a specific value PreLoad .
How do i accomplish this ? The Xamdatagrid is a infragistics grid which really allow me to hide the dependency implementation.
I tried setting the value in the constructor of the xamdatagrid but the XAML defined value is overwritten onto it.
<Controls:XamDataGrid Grid.Row="1"
HorizontalAlignment="Stretch"
x:Name="gridTrdDetail"
DataSource="{Binding Items}"
SelectedRecords="{Binding SelectedObjects, Mode=TwoWay}"
IncludeDefaultCommands="True"
VerticalAlignment="Stretch"
ScrollingMode="Immediate"
CellContainerGenerationMode="Recycle"
GroupByAreaMode="MultipleFieldLayoutsCompact"
RecordContainerGenerationMode="PreLoad" SelectedSum="{Binding Sum,Mode=OneWayToSource}"
IsSynchronizedWithCurrentItem="True">
and this is how i set it in constructor : -
public XamDataGrid()
{
this.SetValue(XamDataGrid.RecordContainerGenerationModeProperty,ItemContainerGenerationMode.PreLoad);
}
Has anyone run into this kinda issue anywhere?
I'm not sure why you would want to do something like that. Like Anatolii Gabuza said, definite code smell there. It's something you'll need to really rethink.
The way everything gets generated is the control gets constructed (calling default constructor), then the properties in XAML get assigned, then if there are data bindings, the value gets updated at run time.
If you don't want the value to change, the easiest way is just don't expose it! If you need to read the value, maybe you can try a read only dependency property.
If you REALLY want it to expose the Dependency Property, you can set it in the property changed event. But, that kind of defeats the purpose of having a dependency property in the first place.
public static readonly DependencyProperty RecordContainerGenerationModeProperty = DependencyProperty.Register(
"RecordContainerGenerationMode",
typeof(ItemContainerGenerationMode),
typeof(XamDataGrid),
new PropertyMetadata(ItemContainerGenerationMode.PreLoad, OnRecordContainerGenerationModeChanged));
private static void OnRecordContainerGenerationModeChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
{
XamDataGrid control = obj as XamDataGrid;
if (control != null)
{
ItemContainerGenerationMode newMode = (ItemContainerGenerationMode)args.NewValue;
if (newMode != ItemContainerGenerationMode.PreLoad)
{
control.RecordContainerGenerationMode = ItemContainerGenerationMode.PreLoad;
}
}
}

Getting parent of new tab after adding to bound TabControl (mvvm)

I'm adding a close button to my tabs using the following guide:
http://www.codeproject.com/Articles/84213/How-to-add-a-Close-button-to-a-WPF-TabItem
This has become a problem because the event uses the 'parent' of the added tab to remove that tab from the tabcontrol. I'm binding the tab control using mvvm, so the parent property is apparently not being set and giving me a null reference exception for the parent when the event tries to remove from it.
Here's the binding so you get the idea:
<TabControl Name="tabControl" Margin="0,22,0.2,-5.2" ItemsSource="{Binding Tabs}" Background="#FF4C76B2"/>
Heres where the tabs are being added.
private void AddTab(object tabName)
{
ClosableTab newTab = new ClosableTab();
newTab.Title = "title?";
//newTab.Header = tabName;
TextBox test = new TextBox();
test.Text = "CONTENT (" + tabName + ") GOES HERE";
newTab.Content = test;
Tabs.Add(newTab);
OnPropertyChanged("Tabs");
}
Here is the event where the null reference is taking place:
void button_close_Click(object sender, RoutedEventArgs e)
{
((TabControl)this.Parent).Items.Remove(this);
}
As I see it there are two options:
try to find another way to remove the tab (without the parent
property)
try to find a way to somehow set the parent property (which cant be
done directly, it throws a compiler error)
That doesn't sound like MVVM to me. We work with data, not UI elements. We work with collections of classes that contain all of the properties required to fulfil some requirement and data bind those properties to the UI controls in DataTemplates. In this way, we add UI controls by adding data items into these collections and let the wonderful WPF templating system take care of the UI.
For example, you have a TabControl that we want to add or remove TabItems from... in a proper MVVM way. First, we need a collection of items that can represent each TabItem:
public static DependencyProperty ItemsProperty = DependencyProperty.Register("Items", typeof(ObservableCollection<string>), typeof(TestView));
public ObservableCollection<string> Items
{
get { return (ObservableCollection<string>)GetValue(ItemsProperty); }
set { SetValue(ItemsProperty, value); }
}
I'm just using a DependencyProperty because I knocked this up in a UserControl and I'm just using a collection of strings for simplicity. You'll need to create a class that contains all of the data required for the whole TabItem content. Next, let's see the TabControl:
<TabControl ItemsSource="{Binding Items}" ItemTemplate="{StaticResource ItemTemplate}" />
We data bind the collection to the TabControl.ItemsSource property and we set the TabControl.ItemTemplate to a Resource named ItemTemplate. Let's see that now:
xmlns:System="clr-namespace:System;assembly=mscorlib"
...
<DataTemplate x:Key="ItemTemplate" DataType="{x:Type System:String}">
<TabItem Header="{Binding}" />
</DataTemplate>
This DataTemplate defines what each item in our collection will look like. For simplicity's sake, our strings are just data bound to the TabItem.Header property. This means that for each item we add into the collection, we'll now get a new TabItem with its Header property set to the value of the string:
Items.Add("Tab 1");
Items.Add("Tab 2");
Items.Add("Tab 3");
Note that I included the System XML Namespace Prefix for completeness, but you won't need that because your DataType will be your own custom class. You'll need more DataTemplates too. For example, if your custom class had a Header property and a Content property, which was another custom class, let's say called Content, that contained all of the properties for the TabItem.Content property, you could do this:
<DataTemplate x:Key="ItemTemplate" DataType="{x:Type YourPrefix:YourClass}">
<TabItem Header="{Binding Header}" Content="{Binding Content}" />
</DataTemplate>
<DataTemplate DataType="{x:Type YourPrefix:Content}">
<YourPrefix:SomeUserControl DataContext="{Binding}" />
</DataTemplate>
So this would give you TabItems with Headers set and Content that comes from SomeUserControl which you could design. You don't need to use UserControls, you could just add more UI controls to either DataTemplate. But you will need to add more controls somewhere... and more classes and properties, always remembering to correctly implement the essential INotifyPropertyChanged interface.
And finally, to answer your question in the proper MVVM way... to remove a TabItem, you simply remove the item that relates to that TabItem from the collection. Simple... or it would have been if you really had been using MVVM like you claim. It's really worth learning MVVM properly as you'll soon see the benefits. I'll leave you to find your own tutorials as there are many to chose from.
UPDATE >>>
Your event handling is still not so MVVM... you don't need to pass a reference of any view model anywhere. The MVVM way is to use commands in the view model. In particular, you should investigate the RelayCommand. I have my own version, but these commands enable us to perform actions from data bound Buttons and other UI controls using methods or inline delegates in the view model (where action and canExecute in this example are the CommandParameter values):
<Button Content="Close Tab" Command="{Binding CloseTabCommand}"
CommandParameter="{Binding}" />
...
public ICommand CloseTabCommand
{
get { return new ActionCommand(action => Items.Remove(action),
canExecute => canExecute != null && Items.Contains(canExecute)); }
}
So whatever view model has your Tabs collection should have an AddTabCommand and a CloseTabCommand that add and remove items from the Tabs collection. But just to be clear, for this to work properly, your ClosableTab class should be a data class and not a UI control class. Use a DataTemplate to specify it if it is a UI control.
You can find out about the RelayCommand from this article on MSDN.

How can I bind a xaml property to a static variable in another class?

I have this xaml file in which I try to bind a Text-block Background to a static variable in another class, how can I achieve this ?
I know this might be silly but I just moved from Win-forms and feeling a little bit lost.
here is what I mean:
<TextBlock Text="some text"
TextWrapping="WrapWithOverflow"
Background="{Binding Path=SomeVariable}" />
First of all you can't bind to variable. You can bind only to properties from XAML.
For binding to static property you can do in this way (say you want to bind Text property of TextBlock) -
<TextBlock Text="{Binding Source={x:Static local:YourClassName.PropertyName}}"/>
where local is namespace where your class resides which you need to declare above in xaml file like this -
xmlns:local="clr-namespace:YourNameSpace"
You can't actually bind to a static property (INotifyPropertyChanged makes sense on instances only), so this should be enough...
{x:Static my:MyTestStaticClass.MyProperty}
or e.g.
<TextBox Text="{x:Static my:MyTestStaticClass.MyProperty}" Width="500" Height="100" />
make sure you include the namespace - i.e. define the my in the XAML like xmlns:my="clr-namespace:MyNamespace"
EDIT: binding from code
(There're some mixed answers on this part so I thought it made sense to expand, have it in one place)
OneTime binding:
You could just use textBlock.Text = MyStaticClass.Left (just careful where you place that, post-init)
TwoWay (or OneWayToSource) binding:
Binding binding = new Binding();
//binding.Source = typeof(MyStaticClass);
// System.InvalidOperationException: 'Binding.StaticSource cannot be set while using Binding.Source.'
binding.Path = new PropertyPath(typeof(MyStaticClass).GetProperty(nameof(MyStaticClass.Left)));
binding.Mode = BindingMode.TwoWay;
binding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
this.SetBinding(Window.LeftProperty, binding);
...of course if you're setting Binding from the code remove any bindings in XAML.
OneWay (property changes from the source):
And if you'd need to update the target (i.e. the control's property, Window.Left in this case) on the source property changes, that can't be achieved with the static class (as per my comment above, you'd need the INotifyPropertyChanged implemented, so you could just use a wrapper class, implement INotifyPropertyChanged and wire that to a static property of your interest (providing you know how to track you static property's changes, i.e. this is more of a 'design' issue from this point on, I'd suggest redesigning and putting it all within one 'non-static' class).
You can use the newer x:Bind to do this simply using:
<TextBlock Text="{x:Bind YourClassName.PropertyName}"/>

Categories

Resources