I have a treeview in my WPF MVVM application. Also I have a textbox that displays the value of the treenode. Right now when I expand the treeview and select a node its value is fetched and displayed on the textbox.
Now I included a checkbox that displays the numbers that appear on the textbox as words.(For eg : 11 as one one). Once I click on the checkbox the treeview loses its focus. Both the expansion of treeview and selection is lost. Only when I click the node again the value is shown in the textbox as words. How can I fix that?
<TreeView ItemsSource="{Binding Children}" Grid.Column="0" MinHeight="200" MinWidth="150" SelectedValuePath="0" >
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
<Setter Property="FontWeight" Value="Normal" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TreeView.ItemContainerStyle>
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:TreeViewModel}"
ItemsSource="{Binding Children}" >
<TextBlock Text="Data" />
</HierarchicalDataTemplate>
<TextBox ScrollViewer.HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
FontFamily="Courier New" FontSize="13" TextAlignment="Left"
IsReadOnly="True" Grid.Row="0" Grid.Column="1" Text="{Binding Value}" Margin="5,0" />
<CheckBox Content="View In Words" VerticalContentAlignment="Center">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:InvokeCommandAction Command="{Binding InWords}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</CheckBox>
Thanks in advance!
Related
I have ListBox with ContextMenu, I have configured MenuItem to works only if I click in selected item.
This is XAML code:
<ListBox x:Name="MessagesLb" Grid.Column="1" Margin="241,100,22.4,50" Grid.Row="1" BorderThickness="0" FontSize="14" FontWeight="SemiBold" ItemsSource="{Binding Items}" SelectionMode="Extended">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu>
<MenuItem Header="Copia" Click="MessagesLbCopySubMi_Click" />
<Separator/>
<MenuItem Header="Dettagli" />
</ContextMenu>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedItems.Count, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}" Value="0">
<Setter Property="ContextMenu" Value="{x:Null}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I tried to add Click event in my MenuItem but it doesn't work.
Example:
<MenuItem Header="Copia" Click="MessagesLbCopySubMi_Click" />
private void MessagesLbCopySubMi_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Click event done");
}
How can I solve this?
Define the ContextMenu as a resource:
<ListBox x:Name="MessagesLb" Grid.Column="1" Margin="241,100,22.4,50" Grid.Row="1" BorderThickness="0" FontSize="14" FontWeight="SemiBold"
ItemsSource="{Binding Items}" SelectionMode="Extended">
<ListBox.Resources>
<ContextMenu x:Key="cm">
<MenuItem Header="Copia" Click="MessagesLbCopySubMi_Click" />
<Separator/>
<MenuItem Header="Dettagli" />
</ContextMenu>
</ListBox.Resources>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="ContextMenu" Value="{StaticResource cm}" />
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedItems.Count, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}" Value="0">
<Setter Property="ContextMenu" Value="{x:Null}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I got this in my view, I need to be able to edit the name of the Skeleton items in the TreeView via right-click -> context menu -> rename. There is a slight problem:
When I use TextBlock it works fine (TextBlock is not editable) but the binding shuts down when I use TextBox. I tried several bindings and ancestor types, to no avail. Not sure if I should switch to TextBox at all.
<UserControl.Resources>
<Image x:Key="visibilityImage" Source="../Resources/visibility.png" Height="16" Width="16" />
<Image x:Key="visibilityOffImage" Source="../Resources/visibilityoff.png" Height="16" Width="16" />
<Style TargetType="{x:Type ToggleButton}" x:Key="visibilityButtonStyle">
<Setter Property="Content" Value="{DynamicResource visibilityImage}" />
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="{DynamicResource visibilityOffImage}" />
</Trigger>
</Style.Triggers>
</Style>
<DataTemplate DataType="{x:Type commonVM:GyroSuitViewModel}">
<views:GyroSuitView></views:GyroSuitView>
</DataTemplate>
<DataTemplate DataType="{x:Type commonVM:SkeletonViewModel}">
<views:SkeletonView></views:SkeletonView>
</DataTemplate>
</UserControl.Resources>
<Grid Name="Root">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical">
<Label Content="{Binding Title}" Margin="2"/>
<TreeView Name="SkeletonItems" ItemsSource="{Binding Skeletons}" commonExtensions:RightClickTreeViewSelectionExtension.IsEnabled="True">
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="True"/>
<Setter Property="Foreground" Value="{StaticResource ForegroundBrush}"/>
<Setter Property="IsSelected" Value="{Binding IsSelected}"/>
<Style.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="Grid.ColumnSpan" Value="2" />
</Style>
</Style.Resources>
</Style>
</TreeView.ItemContainerStyle>
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Path=Records}">
<DockPanel LastChildFill="True">
<ToggleButton Background="Transparent" BorderThickness="0" Width="20" Height="20" IsChecked="{Binding IsVisible, Mode=TwoWay}" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Checked">
<i:InvokeCommandAction Command="{Binding ChangeVisibilityCommand}"/>
</i:EventTrigger>
<i:EventTrigger EventName="Unchecked">
<i:InvokeCommandAction Command="{Binding ChangeVisibilityCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Image Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsVisible}" Value="true">
<Setter Property="Source" Value="../Resources/visibility.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsVisible}" Value="false">
<Setter Property="Source" Value="../Resources/visibilityoff.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</ToggleButton>
<ToggleButton Visibility="{Binding RecordingButtonVisibility}" Background="Transparent" BorderThickness="0" Width="20" Height="20" IsChecked="{Binding IsRecording, Mode=TwoWay}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Checked">
<i:InvokeCommandAction Command="{Binding RecordCommand}"/>
</i:EventTrigger>
<i:EventTrigger EventName="Unchecked">
<i:InvokeCommandAction Command="{Binding RecordCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Image Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsRecording}" Value="true">
<Setter Property="Source" Value="../Resources/stop.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsRecording}" Value="false">
<Setter Property="Source" Value="../Resources/record.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</ToggleButton>
<Button Visibility="{Binding DeleteButtonVisibility}" Name="DeleteButton" Height="20" BorderThickness="0" Command="{Binding DeleteCommand}" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<Image Source="../Resources/delete.png" Stretch="Fill"/>
</Button>
<xctk:ColorPicker SelectedColor="{Binding SkeletonColor, Converter={converter:DrawingColorToMediaColorConverter}}" BorderThickness="0" Margin="2" StandardColors="{Binding ElementName=Root, Path=DataContext.AvailableSkeletonColors}" Background="Transparent" Width="20" ShowAdvancedButton="False" ShowAvailableColors="False" ShowDropDownButton="False" ShowStandardColors="True" StandardColorsHeader="" />
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" Tag="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext}">
<TextBlock.ContextMenu>
<ContextMenu DataContext="{Binding PlacementTarget.Tag, RelativeSource={RelativeSource Self}}" Visibility="{Binding Path=ContextMenuVisibility}">
<MenuItem Header="Rename"/>
<MenuItem Header="Open Containing Folder" Command="{Binding OpenFolderCommand}"/>
</ContextMenu>
</TextBlock.ContextMenu>
</TextBlock>
</DockPanel>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
<ContentPresenter Name="details" Content="{Binding SelectedItem, ElementName=SkeletonItems}" />
</StackPanel>
</ScrollViewer>
</Grid>
When I use the TextBox these are the errors in the output:
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=Root'. BindingExpression:Path=DataContext.AvailableSkeletonColors; DataItem=null; target element is 'ColorPicker' (Name=''); target property is 'StandardColors' (type 'ObservableCollection`1')
and
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.UserControl', AncestorLevel='1''. BindingExpression:Path=DataContext; DataItem=null; target element is 'TextBox' (Name=''); target property is 'Tag' (type 'Object')
Thanks for every input!
How can I disable the listboxitem context menu when none or only one item is selected?
ListBox has a SelectedItems property, but it is read only and you cannot bind to it.
<ListBox ItemsSource="{Binding Items}" SelectionMode="Extended">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu>
<MenuItem Header="GOGO" />
</ContextMenu>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This should work:
<ListBox ItemsSource="{Binding Items}" SelectionMode="Extended">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu>
<MenuItem Header="GOGO" />
</ContextMenu>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedItems.Count, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}" Value="0">
<Setter Property="ContextMenu" Value="{x:Null}" />
</DataTrigger>
<DataTrigger Binding="{Binding SelectedItems.Count, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}" Value="1">
<Setter Property="ContextMenu" Value="{x:Null}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Adding two DataTriggers checking whether the SelectedItems.Count is 0 or 1 in which case it sets the ContextMenu to {x:Null}.
I have dynamic listbox bound with observable collection and contains textbox to display list property. I want "add new label" as a last item of listbox and click on label turns into textbox which is bound with listbox data template. So visual structure is like this:
Scenario 1: When No item in listbox:
ListBox:
Add new Item
Scenario 2: When 3 items in listbox:
ListBox:
Item1
Item2
Item3
Add new Item
When user click on add new item, that label should be replaced by textbox and user can add new item in it. And "Add New Item" label moved down one step.
Anyone knows how can I do that in WPF?
My code:
<ListBox Name="ListUrls" ItemsSource="{Binding . ,Source=ListSourceCollection,BindsDirectlyToSource=True, UpdateSourceTrigger=PropertyChanged}"
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<RadioButton>
<WrapPanel>
<TextBox Name="TextBoxList" Text="{Binding Path=urlString, Mode=TwoWay, UpdateSourceTrigger=LostFocus}" Focusable="{Binding IsEditing}" FocusableChanged="TextBoxList_FocusableChanged" Background="Transparent" Margin="0" BorderThickness="0" Width="150" Foreground="Gray" MouseEnter="TextBoxList_MouseEnter" MouseLeave="TextBoxList_MouseLeave">
</TextBox>
</WrapPanel>
</RadioButton>
<ToggleButton Name="EditButton" Content="Edit" Grid.Column="1" Click="Button_Click" IsChecked="{Binding IsEditing}" HorizontalAlignment="Right" Margin="0">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsEditing}" Value="False"></Condition>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}, AncestorLevel=1}, Path=IsSelected}" Value="True"></Condition>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Visibility" Value="Visible"/>
</MultiDataTrigger.Setters>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Button Content="Delete" Grid.Column="2" Click="Button_Click_1" HorizontalAlignment="Right" Margin="0">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsEditing}" Value="False"></Condition>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}, AncestorLevel=1}, Path=IsSelected}" Value="True"></Condition>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Visibility" Value="Visible"/>
</MultiDataTrigger.Setters>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
To have a "Static" property in your ListView you need:
<CollectionViewSource Source="{Binding ObservableCollection}" x:Key="requiredList"/>
in your ListView you assign ItemsSource like so:
<ListView.ItemsSource>
<CompositeCollection>
<CollectionContainer Collection="{Binding Source={StaticResource requiredPeople}}"/>
</CompositeCollection>
</ListView.ItemsSource>
<Button Content="Add new Item" Command="..." ComandParameter="..."/>
I can't remember if you need to wrap the button in ListViewItem or not.
Please bare in mind that you will need temporary field on your VM to bind it to the DataTemplate.
You will also need ICommand on your VM this way you can add new Item to your collection when you handle your command.
NOTE:
This is from my head I don't guarantee that this will work but it should give you an idea of how to tackle the problem.
EDIT
Instead of the Source use Collection in the CollectionContainer.
I am making a WPF application with MVVM Light, and I have the following TreeView:
<TreeView x:Name="TreeView"
Grid.Column="2"
HorizontalAlignment="Left" Height="463.481" VerticalAlignment="Top" Width="263"
ItemsSource="{Binding PackageView}" Margin="0,5.657,0,0" Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="2">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectedItemChanged">
<i:InvokeCommandAction Command="{Binding Command}"
CommandParameter="SelectedItemChanged"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
<Setter Property="FontWeight" Value="Normal" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TreeView.ItemContainerStyle>
When the selection is changed, I want to send the newly selected item as an argument to the command. Is there any way to do this? I was under the impression that you could do this with EventToCommand, but when I try to use them, it says they are no longer supported in version 4, and I can't find a suitable workaround.
Thanks.
When you specify CommandParameter="SelectedItemChanged" you are specifying the paramater as a string.
If you want to pass the SelectedItem as the parameter, you should do it like this: CommandParameter="{Binding ElementName=TreeView,Path=SelectedItem}".