I have a UserControl which contains a TreeView and a TextBlock:
<TreeView ItemsSource="{Binding FirstGeneration}" AllowDrop="True" Drop="TreeView_Drop" Width="300">
<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="Normal" />
</Trigger>
</Style.Triggers>
</Style>
</TreeView.ItemContainerStyle>
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}">
<StackPanel Orientation="Horizontal" >
<Image Source="{Binding Path=Image}" />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
<TextBlock Height="23" Name="textBlock1" Text="{Binding= ???}" Width="187" />
When I select an item of the treeview, I want do show some informations contained in the item (eg : the name of the selected item).
My problem is that I don't know how doing this binding, because when I select an item, the setter IsSelected of the item class is called.
Have you a best practice for doing that ?
Have a look at this in MSDN. And also the BindableSelectedItemBehaviour here.
Related
The following code is treeview:
<TreeView BorderThickness="1,1,1,1" BorderBrush="#ffcccccc" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
ItemTemplate="{StaticResource itemTypeTreeViewTemplate}"
ItemsSource="{Binding ItemTypes}"
ItemContainerStyle="{StaticResource treeViewItemStyle}"/>
And i set the itemTemplate to set the binding of items. Then set the ItemContainerStyle to change IsSelected style:
<Style x:Key="treeViewItemStyle" TargetType="TreeViewItem">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="LightBlue" />
</Trigger>
</Style.Triggers>
</Style>
<HierarchicalDataTemplate x:Key="itemTypeTreeViewTemplate"
ItemsSource="{Binding Child}">
<DockPanel Margin="0,5,0,5">
<Button VerticalAlignment="Center"
x:Name="btn1" Width="25"
Visibility="{Binding Path=IsMouseOver,RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter }}"
Content="U" DockPanel.Dock="Right" cal:Message.Attach="[Event Click] = [Action EditItemType($dataContext)]"
Style="{StaticResource ButtonStyle1}" />
<TextBlock Margin="0,2,0,2" VerticalAlignment="Center" Text="{Binding ItemTypeName}" Foreground="#FF2e8bcc" FontSize="10" FontFamily="微软雅黑" />
</DockPanel>
</HierarchicalDataTemplate>
But the isSelected style is not work. Anybody find the key??
Instead of using a style trigger, you should override the colour key for the highlighted state. Here's the code:
<Style x:Key="treeViewItemStyle" TargetType="TreeViewItem">
<!--<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="LightBlue" />
</Trigger>
</Style.Triggers>--><!--Remove Style.Trigger block-->
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="LightBlue"/>
</Style.Resources>
</Style>
Hope this helps. The other keys for this control are:
HighlightBrushKey - Focussed background. (Is focussed when
selected)
HighlightTextBrushKey - Focussed foreground.
InactiveSelectionHighlightBrushKey - Normal background.
InactiveSelectionHighlightTextBrushKey - Normal foreground.
How do you conditionally style treeviewitemson binded properties
I'm running into an issue where I want to style items in a Tree View, those that are valid selections vs hierarchy items.
I've tried to move my style tag into a TreeView.Resources and a TreeView.ItemContainerStyle tag but it still doesn't cause any formatting.
<TabItem Name="Queries" Header="Queries"
d:DataContext="{d:DesignInstance views:QuerySettingsView}">
<Grid>
<TreeView ItemsSource="{Binding QueryTreeModels}"
Width="500" Height="200" VerticalAlignment="Top"
HorizontalAlignment="Center" Margin="0,0,175,0">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}">
<HierarchicalDataTemplate.ItemContainerStyle>
<Style >
<Setter Property="TreeViewItem.IsExpanded"
Value="{Binding IsExpanded, Mode=TwoWay}" />
<Setter Property="TreeViewItem.IsSelected"
Value="{Binding IsSelected, Mode=TwoWay}" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsQuery}">
<Setter Property="TextBlock.Foreground" Value="Chartreuse" />
</DataTrigger>
<DataTrigger Binding="{Binding IsFolder}">
<Setter Property="TextBlock.Foreground" Value="Crimson" />
</DataTrigger>
</Style.Triggers>
</Style>
</HierarchicalDataTemplate.ItemContainerStyle>
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
</Grid>
</TabItem>
For DataTrigger you need to complete the condition by adding a value to DataTrigger bound field. like <DataTrigger Binding="{Binding IsQuery}" Value="true"> Refer the below code.
<TreeView x:Name="tree" Width="500" Height="200"
VerticalAlignment="Top" HorizontalAlignment="Center"
>
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}">
<HierarchicalDataTemplate.ItemContainerStyle>
<Style >
<Setter Property="TreeViewItem.IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
<Setter Property="TreeViewItem.IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsQuery}" Value="true">
<Setter Property="TreeViewItem.Foreground" Value="Chartreuse" />
</DataTrigger>
<DataTrigger Binding="{Binding IsFolder}" Value="true">
<Setter Property="TreeViewItem.Foreground" Value="Crimson" />
</DataTrigger>
</Style.Triggers>
</Style>
</HierarchicalDataTemplate.ItemContainerStyle>
<TextBlock Text="{Binding NodeName}"/>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
I have a Treeview in my WPF application. On the fly, in run time, If the element of the Tree meets certain condition, It should change its Font color from Black To Red.!
XAML
<TreeView Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" Name="treeView1"
VerticalAlignment="Stretch"
SelectedItemChanged="treeView1_SelectedItemChanged" HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Top" BorderThickness="0,0,0,1" BorderBrush="LightGray">
<TreeViewItem Header="Head Tree" ItemsSource="{Binding MainComps}">
<TreeViewItem.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>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="Foreground" Value="RED" />
</DataTrigger>
</Style.Triggers>
</Style>
</TreeViewItem.ItemContainerStyle>
<TreeViewItem.Resources>
<HierarchicalDataTemplate DataType="{x:Type TextBlock}" ItemsSource="{Binding Children}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Head Tree" />
</StackPanel>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:MainCompViewModel}" ItemsSource="{Binding Children}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Maincompname}" />
</StackPanel>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:FeatureViewModel}" ItemsSource="{Binding Children}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding FeatureName}" />
</StackPanel>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type local:CompViewModel}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Component}" />
</StackPanel>
</DataTemplate>
</TreeViewItem.Resources>
</TreeViewItem>
</TreeView>
Code behind
private void treeView1_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
{
if(selected Item meets certain condition)
{
//Change color of tree node
}
}
How can I change the color of particular Node and leave it in the same color SO that when expanded again It should be in RED.
Any help would be appreciated.
You could create a boolean property in the model which is true when the elements meets the condition. Then you bind the Foreground like so:
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=BoolProp}" Value="False">
<Setter Property="Foreground" Value="Blue"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Path=BoolProp}" Value="True">
<Setter Property="Foreground" Value="Red"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</TreeView.ItemContainerStyle>
or with converter:
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="Foreground" Value="{Binding Path=BoolProp, Converter={StaticResource ResourceKey=TheKey}}"/>
</Style>
</TreeView.ItemContainerStyle>
Just change the Foreground:
TreeViewItem ti = (TreeViewItem)treeView1.SelectedItem;
ti.Foreground = Brushes.Red;
That is embedded into the template. You can only change the color by copying the default Aero-Style for the control and changing the hard-coded value.
Or by drilling down the visual tree on-load to change it that way.
To get the default style & tenmplate go through this MSDN
Can also check step wise EXAMPLE from here.
How to enable copy in my treeviewitem so that i can copy the text in treeview selecteditem and paste it somewhere else. I can't find such property in treeview in wpf.
here is my code
<TreeView
SelectedItemChanged="treeView1_SelectedItemChanged"
HorizontalContentAlignment="Stretch">
<TreeViewItem Header="Intution Studio" ItemsSource="{Binding Main}">
<TreeViewItem.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>
</TreeViewItem.ItemContainerStyle>
<TreeViewItem.ContextMenu>
<ContextMenu ItemsSource="{Binding}">
<MenuItem Command="Copy">
<!-- (can't enable copy option) -->
<MenuItem.Icon>
<Image Source="Images\copy.png" Width="20" Height="20"/>
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</TreeViewItem.ContextMenu>
<TreeViewItem.Resources>
<HierarchicalDataTemplate DataType="{x:Type TextBlock}">
<!-- ... -->
</HierarchicalDataTemplate>
</TreeViewItem.Resources>
</TreeViewItem>
</TreeView>
Edit: Sorry WPF does not support that.
You should solve this by cloning the underlying data in your model. If you don't have MVVM or must per se clone the visual control, the only reasonable solution seems serializing it to a xaml and then reconstructing it from that.
http://social.msdn.microsoft.com/Forums/en/wpf/thread/209597f0-0e8b-4fbb-a69d-a6479ed96187
My Xaml looks like this:
<TreeView Name="mainTree" ItemsSource="{Binding Folders}">
<TreeView.Resources>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
<Style.Triggers>
<!-- ??? -->
</Style.Triggers>
</Style>
<HierarchicalDataTemplate DataType="{x:Type local:FolderNode}" ItemsSource="{Binding Children}" >
<StackPanel Orientation="Horizontal" Name="myPanel">
<Image x:Name="treeImg" Width="16" Height="16" Source="Images/vsfolder_closed.png"/>
<TextBlock Text="{Binding Name}" />
</StackPanel>
<HierarchicalDataTemplate.Triggers>
<!-- ??? -->
</HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
Now what I would like is if a treenode is expanded, the image source changes to Images/vsfolder_open.png...
What would be the easiest way to do that?
Thanks in advance!
Add a DataTrigger to the HierarchicalDataTemplate. Since you have two-way binding to the Property IsExpanded in the ViewModel you can bind to it and use TargetName because of the namescope in a DataTemplate.
<HierarchicalDataTemplate.Triggers>
<DataTrigger Binding="{Binding IsExpanded}" Value="True">
<Setter TargetName="treeImg"
Property="Source"
Value="Images/vsfolder_open.png"/>
</DataTrigger>
</HierarchicalDataTemplate.Triggers>