Non MVVM.
I got this ObservableCollection machines which is made of Machine-type objects:
[Serializable]
[NotifyPropertyChanged]
public abstract class Machine
{
public MachineNames MachineType { get; set; }
public int MachineVersion { get; set; }
public string LatestEditorName { get; set; }
public DateTime LatestSaveTime { get; set; }
public ObservableCollection<Parameter> Parameters { get; set; }
public string Notes { get; set; }
public abstract double CalculateThroughPut();
public Machine()
{
string[] nameParts = this.GetType().Name.Split('_');
Enum.TryParse(nameParts[0], out MachineNames currentMachineType);
MachineType = currentMachineType;
MachineVersion = int.Parse(nameParts[1]);
Parameters = new ObservableCollection<Parameter>();
ICollectionView icv = CollectionViewSource.GetDefaultView(Parameters);
icv.GroupDescriptions.Add(new PropertyGroupDescription("Group"));
LatestEditorName = Environment.UserName;
LatestSaveTime = DateTime.Now;
}
public double getValue(string parameterName)
{
Parameter currentParameter = Parameters.Where(x => x.Name == parameterName).First();
return currentParameter.Value * currentParameter.MetricConversionFactor;
}
And here's the declaration of it:
public partial class MainWindow : MetroWindow
{
IEnumerable<string> namesOfExistingMachines { get; set; }
public ObservableCollection<Machine> machines { get; set; }
and later on:
private void InitializeData()
{
machines = new ObservableCollection<Machine>();
this.DataContext = machines;
tcMainTabControl.ItemsSource = machines;
Notice please the [NotifyPropertyChanged] tag which is part of PostSharp, and simply makes all the properties of Machine changenotifiable for binding. in addition it makes all the properties of the properties changenotifiable.
Here's the initial window part of the XAML:
<Grid>
<Controls:MetroAnimatedTabControl Name="tcMainTabControl">
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="ToolTipService.ShowDuration" Value="100000"/>
<Setter Property="ToolTipService.InitialShowDelay" Value="0"/>
<Setter Property="Header" Value="{Binding Converter={StaticResource tabHeaderConverter}}"/>
<Setter Property="ToolTip">
<Setter.Value>
<StackPanel Orientation="Vertical">
<TextBlock HorizontalAlignment="Center" Margin="0,10" FontSize="40" FontWeight="Bold" Text="{Binding Path=MachineType}"/>
<Image HorizontalAlignment="Center" Source="{Binding Path=MachineType, Converter={StaticResource imageUriConverter}}"/>
<StackPanel HorizontalAlignment="Center" Margin="0,10" Orientation="Horizontal">
<TextBlock FontSize="20" Text="Throughput model version "/>
<TextBlock FontSize="20" Text="{Binding Path=MachineVersion}"/>
</StackPanel>
<StackPanel HorizontalAlignment="Center" Margin="0,10" Orientation="Horizontal">
<TextBlock FontSize="20" Text="created by "/>
<TextBlock FontSize="20" Text="{Binding Path=LatestEditorName}"/>
<TextBlock FontSize="20" Text=" on "/>
<TextBlock FontSize="20" Text="{Binding Path=LatestSaveTime, StringFormat=dd/MM/yyyy}"/>
</StackPanel>
<TextBlock Margin="0,10" FontSize="20" Text="{Binding Path=Notes}"/>
</StackPanel>
</Setter.Value>
</Setter>
</Style>
</TabControl.ItemContainerStyle>
<Controls:MetroAnimatedTabControl.ContentTemplate>
<DataTemplate>
<DockPanel LastChildFill="True" Margin="10,0">
<StackPanel Orientation="Vertical">
<Border BorderBrush="{DynamicResource AccentColorBrush}" BorderThickness="1,1,1,1" CornerRadius="8,8,8,8" Margin="0,20" HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal" Margin="5">
<TextBlock FontSize="20" Text="Throughput: "/>
<TextBlock FontSize="20" Text="{Binding Converter={StaticResource throughputCalculationConverter}, UpdateSourceTrigger=PropertyChanged}"/>
<TextBlock FontSize="20" Text=" panel sides per hour"/>
</StackPanel>
</Border>
<ListView DockPanel.Dock="Left" ScrollViewer.VerticalScrollBarVisibility="Auto" ItemsSource="{Binding Path=Parameters, UpdateSourceTrigger=PropertyChanged}">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0,0,0,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="True" BorderBrush="Black" BorderThickness="0,0,0,1">
<Expander.Header>
<TextBlock FontSize="20" FontWeight="Bold">
<Run>Discipline: </Run>
<TextBlock Text="{Binding Path=Name, Converter={StaticResource titleCaseConverter}}"/>
</TextBlock>
</Expander.Header>
<Expander.Content>
<Border Margin="2" CornerRadius="3">
<ItemsPresenter />
</Border>
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemTemplate>
<DataTemplate>
<WrapPanel>
<TextBlock FontSize="20" Text="{Binding Name}" Margin="0,0,10,0" VerticalAlignment="Center"/>
<TextBox FontSize="20" BorderBrush="Black" BorderThickness="0,0,0,1" Background="Transparent" Controls:TextBoxHelper.Watermark="Enter value" Text="{Binding Value, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" Margin="0,0,10,0" VerticalAlignment="Center" HorizontalContentAlignment="Center"/>
<TextBlock FontSize="20" Text="{Binding Unit}" VerticalAlignment="Center"/>
</WrapPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="ToolTip" Value="{Binding Path=Notes}"/>
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</StackPanel>
Everything is OK in the binding department. What I'd like is to invoke the CollectionChanged event (or something like that) for machines each time a property inside one of its Machine members changes property internally. In other words: if I change, for example, a Parameter inside Parameters inside one of the Machines of machine, I'd like it to update the calculation on
<TextBlock FontSize="20" Text="{Binding Converter={StaticResource throughputCalculationConverter}, UpdateSourceTrigger=PropertyChanged}"/>
Thanks!
To propagate the PropertyChanged notifications from the items inside the collection, you need the collection class that subscribes to the change notifications of its items. The standard ObservableCollection<T> class doesn't do that. You can extend the ObservableCollection<T> as shown below. You can also find more similar examples on SO (e.g. ObservableCollection that also monitors changes on the elements in collection).
[NotifyPropertyChanged]
public class ObservableCollectionEx<T> : ObservableCollection<T>
{
protected override void OnCollectionChanged(NotifyCollectionChangedEventArgs e)
{
if (e.Action == NotifyCollectionChangedAction.Remove)
{
foreach (T item in e.OldItems)
{
((INotifyPropertyChanged) item).PropertyChanged -= OnItemPropertyChanged;
}
}
else if (e.Action == NotifyCollectionChangedAction.Add)
{
foreach (T item in e.NewItems)
{
((INotifyPropertyChanged) item).PropertyChanged += OnItemPropertyChanged;
}
}
base.OnCollectionChanged(e);
}
protected void OnPropertyChanged(string propertyName)
{
base.OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
}
protected void OnItemPropertyChanged(object sender, PropertyChangedEventArgs e)
{
NotifyPropertyChangedServices.SignalPropertyChanged(this, "Item[]");
NotifyCollectionChangedEventArgs collectionChangedEventArgs = new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Reset);
base.OnCollectionChanged(collectionChangedEventArgs);
}
}
When you use this custom collection class, the collection will raise an event when a property of an item changes. Now you can also tell PostSharp to propagate this notification as a change of the collection property itself using [AggregateAllChanges] attribute applied to the collection property (e.g. Parameters, machines).
[AggregateAllChanges]
public ObservableCollectionEx<Parameter> Parameters { get; set; }
[AggregateAllChanges]
public ObservableCollectionEx<Machine> machines { get; set; }
Related
I get this error :
System.Windows.Data Error: 40 : BindingExpression path error: 'OpenPopupCommand' property not found on 'object' ''String' (HashCode=62725275)'. BindingExpression:Path=OpenPopupCommand; DataItem='String'
when I added a parameter to my command:
OpenPopupCommand = new RelayParamCommand((e) => PopupVisibility(FilterButton) );
VM:
private void PopupVisibility(object sender)
{
Console.WriteLine(sender.ToString());
PopupVisible ^= true;
}
Think is that I added Filter Button to Datagrid Headers which are generated automatically. Now I want to open popup when button is clicked. But think is that is not working, because i have to pass button by buttons x:Name to Popup PlacementTarget parameter.
<Page.DataContext>
<PDB:UsersViewModel x:Name="vm"/>
</Page.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--Page Header info content-->
<Grid Grid.Row="0">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="2" Text="{Binding ElementName=userPage, Path=Name}"/>
<TextBlock Margin="2" Text="{Binding SelectedUser.Name}"/>
<TextBlock Margin="2" Text="{Binding ElementName=myGrd, Path=CurrentColumn.DisplayIndex}"/>
<Button x:Name="mybtn"
Content="{Binding Filters.Count, Mode=OneWay}"
Visibility="{Binding Filters.Count, Converter={Wpf:VisibilityConverter}}"
/>
</StackPanel>
</Grid>
<!--Datagrid content-->
<DataGrid x:Name="myGrd"
SelectionMode="Single"
SelectionUnit="Cell"
CurrentItem="{Binding SelectedUser, Mode=TwoWay}"
CurrentColumn="{Binding CurrentColumn, Mode=TwoWay}"
IsReadOnly="True"
Grid.Row="1"
ItemsSource="{Binding FilteredUserList}"
AutoGenerateColumns="True"
CanUserAddRows="False"
>
<DataGrid.Resources>
<!--Popup-->
<ContextMenu x:Key="ContextMenu">
<ContextMenu.Items>
<MenuItem Header="Filter by Selection" Command="{Binding IncludeCommand, Source={x:Reference vm}}"/>
<MenuItem Header="Filter exclude Selection" Command="{Binding ExcludeCommand, Source={x:Reference vm}}"/>
<MenuItem Header="Remove all Filters" Command="{Binding RemoveAllFiltersCommand, Source={x:Reference vm}}" Visibility="{Binding Filters.Count, Source={x:Reference vm}, Converter={Wpf:VisibilityConverter}}"/>
</ContextMenu.Items>
</ContextMenu>
<!--Custom Datagrid header View-->
<Style TargetType="DataGridColumnHeader" x:Name="FilterHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<TextBox Margin="0,0,0,10" Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridColumnHeader}}, Path=Width}" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}" HorizontalAlignment="Center"/>
<Button Name="FilterButton"
Content="[-F-]"
Command="{Binding OpenPopupCommand}"
CommandParameter="{Binding ElementName=FilterButton}"/>
<Popup Name="MyPopup"
StaysOpen="False"
Placement="Right"
IsOpen="{Binding PopupVisible}"
PlacementTarget="{Binding FilterButton}">
<Border Background="White" BorderBrush="Black" Padding="5" BorderThickness="2" CornerRadius="5">
<StackPanel Orientation="Vertical">
</StackPanel>
</Border>
</Popup>
</StackPanel>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
<DataGrid.CellStyle>
<Style TargetType="DataGridCell">
<Setter Property="ContextMenu" Value="{StaticResource ContextMenu}"/>
</Style>
</DataGrid.CellStyle>
</DataGrid>
</Grid>
By this approach i want to pass clicked button as parameter to VM and bind it to Popup PlacementTarget parameter. What i am doing wrong? Can i pass clicked button parameter? I know i break mvvm rules when passing view to vm, but how to achieve what i want, when i don't want to define every column in datagrid. Thank you
Your bindings have the DataContext of the DataGridColumnHeader as source which is the value of DataGridColumn.Header. This value in your case is a string and not your expected view model. This is the reason why your bindings doesn't resolve and you get the error message (which is exactly telling you this).
To fix the binding you have to find the next parent element that has the required DataContext, which is I assume the DataGrid:
<Button Name="FilterButton"
Content="[-F-]"
Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=DataGrid}, Path=DataContext.OpenPopupCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource Self}}"/>
When checking your code I can see the command which is bound to the Button is toggling the PopupVisible property. I therefore suggest to remove this view related code from the view model and replace the Button with a ToggleButton which binds directly to the Popup.IsOpen:
<!--Custom Datagrid header View-->
<Style TargetType="DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<TextBox Margin="0,0,0,10"
Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridColumnHeader}}, Path=Width}" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}"
HorizontalAlignment="Center" />
<ToggleButton Name="FilterButton"
Content="[-F-]" />
<Popup Name="MyPopup"
StaysOpen="False"
Placement="Right"
IsOpen="{Binding ElementName=FilterButton, Path=IsChecked}"
PlacementTarget="{Binding ElementName=FilterButton}">
<Border Background="White"
BorderBrush="Black"
Padding="5"
BorderThickness="2"
CornerRadius="5">
<StackPanel Orientation="Vertical">
</StackPanel>
</Border>
</Popup>
</StackPanel>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
To get the cell values of all rows contained in a single column where the column header value is the parameter and maps to a property name requires reflection. You need to bind a ListView to the resulting column value collection which uses an ItemTemplate to add a CheckBox to the item. The final version should be as follows:
<!--Custom Datagrid header View-->
<Style TargetType="DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<TextBox Margin="0,0,0,10"
Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridColumnHeader}}, Path=Width}" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding RelativeSource={RelativeSource Self}}"
HorizontalAlignment="Center" />
<ToggleButton Name="FilterButton"
Content="[-F-]"
Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=DataGrid}, Path=DataContext.(UsersViewModel.GenerateFilterViewItemsCommand)}"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=DataGridColumnHeader}, Path=Content}" />
<Popup Name="MyPopup"
StaysOpen="False"
Placement="Right"
IsOpen="{Binding ElementName=FilterButton, Path=IsChecked}"
PlacementTarget="{Binding ElementName=FilterButton}">
<Border Background="White"
BorderBrush="Black"
Padding="5"
BorderThickness="2"
CornerRadius="5">
<ListView
ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=DataGrid}, Path=DataContext.(UsersViewModel.FilterViewItems)}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding IsIncluded, Mode=OneWayToSource}"
Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=DataGrid}, Path=DataContext.(UsersViewModel.IncludeItemCommand)}"
CommandParameter="{Binding}" />
<ContentPresenter Content="{Binding CellValue}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Border>
</Popup>
</StackPanel>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
To map the filter list to the actual items requires an additional type to hold the information:
Predicate.cs
public class FilterPredicate
{
public FilterPredicate(int rowIndex, object cellValue, object columnKey)
{
this.RowIndex = rowIndex;
this.CellValue = cellValue;
this.ColumnKey = columnKey;
}
public int RowIndex { get; set; }
public object CellValue { get; set; }
public bool IsIncluded { get; set; }
public object ColumnKey { get; set; }
}
You also need to add a collection for the filter view and one for the included item indices to the view model:
UsersViewModel.cs
public class UsersViewModel
{
public UsersViewModel()
{
this.FilterViewItems = new ObservableCollection<FilterPredicate>();
this.IncludedItemsIndex = new Dictionary<object, List<int>>();
}
// The binding source for the Popup filter view
public ObservableCollection<FilterPredicate> FilterViewItems { get; set; }
private Dictionary<object, List<int>> IncludedItemsIndex { get; set; }
public ICommand GenerateFilterViewItemsCommand => new RelayParamCommand((param) =>
{
var columnHeader = param as string;
this.IncludedItemsIndex.Remove(columnHeader);
this.FilterViewItems.Clear();
for (var rowIndex = 0; rowIndex < this.FilteredUserList.Count; rowIndex++)
{
var data = this.FilteredUserList.ElementAt(rowIndex);
var columnValue = data.GetType()
.GetProperty(columnHeader, BindingFlags.Public | BindingFlags.Instance)?
.GetValue(data);
if (columnValue != null)
{
this.FilterViewItems.Add(new FilterPredicate(rowIndex, columnValue, columnValue));
}
}
});
public ICommand IncludeItemCommand => new RelayParamCommand((param) =>
{
var predicate = param as FilterPredicate;
if (predicate.IsIncluded)
{
if (!this.IncludedItemsIndex.TryGetValue(predicate.ColumnKey, out List<int> includedIndices))
{
includedIndices = new List<int>();
this.IncludedItemsIndex.Add(predicate.ColumnKey, includedIndices);
}
includedIndices.Add(predicate.RowIndex);
}
else
{
if (this.IncludedItemsIndex.TryGetValue(predicate.ColumnKey, out List<int> includedIndices))
{
includedIndices.Remove(predicate.RowIndex);
}
}
// Apply the filter
CollectionViewSource.GetDefaultView(this.FilteredUserList).Filter =
data => this.IncludedItemsIndex.Values
.SelectMany(indices => indices)
.Contains(this.FilteredUserList.IndexOf(data as FilteredUser));
});
}
Since you are autogenerating columns, I strongly suspect it is trying to find a OpenPopupCommand in one of the string properties on the items for FilteredUserList.
Try The Following :
Give you'r Page or DataGrid a Name, And change your Binding to
<MenuItem Command="{Binding Path=DataContext.IncludeCommand, Source={x:Reference myPage}}"/>
I have a listview which is populated using a stackpanel in wpf. I want to hidden pooja_name if status value in 0 else it will be visible.
<ListView x:Name="bookedlist" HorizontalAlignment="Left" Height="449" Margin="679,238,0,0" VerticalAlignment="Top" BorderBrush="#00828790" Background="Transparent" Focusable="False">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="stackkk" Orientation="Horizontal" >
<Border BorderThickness="0.5" BorderBrush="#FFB0AEAE">
<TextBlock Text="{Binding Pooja_name}" TextAlignment="Left" Margin="5" Width="250"/>
</Border>
<Border BorderThickness="0.5" BorderBrush="#FFB0AEAE">
<TextBlock Text="{Binding Name}" TextAlignment="Left" Margin="5" Width="250"/>
</Border>
<Border BorderThickness="0.5" BorderBrush="#FFB0AEAE">
<TextBlock Text="{Binding Status}" TextAlignment="Left" MouseLeftButtonDown="Star_function" Margin="5" Width="95"/>
</Border>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Listview is populated using a modelclass
public class Booked
{
public string Pooja_name { get; set; }
public string Name { get; set; }
public string Status{ get; set; }
}
and a jsonarray
JArray bookedpoojalist = JArray.Parse(bookedval);
List<Booked> booked = JsonConvert.DeserializeObject<List<Booked>>(bookedpoojalist.ToString());
bookedlist.ItemsSource = booked;
You could apply a Style with a DataTrigger to the Border or the TextBlock element:
<Border BorderThickness="0.5" BorderBrush="#FFB0AEAE">
<TextBlock Text="{Binding Pooja_name}" TextAlignment="Left" Margin="5" Width="250"/>
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding Status}" Value="0">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
That should work for you:
declare Converter:
<Window.Resources>
<StringToVisibility x:Key="StringToVisibilityConverter"/>
</Window.Resources>
<StackPanel x:Name="stackkk" Orientation="Horizontal">
<Border BorderThickness="0.5" BorderBrush="#FFB0AEAE" Visibility="{Binding Status, Converter={StaticResource StringToVisibilityConverter}}">
<TextBlock Text="{Binding Pooja_name}" TextAlignment="Left" Margin="5" Width="250"/>
</Border>
</StackPanel>
Converter:
public class StringToVisibility : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value.ToString()== "0")
{
return Visibility.Collapsed;
}
return Visibility.Visible;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Based on this answer I tried to use the following code to achieve a ComboBox with different templates depending on whether or not the drop down is open.
The ComboBox definition looks like this:
<ComboBox SelectedValuePath="Id"
DisplayMemberPath="Name">
<ComboBox.Resources>
<DataTemplate x:Key="SelectedTemplate">
<TextBlock Text="Abbreviation" />
</DataTemplate>
<DataTemplate x:Key="DropDownTemplate">
<ContentControl Content="{Binding}">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Border}}, Path=ActualWidth, Mode=OneTime}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}, Path=DisplayMemberPath}" />
<TextBlock Grid.Column="1"
Text="Abbreviation" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ContentControl.Style>
</ContentControl>
</DataTemplate>
<infrastructure:ComboBoxItemTemplateSelector x:Key="ComboBoxItemTemplateSelector"
DropDownDataTemplate="{StaticResource DropDownTemplate}"
SelectedDataTemplate="{StaticResource SelectedTemplate}" />
</ComboBox.Resources>
</ComboBox>
and the ComboBoxItemTemplateSelector looks like this:
public class ComboBoxItemTemplateSelector : DataTemplateSelector
{
public DataTemplate DropDownDataTemplate { get; set; }
public DataTemplate SelectedDataTemplate { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
return DependencyObjectHelper.GetVisualParent<ComboBoxItem>(container) != null ? this.DropDownDataTemplate : this.SelectedDataTemplate;
}
}
Now the problem is that somehow SelectTemplate is never called, even although I checked all the DynamicResources and StaticResources.
You need to assign the ComboBoxItemTemplateSelector to the ComboBox like this:
<ComboBox ItemTemplateSelector="{DynamicResource ComboBoxItemTemplateSelector}">
and you cannot set the DisplayMemberPath or the SelectTemplate method will never be called.
I like to Binding the datagrid parent from Behavior (pnlDgSubFooter) placed in DataGrid/GroupStyle/ContainerStyle/Style[GroupItem]/Setter[template]/ControlTemplate/Expander/Header/DockPanel/StackPanel
But the Binding can't leave of DockPanel.
in ElementName, there is only "btnExpandAll" and himself.
In Behavior, the LeDataGrid property return alway null (except if i bind on . or btnExpandAll)
<DataGrid Grid.Row="0" x:Name="dgMain" AutoGenerateColumns="False" SelectionUnit="FullRow" LoadingRow="dgMain_LoadingRow" MouseDown="dgMain_MouseDown" Sorting="dgMain_Sorting"
CanUserReorderColumns="False" CanUserResizeColumns="True" CanUserResizeRows="False" CanUserSortColumns="True" CanUserAddRows="False"
Style="{StaticResource dg}" RowStyle="{StaticResource dgRow}" CellStyle="{StaticResource dgCell}" ColumnHeaderStyle="{StaticResource dgColHeader}" RowHeaderStyle="{StaticResource dgRowHeader}"
ItemsSource="{Binding NotifyOnSourceUpdated=True, Source={StaticResource cvsElmts}}" HorizontalAlignment="Left" >
<!--DataGrid.DataContext><Binding Source="{StaticResource tblUsers}"/></DataGrid.DataContext-->
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<mvvm:EventToCommand Command="{Binding SendCommand, Mode=OneWay}" CommandParameter="{Binding SelectedItem, ElementName=dgMain}" PassEventArgsToCommand="False"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<DataGrid.GroupStyle>
<GroupStyle>
<!-- Style for groups under the top level. -->
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0,0,0,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="{Binding DataContext.ExpandedAll, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" BorderThickness="1,1,1,5">
<Expander.Style>
<Style TargetType="{x:Type Expander}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsBottomLevel}" Value="True">
<Setter Property="Margin" Value="8,0,0,0" />
</DataTrigger>
</Style.Triggers>
</Style>
</Expander.Style>
<Expander.Header>
<DockPanel>
<Button Name="btnExpandAll" Command="{Binding DataContext.ExpandedAllCommand, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Click="btnExpandAll_Click" ToolTip="{x:Static resx:resMain.lblExpandAll}" BorderThickness="0">
<TextBlock Grid.Column="0" Text="" FontFamily="{StaticResource FntSymbol}" Foreground="{StaticResource scbBlack}" FontSize="12" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Button>
<TextBlock FontWeight="Bold" Text="" Margin="5,0,0,0"><Run Text="{Binding Path=Name, Mode=OneWay}" /><Run Text=" ("/><Run Text="{Binding Path=ItemCount, Mode=OneWay}" /><Run Text=" éléments)."/></TextBlock>
<StackPanel Name="pnlDgSubFooter" HorizontalAlignment="Left" Orientation="Horizontal" >
<i:Interaction.Behaviors>
<Classes:BehaviorWithCommand LeDataGrid="{Binding DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}" LeGroupe="{Binding .}" />
</i:Interaction.Behaviors>
</StackPanel>
</DockPanel>
</Expander.Header>
<Expander.Content>
<Border BorderThickness="1" BorderBrush="{StaticResource scbGrey3}">
<ItemsPresenter />
</Border>
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
....
The Behavior:
public class BehaviorWithCommand : Behavior<FrameworkElement> { // StackPanel
public static readonly DependencyProperty LeDataGridProperty = DependencyProperty.Register(nameof(LeDataGrid), typeof(object), typeof(BehaviorWithCommand), new PropertyMetadata(null));
public static readonly DependencyProperty LeGroupeProperty = DependencyProperty.Register(nameof(LeGroupe), typeof(object), typeof(BehaviorWithCommand), new PropertyMetadata(null));
public object LeDataGrid {
get { return (object)GetValue(LeDataGridProperty); }
set { SetValue(LeDataGridProperty, value); }
}
public object LeGroupe {
get { return (object)GetValue(LeGroupeProperty); }
set { SetValue(LeGroupeProperty, value); }
}
protected override void OnAttached() {
base.OnAttached();
((Panel)AssociatedObject).Children.Clear();
var dg = new DataGrid();
dg.Columns.Add(new DataGridTextColumn());
dg.Columns.Add(new DataGridTextColumn());
dg.Columns.Add(new DataGridTextColumn());
//var dg = (DataGrid)LeDataGrid;
foreach (var item in dg.Columns) {
var g = new Grid() { MinWidth = 10 };
g.SetBinding(Grid.WidthProperty, new System.Windows.Data.Binding("ActualWidth") { Source = item }); // dhHeadName DataGridColumn
var t = new TextBox() { Margin = new Thickness(1, 0, 1, 0), Background = new SolidColorBrush(Color.FromRgb(200, 200, 200)), FontWeight = FontWeights.Bold, FontSize = 9, IsReadOnly = true };
t.Text = "Coucou";
g.Children.Add(t);
((Panel)AssociatedObject).Children.Add(g);
}
}
protected override void OnDetaching() {
base.OnDetaching();
}
}
This is working:
<StackPanel Grid.ColumnSpan="2" Grid.Row="1" Name="pnlDgSubFooter" HorizontalAlignment="Left" Orientation="Horizontal" Margin="-20, 0, 0, 0">
<i:Interaction.Behaviors>
<Classes:BehaviorWithCommand LeDataGrid="{Binding ., ElementName=dgMain}" LeGroupe="{Binding .}" />
</i:Interaction.Behaviors>
</StackPanel>
It's just that designer don't resolve it.
Regards.
I am just wondering if there is a wpf combobox control that can contain multiple columns?
And if not, what XAML I need to use to achieve this?
I am just looking for a basic two column combobox if is possible,
Thanks
Please Refer these links for Multiple Column Combobox which is implemented by editing combox and comboboxitem Default template/style.
1)Link1
2)Link2
Xaml code : Please take a look at commented Trigger IsHighlighted in ComboboxItem style
<Grid>
<ComboBox Height="30" Margin="5" ItemsSource="{Binding}" HorizontalContentAlignment="Stretch">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Margin="2" Text="{Binding Name}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="gd" TextElement.Foreground="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Margin="5" Grid.Column="0" Text="{Binding Name}"/>
<TextBlock Margin="5" Grid.Column="1" Text="{Binding State}"/>
<TextBlock Margin="5" Grid.Column="2" Text="{Binding Population}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ComboBoxItem.IsSelected" Value="True">
<Setter TargetName="gd" Property="Background" Value="Gray"></Setter>
<Setter TargetName="gd" Property="TextElement.Foreground" Value="White"></Setter>
</Trigger>
<Trigger Property="ComboBoxItem.IsMouseOver" Value="True">
<Setter TargetName="gd" Property="Background" Value="Blue"></Setter>
<Setter TargetName="gd" Property="TextElement.Foreground" Value="White"></Setter>
</Trigger>
<!--IsHighlighted and IsMouseOver is showing same effect but IsHighlighted is used for showing logical focus( for understanding check using tab key)-->
<!--<Trigger Property="ComboBoxItem.IsHighlighted" Value="True">
<Setter TargetName="gd" Property="Background" Value="Yellow"></Setter>
<Setter TargetName="gd" Property="TextElement.Foreground" Value="Black"></Setter>
</Trigger>-->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
</Grid>
c# code
public partial class MainWindow : Window
{
private ObservableCollection<City> cities = new ObservableCollection<City>();
public MainWindow()
{
InitializeComponent();
cities.Add(new City() { Name = "Mumbai", State = "Maharashtra", Population = 3000000 });
cities.Add(new City() { Name = "Pune", State = "Maharashtra", Population = 7000000 });
cities.Add(new City() { Name = "Nashik", State = "Maharashtra", Population = 65000 });
cities.Add(new City() { Name = "Aurangabad", State = "Maharashtra", Population = 5000000 });
DataContext = cities;
}
}
class City
{
public string State { get; set; }
public string Name { get; set; }
public int Population { get; set; }
}
Output
Because I found, Heena, that your Xaml does not provide selected dropped down items to be highlighted I modified your code as follows:
Xaml
<ComboBox Name="cbCities" Height="30" Margin="5" HorizontalContentAlignment="Left" HorizontalAlignment="Stretch" ItemsSource="{Binding}" >
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Margin="2" Text="{Binding Name}"/>
<TextBlock Margin="2" Text="{Binding State}"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border Name="templateBorder" Padding="2" SnapsToDevicePixels="true">
<ContentPresenter>
<ContentPresenter.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Margin="5" Grid.Column="0" Text="{Binding Name}"/>
<TextBlock Margin="5" Grid.Column="1" Text="{Binding State}"/>
<TextBlock Margin="5" Grid.Column="2" Text="{Binding Population}"/>
</Grid>
</ContentPresenter.Content>
</ContentPresenter>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Foreground" Value="{x:Static SystemColors.HighlightTextBrush}"/>
<Setter TargetName="templateBorder" Property="Background" Value="{x:Static SystemColors.HighlightBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
C#
private void Window_Loaded(object sender, RoutedEventArgs e)
{
cities.Add(new City() { Name = "Boston", State = "MA", Population = 3000000 });
cities.Add(new City() { Name = "Los Angeles", State = "CA", Population = 7000000 });
cities.Add(new City() { Name = "Frederick", State = "MD", Population = 65000 });
cities.Add(new City() { Name = "Houston", State = "TX", Population = 5000000 });
cbCities.DataContext = cities;
}
class City
{
public string State { get; set; }
public string Name { get; set; }
public int Population { get; set; }
}
Output
I know im late but this is how you do it in a simplified way, After the DataTemplate tag you can put anything depending on how you want your lay out to look like.
<ComboBox.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="{StaticResource ForegroundMainBrush}"
Margin="5 0"
FontFamily="{StaticResource LatoBold}"
VerticalAlignment="Center">
<Run Text="Code :" />
<Run Text="{Binding ActivityCode,Mode=OneWay}" />
</TextBlock>
<TextBlock Foreground="{StaticResource ForegroundDarkBrush}"
Margin="5 0"
Text="|"
FontFamily="{StaticResource LatoBold}"
VerticalAlignment="Center" />
<TextBlock Foreground="{StaticResource ForegroundMainBrush}"
Margin="5 0"
FontFamily="{StaticResource LatoBold}"
VerticalAlignment="Center">
<Run Text="Rate :" />
<Run Text="{Binding Rate,Mode=OneWay}" />
</TextBlock>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
Result
Sample Result
Or Use a readonly property in your DataModel as shown on the code below and set your combobox DisplayMemberPath to DisplayMemberPath="CodeRate"
public string ActivityCode { get; set; }
public string Rate { get; set; }
public string CodeRate => string.Format("Code: {0} | Rate:
{1}",ActivityCode,Rate);
I just use StackPanels in mine. Maybe kind of redundant per item, but it got me exactly the solution I wanted without getting too deep into things.
<ComboBox Name="cboTask">
<StackPanel Orientation="Horizontal">
<ComboBoxItem Name="someTask" Content="Doing Some Task" /><Button Name="cmdDetails" Content="..." />
</StackPanel>
</ComboBox>