WPF - update a dependency property from a DataTrigger - wpf

I have a listView and want when an item is selected to update a public value from the DataContext.
I know I can do this through the SelectedItem from listview, I want to do this (if possible) with a data trigger.
Code:
<Window.DataContext>
<local:MainWindowViewModel></local:MainWindowViewModel>
</Window.DataContext>
<Grid>
<ListView ItemsSource="{Binding listsToDisplay}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding listName}"></TextBlock>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}, Path=IsSelected}" Value="True">
<Setter Property="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MainWindowViewModel}}, Path=listWidth}" Value="1"></Setter>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>

I want to do this (if possible) with a data trigger.
This is not possible. You cannot set a value of a view model property in a setter of a style.
A style setter can only set the value of a property that belongs to the element to which the style is applied.

You could bind the selected item of the listView to a property on the viewmodel then do the update in the viewmodel when that value changes through the property.
<ListView ItemsSource="{Binding listsToDisplay}" SelectedItem="{Binding SelectedItem}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding listName}"></TextBlock>
</ListView.ItemTemplate>
</ListView>
This also has the advantage of allowing you to get or set the selected item in the viewModel.

Related

How to handle click in ControlTemplate for ComboBox in WPF?

In a DataGrid I display data about financial transactions. One column is the Account with the xaml below. The CellEditingTemplate display the ComboBox with the accounts. The CellTemplate is tricky. I want to display the Account as a TextBlock. Previously I bound "Account.Name" but validating a nested property is not easy if Account is null (e.g. in a new row). So I decided to use ComboBox but with a ControlTemplate. Displaying values and validation works. The problem is that for click the CellEditingTemplate is not activated.
<DataGridTemplateColumn Header="{x:Static r:Resource.AccountName}">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type DataGrid}}, Path=DataContext.AccountObjects}"
SelectedItem="{Binding Account, ValidatesOnDataErrors=True}"
DisplayMemberPath="Name">
<ComboBox.Template>
<ControlTemplate TargetType="{x:Type ComboBox}">
<TextBlock Text="{TemplateBinding Text}"/>
</ControlTemplate>
</ComboBox.Template>
</ComboBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type DataGrid}}, Path=DataContext.AccountObjects}"
SelectedItem="{Binding Account, ValidatesOnDataErrors=True}"
DisplayMemberPath="Name"/>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>

ComboBoxItem Will Not Collapse

I wrote a basic visibility converter such that when the property "Active" is true the ComboBoxItem should be Visible, Collapsed otherwise. It currently displays the Active ones properly, the inactive ones Text are invisible but the item can still be seen.
http://snag.gy/Mh2Xq.jpg
May I ask how do I get the ComboBoxItem to collapse the comboboxitem that are inactive properly please.
<ComboBox Grid.Row="1" Grid.Column="2" SelectedItem="{Binding Product, Mode=TwoWay}" ItemsSource="{Binding Products}" VerticalContentAlignment="Center">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Visibility" Value="{Binding Active, Converter={StaticResource VisibilityConverter }}"></Setter>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Apply the visibility converter to the parent stackpanel instead. Like so:
<StackPanel Orientation="Horizontal" Visibility="{Binding Active, Converter={StaticResource VisibilityConverter}}">
...
</StackPanel>
<ComboBox.Resources>
<Style TargetType="ComboBoxItem">
<Setter Property="Visibility" Value="{Binding Active, Converter={StaticResource VisibilityConverter}}" />
</Style>
</ComboBox.Resources>
You should filter the bound list on basis of IsActive
Try to Bind comboBox to
Products.Where(t => t.IsActive)

Something Like For Loop in XAML

I have a Resource Dictionary in which I want to have a common DataTemplate for ComboBox.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DataTemplate DataType="{x:Type ComboBox}">
<StackPanel Orientation="Horizontal">
<!--Here I need to use something like For Loop-->
<TextBlock Text=""></TextBlock>
</StackPanel>
</DataTemplate>
</ResourceDictionary>
Now I have created a dependency property of type integer named NoOfColumns. While declaring the comboBox I need to set the NoOfColumns property to automatically generate that number of columns. I want them to databind.
Update as requested by Joe
<ComboBox x:Name="cbUnder" ItemsSource="{Binding GroupsAndCorrespondingEffects}"
IsEditable="True" SelectedItem="{Binding SelectedGroup, Mode=TwoWay}"
Text="{Binding InputValue, UpdateSourceTrigger=PropertyChanged}" TextSearch.TextPath="GroupName"
Grid.Column="1" Grid.ColumnSpan="4" Grid.Row="3">
<ComboBox.Resources>
<DataTemplate DataType="{x:Type vm:GroupAndCorrespondingEffect}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding GroupName}" Width="250">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding IsHighlighted}" Value="True">
<Setter Property="Foreground" Value="Blue" />
<Setter Property="FontWeight" Value="Bold"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Text="{Binding CorrespondingEffect}" />
</StackPanel>
</DataTemplate>
</ComboBox.Resources>
</ComboBox>
There's nothing like for in XAML, but ItemsControl is very much like foreach. Instead of setting an int property, make an ObservableCollection<T> and add that many objects to it, and then bind the ItemsControl to your collection property.
This has the added benefit that each collection item can expose properties to be bound, e.g. if you wanted to display different text in each TextBlock, you could put a property on your collection item and bind the TextBlock to that property.

What's wrong with this binding?

I'm trying to assign DataContext to a MenuItem, which is part of ListBox.
<Style x:Key="ContextMenuStyle" TargetType="telerik:RadMenuItem">
<Setter Property="DataContext" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=telerik:RadListBox}, Path=DataContext}" />
</Style>
<DataTemplate x:Key="TemplateSelector">
<ContentPresenter Content="{Binding}" Name="contentPresenter">
<telerik:RadContextMenu.ContextMenu>
<telerik:RadContextMenu>
<telerik:RadMenuItem Header="Connect" Click="RadMenuItem_Click" Style="{StaticResource ResourceKey=ContextMenuStyle}" />
<telerik:RadMenuItem Header="Disconnect" />
<telerik:RadMenuItem Header="Delete Database" />
</telerik:RadContextMenu>
</telerik:RadContextMenu.ContextMenu>
</ContentPresenter>
</DataTemplate>
<Grid>
<telerik:RadListBox x:Name="lsbDevices" ItemsSource="{Binding Path=Devices}" ItemTemplate="{StaticResource TemplateSelector}"
SelectedItem="{Binding SelectedDevice, Mode=TwoWay}" Grid.Row="0" />
</Grid>
Here's what I do. RadListBox's DataContext is set to my ViewModel. I want to assign this ViewModel to every RadMenuItem's DataContext through ContextMenuStyle, but it's not working. RadListBox's DataContext is properly set to my modelview, but RadMenuItem's datacontext is null. What am I missing?
Thanks
ContextMenus are not part of the same VisualTree as the rest of the UI, so your RelativeSource binding is not finding the ListBox
You can find the UI object the ContextMenu is attached to by using the PlacementTarget property of the ContextMenu
<Style x:Key="ContextMenuStyle" TargetType="telerik:RadMenuItem">
<Setter Property="DataContext" Value="{Binding PlacementTarget.DataContext,
RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadContextMenu}}}" />
</Style>

Binding a checkbox in a datagrid header

I have a datagrid where the first column contains a checkbox to let the user selects specific rows. I have added a checkbox in the datagrid column header to check or uncheck all the rows.
Is it possible to add this functionality only with binding in XAML (no checked event).
<sdk:DataGrid AutoGenerateColumns="False" Grid.Row="1" Name="grid" ItemsSource="{Binding myCollection, Mode=TwoWay}" >
<sdk:DataGrid.Columns>
<sdk:DataGridCheckBoxColumn Binding="{Binding myCollection.UserSelected, Mode=TwoWay}" >
<sdk:DataGridCheckBoxColumn.HeaderStyle>
<Style TargetType="sdk:DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<CheckBox x:Name="checkAll" IsThreeState="True"
IsChecked="{Binding myCollection.UserSelected, Mode=TwoWay, Converter={StaticResource threeStateConverter}}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</sdk:DataGridCheckBoxColumn.HeaderStyle>
</sdk:DataGridCheckBoxColumn>
<sdk:DataGridTextColumn Binding="{Binding Description}" Header="Chemin" />
</sdk:DataGrid.Columns>
</sdk:DataGrid>
I think there's something wrong with the "myCollection.UserSelected" part. ThreeStateConverter is a value converter that would return null when some items are selected, true when they are all selected, etc. but the Convert method is never called (even though the PropertyChanged event is raised when UserSelected is changed).
Any idea on how I can do it? Thank you.
Probably, you've solved the problem already, but nevertheless:
<navigation:Page.Resources>
<model:MyModel x:Key="Model"/>
</navigation:Page.Resources>
...
<data:DataGridTemplateColumn Width="Auto" >
<data:DataGridTemplateColumn.HeaderStyle>
<Style TargetType="datap:DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<CheckBox IsThreeState="True" Margin="2,0,-13,0" DataContext="{StaticResource Model}" IsChecked="{Binding Path=AllChecked, Mode=TwoWay}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</data:DataGridTemplateColumn.HeaderStyle>
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding Checked, Mode=TwoWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
MyModel class contains bool? property that implements logic of selection. It is also used as a `DataContext of page.
I must admit that this potentially has problems if we need to change model.
EDIT: I found another way:
<navigation:Page.DataContext>
<model:MyModel />
</navigation:Page.DataContext>
...
<data:DataGridTemplateColumn Width="Auto" >
<data:DataGridTemplateColumn.HeaderStyle>
<Style TargetType="datap:DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<CheckBox IsThreeState="True" Margin="2,0,-13,0" IsChecked="{Binding Path=DataContext.AllChecked, ElementName=LayoutRoot, Mode=TwoWay}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</data:DataGridTemplateColumn.HeaderStyle>
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding Checked, Mode=TwoWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
Here we bind to DataContext of root layout element (usually called LayoutRoot) which inherits its data context from page by default.

Resources