I have the following ListBox :
<ListBox ItemsSource="{Binding CityList}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:name="Name" Text="{Binding Name }" />
<TextBlock x:name="Country" Text="{Binding Country}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The following article explains very well how to implement SelectionChanged :
<phone:LongListSelector x:Name="Results" Margin="0,0,-12,0" ItemsSource="{Binding Events}" SelectedItem="{Binding Event}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding benchmark.name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding summary}" TextWrapping="Wrap" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<command:EventToCommand Command="{Binding WodSelectedCommand, Mode=OneWay}" CommandParameter="{Binding Path=SelectedItem, ElementName=Results}" PassEventArgsToCommand="False"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</phone:LongListSelector>
But in this example the Selection Changed will be the same for every Textblocks in my example i would like that my two textblocks have two different commands.
How can i do so ?
Put the event triggers inside the DataTemplate. That should let you have two different commands for tap on Name and Country.
<ListBox ItemsSource="{Binding CityList}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:name="Name" Text="{Binding Name }" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<command:EventToCommand Command="{Binding NameSelectedCommand, Mode=OneWay}" CommandParameter="{Binding Path=SelectedItem, ElementName=CityList}" PassEventArgsToCommand="False"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBlock>
<TextBlock x:name="Country" Text="{Binding Country}" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<command:EventToCommand Command="{Binding CountrySelectedCommand, Mode=OneWay}" CommandParameter="{Binding Path=SelectedItem, ElementName=CityList}" PassEventArgsToCommand="False"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Related
I have a stack panel for which I need a mouse event to be handled in the ViewModel but the binding doesn't work - the command isn't found although the other elements are also binded to the ViewModel and they work. Here is the xaml:
<Window.DataContext>
<vm:Ticker/>
</Window.DataContext>
<ListView Grid.Row="3"
ItemsSource ="{Binding TickersCollectionView}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal"
Name="STPListView">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<i:InvokeCommandAction
Command="{Binding MouseLeftButtonDownCommand}"
CommandParameter="{Binding ElementName=STPListView}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<TextBlock
Width="130"
Text="{Binding Market}"
Foreground="WhiteSmoke"/>
<TextBlock
Width="110"
Text="{Binding Price}"
Foreground="{Binding LastPrice, Converter={StaticResource BoolToForeground}}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The command is a property of the ViewModel. How can I bind it?
If the MouseLeftButtonDownCommand property is defined in the same view model as the TickersCollectionView property, you should bind to it using a RelativeSource:
Command="{Binding DataContext.MouseLeftButtonDownCommand,
RelativeSource={RelativeSource AncestorType=ListView}}"
I am trying to update the Combo ToolTip at the same time as the ComboItems.
<ComboBox x:Name="comboMeetingWeek" ItemsSource="{Binding Meetings}"
SelectedItem="{Binding Meeting, UpdateSourceTrigger=PropertyChanged}">
<ComboBox.ToolTip>
<ToolTip DataContext="{Binding Path=PlacementTarget, RelativeSource={RelativeSource Self}}"
Content="{Binding Path=SelectedItem.ToolTipForSpecialEvent}">
</ToolTip>
</ComboBox.ToolTip>
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" ToolTip="{Binding ToolTipForSpecialEvent}">
<Image Source="Images/Bell.png" Margin="0,0,5,0"
Visibility="{Binding DisplayBellImage, Converter={StaticResource BoolToHiddenConverter}}" Stretch="None"/>
<TextBlock Text="{Binding DateMeetingAsText}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
The ComboBoxItems will always be correct. The but the ComboBox ToolTip won't.
OK, I found the solution. I had to do it like this:
<ComboBox x:Name="comboMeetingWeek" ItemsSource="{Binding Meetings}"
SelectedItem="{Binding Meeting, UpdateSourceTrigger=PropertyChanged}"
ToolTip="{Binding Meeting.ToolTipForSpecialEvent}">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" ToolTip="{Binding ToolTipForSpecialEvent}">
<Image Source="Images/Bell.png" Margin="0,0,5,0"
Visibility="{Binding DisplayBellImage, Converter={StaticResource BoolToHiddenConverter}}" Stretch="None"/>
<TextBlock Text="{Binding DateMeetingAsText}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Less code ... even better .. :) But now is always works right.
This link helped.
I'm building a treeview with HierarchicalDataTemplates and would like to bind the nodes to a command from my MainViewModel. I guess there is some conflict with the scopes, since the binding works if I e.g. use a button and define it outside of the treeview. If I define it inside, however, it does not work.
I've searched through Stackoverflow and found several solutions but none that worked for me. Jehof e.g. suggested here to use
<Button Command="{Binding DataContext.Command,
RelativeSource={RelativeSource AncestorLevel=2, AncestorType=TreeViewItem}}"
CommandParameter="{Binding}" />
but that did not work. Thank you for any suggestions!
<TreeView ItemsSource="{Binding _questions}" Grid.Row="0" Margin="10" BorderThickness="1">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:Question}" ItemsSource="{Binding Converter={StaticResource QuestionConverter}}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Name}" />
</StackPanel>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:MainOption}" ItemsSource="{Binding MainOptions}">
<StackPanel Orientation="Horizontal">
<CheckBox Content="{Binding Path=Name}" />
/////////////////////////////////////
<Button Command="{Binding ThisIsMyCommand}" Content="Click Me"/>
/////////////////////////////////////
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.Resources>
Is your TreeView-Control inside a Window or UserControl?
If you are inside a Window:
<Button Command="{Binding DataContext.Command, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" CommandParameter="{Binding}" />
and for UserControl
<Button Command="{Binding DataContext.Command, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}" CommandParameter="{Binding}" />
I have the following DataTemplate used in a TreeView.
How do I have LeftMouseClick on the ContentPresenter to bind to a property of the DataType in MVVM fashion?
Thanks for any help (or better idea).
<DataTemplate x:Key="sharedTemplate">
<StackPanel Orientation="Horizontal">
<CheckBox
Focusable="False"
IsChecked="{Binding IsChecked}"
VerticalAlignment="Center"
/>
<ContentPresenter
Content="{Binding Name, Mode=OneTime}"
Margin="2,0"
/>
</StackPanel>
</DataTemplate>
<TreeView
ItemContainerStyle="{StaticResource TreeViewItemStyle}"
ItemsSource="{Binding ReportTree}" >
<TreeView.Resources>
<HierarchicalDataTemplate
DataType="{x:Type r:ReportViewModel}"
ItemsSource="{Binding Children}"
>
<ContentControl Content="{Binding}"
ContentTemplate="{StaticResource sharedTemplate}" />
</HierarchicalDataTemplate>
................
Addendum: This works!
<DataTemplate DataType="{x:Type r:PrinterViewModel}">
<!--Bind the ContentControl to the DataType-->
<ContentControl Content="{Binding}"
ContentTemplate="{StaticResource sharedTemplate}" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<h:EventToCommand
Command="{Binding DataContext.SelectItem, RelativeSource={RelativeSource FindAncestor, AncestorType=TreeView}}"
CommandParameter="{Binding}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</ContentControl>
</DataTemplate>
Addendum: As it turns out, the above Interaction.Trigger does work to correctly send the selected viewmodel back to the DataContext of the TreeView. Problem solved.
I have an wpf application.I want to show the selected item in the Combo box.
I get an error saying Cant use both DisplayMemberPath and Item Template.
My ItemsSource is not of string type
its a class called "StockExchange"
Following is my code :
<telerik:RadComboBox Grid.Column="1" DisplayMemberPath="StockExchangeName" Name="cmbStockExchange" Foreground="White" HorizontalAlignment="Left" HorizontalContentAlignment="Center" Margin="118,14,0,0" VerticalAlignment="Top" Width="100" Height="23" ItemsSource="{Binding StockExchange, Mode=TwoWay}" SelectedItem="{Binding SelectedStockExchange,Mode= TwoWay}" telerik:StyleManager.Theme="Summer" TabIndex="3">
<telerik:RadComboBox.ItemTemplate >
<DataTemplate>
<CheckBox Name="StockExchange" Content="{Binding StockExchangeName}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Checked">
<Commands:EventToCommand Command="{Binding DataContext.StockExchangeCheckedCmd,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadWindow}}}" CommandParameter="{Binding ElementName=StockExchange}" ></Commands:EventToCommand>
</i:EventTrigger>
<i:EventTrigger EventName="Unchecked">
<Commands:EventToCommand Command="{Binding DataContext.StockExchangeUnCheckedCmd,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadWindow}}}" CommandParameter="{Binding ElementName=StockExchange}" ></Commands:EventToCommand>
</i:EventTrigger>
</i:Interaction.Triggers>
</CheckBox>
</DataTemplate>
</telerik:RadComboBox.ItemTemplate>
</telerik:RadComboBox>
what is solution for this? how can I display single or multiple selected Items in a Combo box?
<telerik:RadComboBox Grid.Column="1" Name="cmbStockExchange" Foreground="White" HorizontalAlignment="Left" HorizontalContentAlignment="Center" Margin="118,14,0,0" VerticalAlignment="Top" Width="100" Height="23" ItemsSource="{Binding StockExchange, Mode=TwoWay}" SelectedItem="{Binding SelectedStockExchange,Mode= TwoWay}" telerik:StyleManager.Theme="Summer" TabIndex="3">
<telerik:RadComboBox.ItemTemplate >
<DataTemplate>
<CheckBox Name="StockExchange" Content="{Binding StockExchangeName}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Checked">
<Commands:EventToCommand Command="{Binding DataContext.StockExchangeCheckedCmd,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadWindow}}}" CommandParameter="{Binding ElementName=StockExchange}" ></Commands:EventToCommand>
</i:EventTrigger>
<i:EventTrigger EventName="Unchecked">
<Commands:EventToCommand Command="{Binding DataContext.StockExchangeUnCheckedCmd,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadWindow}}}" CommandParameter="{Binding ElementName=StockExchange}" ></Commands:EventToCommand>
</i:EventTrigger>
</i:Interaction.Triggers>
</CheckBox>
</DataTemplate>
</telerik:RadComboBox.ItemTemplate>
Create a Textblock that Shows the selected item StockExchangeName
<TextBlock Text="{Binding Path=SelectedItem.StockExchangeName, ElementName=cmbStockExchange}" />
If you select CheckBox, no item is shown selected in comboBox because no item is selected since click event is handled by checkbox.
You can bind IsChecked with IsSelected value of ComboBoxItem so that on click of checkbox corresponding item gets selected.
<CheckBox Content="{Binding StockExchangeName}"
IsChecked="{Binding IsSelected, RelativeSource={RelativeSource
Mode=FindAncestor, AncestorType=ComboBoxItem}}"/>
This will show checkBox in comboBox because you have provided template with checkBox in it for comboBoxItem.