Develop Reference

Command binding to top-level MenuItem of Menu doesn't work

I'm learning WPF and developing a dynamic Menu which is driven by data binding of it's ItemsSource to an ObservableCollection. To do this I have a simple MenuItemViewModel and a HierarchicalDataTemplate for automatic binding of MenuItems to it.
The problem I have is that Command property doesn't work for top level menu items. Despite it is set, a MenuItem doesn't react on mouse click and doesn't get disabled if Command cannot be executed. Simply it's like it's not getting bound.
For lower level menu items though, it works as intended. I think this should be a problem of my HierarchicalDataTemplate but I can't find it, because as I see there's no code in template which might affect command binding of only top-level MenuItems.
MenuItemViewModel implements INotifyPropertyChanged and contains following public properties:
string Text
Uri ImageSource
ICommand Command
ObservableCollection<MenuItemViewModel> Children
HierarchicalDataTemplate for MenuItem in my Window.Resources is as follows:
<HierarchicalDataTemplate DataType="{x:Type common:MenuItemViewModel}"
ItemsSource="{Binding Path=Children}">
<HierarchicalDataTemplate.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Command"
Value="{Binding Command}" />
</Style>
</HierarchicalDataTemplate.ItemContainerStyle>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding ImageSource}" />
<TextBlock Text="{Binding Text}" VerticalAlignment="Center"/>
</StackPanel>
</HierarchicalDataTemplate>
Can you please point me on my mistake?
EDIT: Top-level MenuItem doesn't contain any children (i.e. Children collection of associated ViewModel is empty).

Thanks to #sTrenat comment I've come to solution below.
<Menu.Resources>
<!-- cancel sharing of image so Icon will work properly -->
<Image x:Key="MenuIcon" Source="{Binding ImageSource}" x:Shared="False"/>
</Menu.Resources>
<Menu.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}"
BasedOn="{StaticResource {x:Type MenuItem}}">
<Setter Property="Header" Value="{Binding Text}" />
<Setter Property="Icon" Value="{StaticResource MenuIcon}"/>
<Setter Property="Command" Value="{Binding Command}"/>
<Setter Property="ItemsSource" Value="{Binding Children}" />
<!-- centering MenuItem's Header -->
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding}" />
</DataTemplate>
</Setter.Value>
</Setter>
<!-- setting Icon to null when ImageSource isn't specified -->
<Style.Triggers>
<DataTrigger Binding="{Binding ImageSource}"
Value="{x:Null}">
<Setter Property="Icon" Value="{x:Null}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Menu.ItemContainerStyle>

WPF ControlTemplate Triggers [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I have a project which uses WPF, C# and all that good stuff (Visual Studio 2010 also).
I have a WPF ListBox and, within that ListBox, there is a Control Template for the ListBoxItem. Within that is a section for triggers.
In this particular case, the trigger property is IsSelected, referring to the selected item for the ListBox.
What I wish to do is clean things up by taking this out of the ListBox control and putting it into a ControlTemplate in a resource list.
When I do that, it rightly tells me that there is no 'IsSelected' within the framework element.
Can someone give some suggestions as to how to complete this?
Thanks.
Oh, the XAML code is here:
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="_Border" Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" Color="Black" Opacity="1" BlurRadius="20" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
Edit: I did try this:
<Trigger Property="{Binding Path=IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}" Value="true">
However, I get an error saying 'A 'Binding' cannot be set on the 'Property' property of type 'Trigger''.
Extra edit: Alright, here is the XAML for the ListBox:
<ListBox ItemsSource="{Binding ChatNodeListViewModel.ChatNodeVMs, Source={StaticResource Locator}}" Background="Transparent" Name="LbNodes" SelectedItem="{Binding ChatNodeListViewModel.SelectedNode, Source={StaticResource Locator}}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas HorizontalAlignment="Left" VerticalAlignment="Top" Width="2000" Height="1600"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="_Border" Padding="1" SnapsToDevicePixels="true" BorderThickness="3" Margin="2" CornerRadius="5,5,5,5" BorderBrush="{Binding IsHeadNode, Converter={StaticResource ResourceKey=HeadNodeToLinearGradientBrushConverter}}" >
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="_Border" Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" Color="Black" Opacity="1" BlurRadius="20" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers-->
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Canvas.Left" Value="{Binding XCoord}"/>
<Setter Property="Canvas.Top" Value="{Binding YCoord}"/>
<EventSetter Event="PreviewMouseLeftButtonDown" Handler="lb_PreviewMouseLeftButtonDown" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Thumb Name="myThumb" Template="{StaticResource NodeVisualTemplate}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="DragDelta">
<cmd:EventToCommand Command="{Binding ChatNodeListViewModel.DragDeltaCommand, Source={StaticResource Locator}}" PassEventArgsToCommand="True"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Thumb>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So if you look at the control template trigger here, it's applied to the border (called '_Border'). Now the problem is that this leaves me with said border separate from the control template for the ListBoxItem (called NodeVisualTemplate). I'd like to put that border into the NodeVisualTemplate, but I'm not sure how I'd go about keeping that link to the IsSelected property. That's kinda the root of the problem.

A Trigger just lets you name a property of the control you're templating or (if it's a Style Trigger) styling, but a DataTrigger let's you Trigger on any value you can get from a Binding.
That's a lot more powerful. WPF's Binding class can do a lot of different things. I'd try that in the Thumb template, with a RelativeSource that searches up the visual tree to find the nearest parent control of type ListBoxItem, and then grabs that ListBoxItem's IsSelected property value. The resulting Thumb template will only be very useful on Thumbs that belong to ListBoxItems, but that's OK.
<DataTrigger
Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
Value="true"
>
...

Windows 8 metro app: styling a button dynamically. C# and Xaml

I have a xaml page with Gridview which has a Button.I am using a grouped Item page. The buttons are generated based on the dataset returned.
10 records will display 10 buttons.
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="Auto" Height="Auto" >
<Button Click="ItemView_ItemClick">
<StackPanel Margin="5" >
<TextBlock Tag="cntCustName" Style="{ThemeResource CntNormalTextBlockStyle}" Text="{Binding CUSTOMERNAME }"/>
<TextBlock Tag="cntCatCode" Style="{ThemeResource CntLrgTextBlockStyle}" Text="{Binding CATEGORYCODE}"/>
<TextBlock Tag="cntDay" Style="{ThemeResource CntNormalTextBlockStyle}" Text="{Binding DAY}"/>
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
I am getting data in a foreach loop. I want to be able to assign the styles of the buttons
dynamically based on some criteria which I have.
foreach (ContactData ContactData in _openContatcs)
{
if (ContactData.CFLAG)
{
//this is an example
Application.Current.Resources["contactSquare"] = ampStyle;
}
group.Items.Add(ContactData);
}
Styles are defined like this in a folder: Assests/Resources/BaseAPStyles.xaml
<Style x:Name="contactSquare" TargetType="Button">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Height" Value="160"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Width" Value="160"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="#ffffc600">
<ContentPresenter>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My buttons are not showing the styles. How can I achieve this?

use x:key="contactSqaure" to find the style in the application resources.
Then, access the button you would like to style and assign the style to the button like this.
yourButton.Style = Application.Resources.Current["contactSqaure"] as Style;
You can also define styles in C#, or edit the button's dependency properties.
yourButton.Height = 160;
yourButton.VerticalAlignment = VerticalAlignment.Center;
you can access the button in your datatemplate when it loads.
<DataTemplate>
<Button Loaded="Button_Loaded" .../>
....
void Button_Loaded(object sender, RoutedEventArgs args)
{
(sender as Button).Style = yourStyle;
}

Custom ListBox in WPF

I am trying to create a custom ListBox control in WPF for a chat Messenger. I am using an ellipse to show the online/offline user. The ellipse is to be displayed on left and some text in center of the ListBoxItem.
I want to set the ellipse fill propert to red/green based on some variable.
This is what I have done :
<ListBox Name="myList" HorizontalAlignment="Left" Height="232" Margin="117,74,0,0" VerticalAlignment="Top" Width="207">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel>
<Ellipse Name="ellipse" Fill="Red" DockPanel.Dock="Left">
<Ellipse.Triggers>
<Trigger Property="{Binding Online}" Value="True">
<Setter TargetName="ellipse" Property="Ellipse.Fill" Value="Green"/>
</Trigger>
</Ellipse.Triggers>
</Ellipse>
<TextBlock Text="{Binding text}"></TextBlock>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and in the code :
myList.Items.Add(new { text="Hello",Online="True" });
I am getting an error as
Cannot find the static member 'FillProperty' on the type 'ContentPresenter'.
What am I doing wrong here?

Obviously this is wrong: Property="{Binding Online}"
Also you should use a Style for triggers, no need to set TargetName, and you need to take precedence into consideration, and use a Setter for the default value.

you are actually misleading WPF with some of these concerns.
Binding A property on trigger will not work. you have to use DataTrigger insteed of Triggers.
Implementing Trigger on the Fly for any control. most of the times not work. So go with Styles.
While you are creating Ellipse in template make sure you have created enough size for it. So that can be visible to users.
try this.
<Window.Resources>
<Style x:Key="elstyle" TargetType="Ellipse">
<Setter Property="Height" Value="5"/>
<Setter Property="Width" Value="5"/>
<Setter Property="Fill" Value="Red"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Online}" Value="true">
<Setter Property="Fill" Value="Green"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<ListBox x:Name="myList" HorizontalAlignment="Left" Height="232" Margin="117,74,0,0" VerticalAlignment="Top" Width="207">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel>
<Ellipse Name="ellipse" Margin="5" DockPanel.Dock="Left" Style="{DynamicResource elstyle}">
</Ellipse>
<TextBlock Text="{Binding Name}"></TextBlock>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
code behind .
public MainWindow()
{
Random r = new Random();
InitializeComponent();
for (int i = 0; i < 10; i++)
{
myList.Items.Add(new { Name = "Name" + i.ToString(), Online = Convert.ToBoolean(r.Next(-1, 1)) });
}
}

You need to set the initial colour via a Setter and not in XAML. For more information and see this question: Change the color of ellipse when mouse over

there are a few issues in your XAML
set the size of your Ellipse
you need to use Style instead of Ellipse.Triggers
set your Fill color in your Style if you wane be able to change it in XAML by some condition
here an working example for your problem
<DataTemplate>
<!--<DockPanel> juste because i like StackPanel-->
<StackPanel Orientation="Horizontal">
<!--<Ellipse Name="ellipse" Fill="Red" DockPanel.Dock="Left">-->
<Ellipse Name="ellipse" Width="15" Height="15">
<!--<Ellipse.Triggers>-->
<Ellipse.Style>
<Style TargetType="Ellipse">
<Setter Property="Fill" Value="Red"/>
<Style.Triggers>
<!--<Trigger Property="{Binding Online}" Value="True">-->
<DataTrigger Binding="{Binding Online}" Value="True">
<Setter Property="Fill" Value="LimeGreen"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Ellipse.Style>
</Ellipse>
<TextBlock Text="{Binding text}"/>
</StackPanel>
</DataTemplate>

WPF trigger for selected items

I am using the MVVM light framework. On one of my pages I have a listbox which has a bound list and a bound selected item. I have a style that should highlight the selected item in that listbox. However, the item is not highlighted until I physically click it (It will not highlight the item when it is just bound).
XAML:
<UserControl.Resources>
<hartvm:ViewLocator x:Key="HartvilleLocator" d:IsDataSource="True" />
<DataTemplate DataType="{x:Type Quotes:QuotePetSummaryItem}">
<Views:QuoteSummaryItem DataContext="{Binding}" />
</DataTemplate>
<Style x:Key="ListboxItemStyle" TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/>
</Style.Resources>
<Setter Property="BorderBrush" Value="Red"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="False">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Opacity" Value="40"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Opacity" Value="100"/>
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<UserControl.DataContext>
<Binding Source="{StaticResource HartvilleLocator}" Path="QuoteSummary" />
</UserControl.DataContext>
<Border>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border BorderBrush="Black" BorderThickness="0">
<TextBlock TextWrapping="Wrap" Text="Quote Summary" Margin="5,0,0,0" FontSize="21.333" Foreground="{DynamicResource ControlHeaderBrush}" FontFamily="Verdana"/>
</Border>
<ScrollViewer d:LayoutOverrides="Height" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="1" Margin="10,10,5,10">
<telerik:RadBusyIndicator IsBusy="{Binding IsProcessing}">
<ListBox ItemsSource="{Binding DefaultList}" SelectedItem="{Binding SelectedDefault}" Background="{x:Null}" ItemContainerStyle="{StaticResource ListboxItemStyle}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</telerik:RadBusyIndicator>
</ScrollViewer>
</Grid>
</Border>
</UserControl>
Code (To programmatically select the item in the list box):
public QuotePetSummaryItem SelectedDefault { get; set; }
private void SelectDefault()
{
if (DefaultList== null || DefaultList.First().Pet == null) return;
SelectedDefault = DefaultList.First();
MessengerService.Send(SelectionMessage.Create(SelectedDefault.SubDefault));
}
The message being sent is not important and does some other work on another page. The SelectedDefault property is the only thing that is used for this example.
Someone have an idea as to what I need to do to get this working?

It looks like the binding (and thus your view) doesn't know that the selected item property has changed.
In the setter of SelectedDefault you need to create a notification of some sort using the INotifyPropertyChanged interface.
I just took a quick look at the MVVM light framework and judging by the samples, if your viewmodel inherits from ViewModelBase use a field-backed property and call RaisePropertyChanged:
private QuotePetSummaryItem _selectedDefault;
public QuotePetSummaryItem SelectedDefault
{
get { return _selectedDefault; }
set
{
_selectedDefault = value;
RaisePropertyChanged("SelectedDefault");
}
}

1st you have to set the binding mode for selecteditem to twoway
<ListBox ItemsSource="{Binding DefaultList}" SelectedItem="{Binding SelectedDefault, Mode=TwoWay}" Background="{x:Null}" ItemContainerStyle="{StaticResource ListboxItemStyle}">
2nd in your viewmodel you have to implement INotifyPropertyChanged and raise it properly. look at Rock Counters answer.
if all this not work check your vs output window for binding errors.