Anu Hardin
Anu Hardin

Reputation: 75

How to highlight the TreeviewItem in a TreeView to show the status?

My TreeView-Please Click here

This is my treeview. Here I am executing only inner child nodes.I want to show the status of executing node.for eg: Here "Primary_details" having 3 childs. If Tap_Diary is executing i want to highlight that node in with green color in tree.Then highlight next node.Selection of 1st node should retain.After completing these 3 nodes entire Primary details should highlight.After execution entire tree should be highlighted with green depends on the status.If the execution is failed that particular node should be in red colour.Could you please help me.Following is my Code

 <TreeView x:Name="treeViewSteps" Visibility="Hidden" HorizontalAlignment="Left" Grid.Column="1"
         Height="230"  VerticalAlignment="Top" Width="267" Margin="10,46,0,0" ScrollViewer.HorizontalScrollBarVisibility="Auto"
              ScrollViewer.VerticalScrollBarVisibility="Auto">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate DataType="{x:Type local:WorkFlowScriptIDDataStore}" ItemsSource="{Binding Subcategories}">
                <TextBlock Text="{Binding Name}" />
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
        <TreeView.ItemContainerStyle>
            <Style TargetType="{x:Type TreeViewItem}">
                <Setter Property="IsExpanded" Value="True" />
            </Style>
        </TreeView.ItemContainerStyle>
        <TreeView.Background>
            <ImageBrush/>
        </TreeView.Background>
    </TreeView>      

Code

List<WorkFlowScriptIDDataStore> lst = new List<WorkFlowScriptIDDataStore>() { WorkFlowScriptIDDataList };
            treeViewSteps.ItemsSource = lst;
public class WorkFlowScriptIDDataStore
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string ParentId { get; set; }
        public int Level { get; set; }                                              
        public List<WorkFlowScriptIDDataStore> Subcategories { get; set; }
    }

Upvotes: 1

Views: 300

Answers (1)

Mat
Mat

Reputation: 2072

You could add a status property on your item. Then just change the status of your items in code behind. The view will update the color depending on the status of each item. In my example I used DataTrigger for this. You also have to implement the INotifyPropertyChangedinterface to your item class. I've done this in my ViewModelBase class. I don't provide this class as this is a very basic MVVM pattern.

MainWindow

public partial class MainWindow
{
    public MainWindow()
    {
        this.InitializeComponent();

        List<ItemViewModel> newList = new List<ItemViewModel>();


        newList.Add(new ItemViewModel() { Name = "foo", Status = Status.finished});
        newList.Add(new ItemViewModel() { Name = "foo1", Status = Status.waiting });
        newList.Add(new ItemViewModel() { Name = "foo2", Status = Status.executing });


        newList[1].Items.Add(new ItemViewModel() { Name = "subFoo", Status = Status.executing });
        newList[1].Items.Add(new ItemViewModel() { Name = "subFoo1", Status = Status.executing });

        DataContext = newList;


    }
}

ItemViewModel

public class ItemViewModel :ViewModelBase
{
    private ObservableCollection<ItemViewModel> _subItems = new ObservableCollection<ItemViewModel>();
    private string _name;
    private Status _status;
    public string Name
    {
        get
        {
            return _name;
        }
        set
        {
            _name = value;
            OnPropertyChanged();
        }
    }
    public Status Status
    {
        get
        {
            return _status;
        }
        set
        {
            _status = value;
            OnPropertyChanged();
        }
    }

    public ObservableCollection<ItemViewModel> Items
    {
        get
        {
            return _subItems;
        }
    }
}

Status Enum

public enum Status
{
    waiting,
    executing,
    finished
}

XAML:

 <TreeView ItemsSource="{Binding}">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate DataType="{x:Type local:ItemViewModel}"
                                      ItemsSource="{Binding Items}">
                <TextBlock Text="{Binding Name}" >
                    <TextBlock.Style>
                        <Style TargetType="TextBlock">
                            <Setter Property="Background"
                                    Value="Red" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Path=Status}"
                                             Value="{x:Static local:Status.finished}">
                                    <Setter Property="Background"
                                            Value="Lime" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding Path=Status}"
                                             Value="{x:Static local:Status.waiting}">
                                    <Setter Property="Background"
                                            Value="#A9A9A9" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding Path=Status}"
                                             Value="{x:Static local:Status.executing}">
                                    <Setter Property="Background"
                                            Value="#0099CC" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style></TextBlock>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>

What is missing?

You don't provided how you process your items. But here is a example:

foreach (var item in items)
{
    item.Status = Status.waiting;
}

foreach (var item in items)
{
    item.DoSomeStuff();
    item.Status = Status.finished;
}

Upvotes: 1

Related Questions