I'm trying to create a custom multi value combobox. So basically a combobox with some checkboxes as items. The idea is, to keep the whole control fully bindable, so that I can be reused any time.
Here's the XAML
<ComboBox x:Class="WpfExtensions.Controls.MultiSelectComboBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfExtensions.Controls"
mc:Ignorable="d" d:DesignHeight="23" d:DesignWidth="150">
<ComboBox.Resources>
<local:CheckBoxConverter x:Key="CheckBoxConverter" />
</ComboBox.Resources>
<ComboBox.ItemTemplateSelector>
<local:MultiSelectBoxTemplateSelector>
<local:MultiSelectBoxTemplateSelector.SelectedItemsTemplate>
<DataTemplate>
<TextBlock Text="{Binding Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:MultiSelectComboBox}}, Path=SelectedItems, Converter={StaticResource CheckBoxConverter}}" />
</DataTemplate>
</local:MultiSelectBoxTemplateSelector.SelectedItemsTemplate>
<local:MultiSelectBoxTemplateSelector.MultiSelectItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding}" HorizontalAlignment="Stretch"
Checked="CheckBox_Checked" Unchecked="CheckBox_Checked" Indeterminate="CheckBox_Checked" Click="CheckBox_Checked" />
</DataTemplate>
</local:MultiSelectBoxTemplateSelector.MultiSelectItemTemplate>
</local:MultiSelectBoxTemplateSelector>
</ComboBox.ItemTemplateSelector>
</ComboBox>
And the code behind for the custom property "SelectedItems"
public static readonly DependencyProperty SelectedItemsProperty = DependencyProperty.Register("SelectedItems", typeof(IList), typeof(MultiSelectComboBox));
[Bindable(true)]
public IList SelectedItems
{
get
{
return (IList)GetValue(SelectedItemsProperty);
}
private set
{
SetValue(SelectedItemsProperty, value);
}
}
Now when I test the project, the RelativeSource is resolved correctly towards the control itself, however the Binding on the path "SelectedItems" fails with the debugger stating, that there is no such Path on the RelativeSource object.
Did I mess up the binding or did I make a complete logical error?
You are setting a RelativeSource as the Source, instead set the RelativeSource propperty like so:
<TextBlock Text="{Binding Path=SelectedItems, RelativeSource={RelativeSource AncestorType={x:Type local:MultiSelectComboBox}}, Converter={StaticResource CheckBoxConverter}}" />
Related
I have a ContentControl where I am setting its content to a DataTemplate. I am setting the Tag value of the ContentControl. Is there a way to access this Tag Element in the Data Template and pass it as CommandParameter. In other words I am trying to pass the Tag as a parameter to the DataTemplate. Please help.
<DataTemplate x:Key="SensorStatusControlTemplate" x:DataType="viewModel:SensorBufferState">
<Grid>
<Rectangle x:Name="SensorRectangle"
Fill="{x:Bind Converter={StaticResource SensorStateOverflowConverter},
ConverterParameter={What do I say here to get the Tag}}"
Height="30"
Width="125" />
<TextBlock x:Name="SensorTextBlock"
Text="{x:Bind Converter={StaticResource SensorStateOverflowConverter}}"
FontSize="{StaticResource FontSizeMedium}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="White" />
</Grid>
</DataTemplate>
Here is my ControlTemplate. Is there a way to access the Tag in the DataTemplate?
<ContentControl Content="{Binding VmPRWControlData.OverflowSensorState,UpdateSourceTrigger=PropertyChanged}"
ContentTemplate="{StaticResource SensorStatusControlTemplate}"
Tag="Overflow"
HorizontalAlignment="Center"
Width="{Binding ElementName=LABLidSensorTextBlock,Path=ActualWidth}" />
Edit: I have tried doing like this but the parameter value is null,
ConverterParameter={Binding Tag, RelativeSource={RelativeSource Mode=TemplatedParent}}
You should traverse the tree to find the parent control using RelativeSource.AncestorType:
<DataTemplate DataType="{x:Type viewModel:SensorBufferState}">
<Button CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=ContentControl}, Path=Tag}"/>
</DataTemplate>
As you correctly mentioned UWP doesn't support RelativeSource.AncestorType.
The following solutions work with WPF too:
Solution 1
You can use Binding.ElementName instead
App.xaml
<DataTemplate x:Key="DataTemplate">
<Button CommandParameter="{Binding ElementName=ContentControl, Path=Tag}"/>
</DataTemplate>
MainPage.xaml
<ContentControl x:Name="ContentControl"
Tag="123"
ContentTemplate="{StaticResource DataTemplate}" />
Solution 2
Or alternatively use the DataContext set to a view model or a DependencyProperty instead of the Tag property:
App.xaml
<DataTemplate x:Key="DataTemplate">
<Button CommandParameter="{Binding CommandParameterValue}"/>
</DataTemplate>
MainPage.xaml.cs
public sealed partial class MainPage : Page
{
public static readonly DependencyProperty CommandParameterValueProperty = DependencyProperty.Register(
"CommandParameterValue",
typeof(string),
typeof(MainPage),
new PropertyMetadata(default(string)));
public string CommandParameterValue
{
get => (string) GetValue(MainPage.CommandParameterValueProperty);
set => SetValue(MainPage.CommandParameterValueProperty, value);
}
public MainPage()
{
this.InitializeComponent();
this.DataContext = this;
this.CommandParameterValue = "ABC";
}
}
MainPage.xaml
<ContentControl ContentTemplate="{StaticResource DataTemplate}" />
I've 4 different collections. Currently I display thoses 4 collections, but I can only have one element selected at the time.
The view where I display the 4 collection:
<UserControl x:Class="xxx.yyy.vvv.Menu"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:xxx.yyy.vvv.Menu"
mc:Ignorable="d"
d:DesignHeight="800" d:DesignWidth="450">
<Grid Name="RootContainer">
<Grid.DataContext>
<local:MenuViewModel/>
</Grid.DataContext>
<ItemsControl ItemsSource="{Binding Collection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:CollectionControl Collection="{Binding}" SelectedElement="{Binding Path=DataContext.GlobalSelectedElement,ElementName=RootContainer, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</UserControl>
This is bound to a ViewModel:
public class MenuViewModel : SomeBaseViewModelThatHandleTheNotify
{
public IMyElement GlobalSelectedElement
{
get => GetValue<IMyElement>();
set => SetValue(value); //I NEVER COME HERE!!!)
}
public SomeCollectionContainer Collection
{
get => GetValue<SomeCollectionContainer>();
set => SetValue(value);
}
}
My sub control, has a dependency property, which is changed when the internal ViewModel of the UserControl is changed.
public IMyElement SelectedElement
{
get { return (IMyElement)GetValue(SelectedElementProperty); }
set { SetValue(SelectedElementProperty, value);/*HERE I COME!*/ }
}
public static readonly DependencyProperty SelectedElementProperty =
DependencyProperty.Register("SelectedElement", typeof(IMyElement), typeof(CollectionControl), new PropertyMetadata(null, OnSelectedElementChanged));
private static void OnSelectedElementChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
{
//Retrieve the sub control ViewModel and set the property
SubControlViewModel subControlViewModel = (SubControlViewModel)((CollectionControl)dependencyObject).RootContainer.DataContext;
subControlViewModel.SelectedElement = (IMyElement)dependencyPropertyChangedEventArgs.NewValue;
}
//In the constructor, I register to PropertyChanged of the ViewModel, and I set the SelectedElement when it change.
So, basically, I come in the SetValue of the dependency property of the UserControl, but I never come in the GlobalSelectedElement property of my main ViewModel.
What did I miss?
EDIT
I tried to directly use two-way binding between my ViewModel and the Dependency Property, doesn't work either:
In my sub control:
<UserControl x:Class="xxx.yyy.vvv.CollectionControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:xxx.yyy.vvv.Menu"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<StackPanel Name="RootContainer" Orientation="Vertical">
<StackPanel.DataContext>
<local:CollectionControlViewModel/>
</StackPanel.DataContext>
<Label Content="{Binding Collection.Name}" Margin="5,0,0,0" />
<ListBox ItemsSource="{Binding Collection.Items}" HorizontalContentAlignment="Stretch" Padding="0" BorderThickness="0" SelectedItem="{Binding SelectedElement, RelativeSource={RelativeSource AncestorType={x:Type local:CollectionControl}}, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</StackPanel>
</UserControl>
I feel that my UserControl DependencyProperty is bound from 2 sides
I've tried to make a small diagram to show my classes.
So my CollectionControl.SelectedElement are correctly set, but the MenuViewModel.SelectedItem are not.
Try to bind to the DataContext of the parent ItemsControl using a RelativeSource:
<local:CollectionControl Collection="{Binding}"
SelectedElement="{Binding Path=DataContext.GlobalSelectedElement, RelativeSource={RelativeSource AncestorType=ItemsControl}, Mode=TwoWay}"/>
Obviously using an ElementName doesn't work. This is because of namescopes. The CollectionControl element in the ItemTemplate is not in the same namescope as "RootContainer".
This should be simple, but I cannot find it:
I have two Comboboxes that are related through a Master-Detail Binding:
<ComboBox Style="{StaticResource FixedSelectionCombo}"
ItemsSource="{Binding ElementName=ControlRoot, Path=Clubs}"
DisplayMemberPath="Name"
SelectedItem="{Binding ElementName=ControlRoot,Path=SelectedClub}">
</ComboBox>
<ComboBox Style="{StaticResource FixedSelectionCombo}"
ItemsSource="{Binding ElementName=ControlRoot, Path=SelectedClub.PlayerLists}"
DisplayMemberPath="Name"
SelectedItem="{Binding ElementName=ControlRoot, Path=SelectedPlayerList}">
</ComboBox>
When I select an item in the first combobox, the second combobox gets populated with the the appropriate PlayerLists, but I want to have its first item selected automatically.
This is easy to do in code behind, but I want to achieve this through a Style that I can put in a ResourceDictionary. I tried:
<Style x:Key="FixedSelectionCombo" TargetType="ComboBox" BasedOn="{StaticResource {x:Type ComboBox}}">
<Setter Property="SelectedIndex" Value="0"/>
</Style>
But this only works the first time, not after I make a new selection in the first combobox.
How can it be done?
You can solve this by using Interaction.Triggers:
<ComboBox Style="{StaticResource FixedSelectionCombo}"
ItemsSource="{Binding ElementName=ControlRoot, Path=Clubs}"
DisplayMemberPath="Name"
SelectedItem="{Binding ElementName=ControlRoot,Path=SelectedClub}"
Name="cbClubs">
</ComboBox>
<ComboBox Style="{StaticResource FixedSelectionCombo}"
ItemsSource="{Binding ElementName=ControlRoot, Path=SelectedClub.PlayerLists}"
DisplayMemberPath="Name"
SelectedItem="{Binding ElementName=ControlRoot, Path=SelectedPlayerList}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged" SourceName="cbClubs">
<ei:ChangePropertyAction PropertyName="SelectedIndex" Value="1"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ComboBox>
Required namespaces:
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
Honestly, the best/easiest way to do it is in the ViewModel when SelectedIndex of one changes, flip desired Property (selectedInex of the other) the binding will do the rest.
No need for styles, triggers and the whole mess. But for fun, this was just a quick'n' dirty, so posting the whole/most xaml so it can be copied/pasted/run... using different property names, because I wanted to run/test it first
Note, converter returns a dummy string, on which you can trigger in the style.
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication2"
Title="MainWindow" x:Name="window" >
<Window.Resources>
<local:IndexConverter x:Key="indexConverter"/>
<Style x:Key="comboBox2Style">
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedList1Item, Converter={StaticResource indexConverter}}"
Value="selectFirstIndexOnAnyPropertyChanged">
<Setter Property="ComboBox.SelectedIndex" Value="0"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel DataContext="{Binding ElementName=window, Path=ViewModel}">
<ComboBox ItemsSource="{Binding List1}" SelectedItem="{Binding SelectedList1Item}"/>
<ComboBox ItemsSource="{Binding List2}" SelectedItem="{Binding SelectedList2Item}"
Style="{StaticResource comboBox2Style}"/>
public class IndexConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return "selectFirstIndexOnAnyPropertyChanged";
}
in my code behind created a ViewModel with all the properties List1, List2, SelectedItemList1, etc.. so the bindings would work. Let me know if you need the ViewModel code (omitting it, as obvious..)
public partial class MainWindow : Window
{
public MainWindow()
{
ViewModel = new ViewModel();
InitializeComponent();
}
I have a ItemsControl that's bound to an object, within the datatemplate of the ItemsControl i have two textblocks, I want to bind the first textblock's text property to another textblock that sits outside this ItemsControl.
I have tried finding the object in the parent datacontext and also simply trying to find the TextBlock with the Path=Text
one example is below :
<TextBlock Name="Name" Text="{Binding Name}"
Grid.Column="0"
FontSize="{DynamicResource SmallSize}"
TextWrapping="Wrap"
TextAlignment="Right"
Padding="4,0,0,0"
Grid.ColumnSpan="2" Background="Aqua"/>
<ItemsControl ItemsSource="{Binding TheValue}"
Padding="4,0,0,0"
Grid.Column="2"
HorizontalAlignment="Right">
<ItemsControl.ItemTemplate>
<DataTemplate>
<WrapPanel>
<TextBlock Text = "{
Binding RelativeSource =
{RelativeSource FindAncestor,
AncestorType={x:Type Window}}, Path=Name}"
Grid.Column="0"
FontSize="{DynamicResource SmallSize}"
TextWrapping="Wrap" ........................
{Binding RelativeSource = {RelativeSource FindAncestor,
AncestorType={x:Type Window}}, Path=Name}
Here you say to WPF find first parent of this control with Type Window, e.g. it's "ParentWindow". After this binding occurs to "ParentWindow" Name property.
If you want enable binding to control, which defined in same XAML, you can set the source explicitly by using Binding.ElementName property.
This is example for you code:
<TextBlock Text = "{Binding ElementName=Name, Path=Text}"/>
By the way, using control name as "Name" not is good. If you use this control form code behind it's looking as Name.Text = "some text", which can cause a trouble to understand what is going on.
UPDATE:
Example of binding to control DataContext Property in different datatemplate
class MainViewModel
{
public Class1 C1 { get; set; }
public Class2 C2 { get; set; }
public MainViewModel()
{
C1 = new Class1 { S1 = "This is C1 data context" };
C2 = new Class2 { S2 = "This is C2 data context" };
}
}
In XAML:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate DataType="{x:Type local:MainViewModel}">
<StackPanel>
<ContentControl Name="cc1" Content="{Binding C1}"/>
<ContentControl Name="cc2" Content="{Binding C2}"/>
</StackPanel>
</DataTemplate>
<DataTemplate DataType="{x:Type local:Class1}">
<TextBlock Text="{Binding S1}"/>
</DataTemplate>
<DataTemplate DataType="{x:Type local:Class2}">
<TextBlock Text="{Binding ElementName=cc1, Path=DataContext.C1.S1}"/>
</DataTemplate>
</Window.Resources>
<Grid>
<ContentControl Content="{Binding}"/>
</Grid>
</Window>
But, I don't think something like this is a good approach. Especially, because this can be many items with this DataTemplate. Maybe you need delegate this to your ViewModel.
As titled,
I seen couples of similiar question this or this in SO, but I don't see a solution for it.
I know if I need to bind to the code-beind, I need to set Datacontext = this
But my problem is that my datacontext already binding to my ViewModel, but I want to do some UI manipulation with using Command which is defined in the code-beind.
Is it possbile to bind it in xaml? If so, how?
EDIT: I did tried the follows:
<Window x:Class="WpfApplication3.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300" x:Name="_Root">
<Grid x:Name="hellogrid">
<TextBlock x:Name="myTextBlock" Text="AAAA"/>
<Button Margin="82,119,121,120" Name="button2" Content="{Binding Path=Text, ElementName=myTextBlock}"/>
<Button Margin="82,72,121,0" Name="button3" Content="{Binding Path=MyText, ElementName=_Root}" Height="23" VerticalAlignment="Top" />
</Grid>
And code-behind:
public partial class Window1 : Window
{
public string MyText { get; set; }
public Window1()
{
InitializeComponent();
MyText = "ABC";
}
}
I could see the Button2 shows AAAA, but Button3 shows nothing....
Of course
There are many types of bindings. The most basic one binds to a property on the DataContext, which is usually inherited from a Parent object
<DataTemplate DataType="{x:Type MyModel}">
<!-- DataContext is object of type MyModel -->
<local:MyView />
</DataTemplate>
Or
<Window x:Name="MyWindow">
<!-- DataContext Inherited from Window -->
<TextBlock Text="{Binding SomeProperty}" />
</Window>
where
var SomeObject = new SomeModel();
SomeObject.SomeProperty = "Test";
myWindow.DataContext = SomeObject;
Other binding types include ElementName, where you can specify the target UI element to use as the data source for the binding
<StackPanel>
<CheckBox x:Name="SomeCheckBox" />
<TextBlock Text="{Binding ElementName=SomeCheckBox, Path=IsChecked}" />
</StackPanel>
or
<local:MyUserControl x:Name="SomeUserControl">
<Button Command="{Binding ElementName=SomeUserControl, Path=DataContext.SaveCommand}" />
</local:MyUserControl >
Or RelativeSource, which allows you to find an object relative to the current object to use as a DataSource
<Window Title="Test">
<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, Path=Title}" />
</Window>
or
<local:MyUserControl>
<Button Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:MyUserControl}}, Path=DataContext.SaveCommand}" />
</local:MyUserControl >
And TemplateBinding, which binds is a shortcut to a RelativeSource binding that binds to a templated object
<Button Content="Test">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<TextBlock Text="{TemplateBinding Content}" />
</ControlTemplate>
</Button.Template>
</Button>
EDIT
The best solution IMO is the one posted by #Saad Imran in this SO question...
With this solution all you have to do is name your window and binding to a property in your XAML will be as easy as this {Binding ElementName=MyWindowName, Path=MyText}
So, what you are doing with Content="{Binding Path=MyText, ElementName=_Root}" is exactly right and your Button Content property IS bound to MyText property but the only thing you are missing is change notification (need to implement INotifyPropertyChanged interface for that) so when you set your MyText property to ABC MyText = "ABC"; no change notification is sent...
Easy way to test this is by setting the MyText property explicitly as such:
private string myText = "ABC";
public string MyText
{
get { return myText; }
set { myText = value; }
}
or setting it in the constructor before InitializeComponent() is called:
MyText = "ABC";
InitializeComponent();
If you do that you'll notice that your button will have ABC as its content but changes to MyText property will not affect the button content because there is no change notification...
Sure, you can use ElementName:
<Window Name="root"
Class="..."
...>
...
<TextBox Text="{Binding Path=Foo, ElementName=root}" />
You could also do it with RelativeSource, but the syntax is uglier...