WPF TreeView Style - WPF Discussion Boards

Call Web Service From Silverlight Application

13-Jul-12 10:07

Ok, I finally got my treeview with hyperlinks working. Thanks SledgeHammer!

I now have the following

<Window.Resources>

    <Style x:Key ="linkStyle"
           TargetType="{x:Type Hyperlink}" >
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="TextBlock.TextDecorations" Value="Underline"/>
                <Setter Property="Foreground" Value="RoyalBlue" />
            </Trigger>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="TextBlock.TextDecorations" Value="{x:Null}"/>
                <Setter Property="Foreground" Value="RoyalBlue" />
            </Trigger>
        </Style.Triggers>
    </Style>

    <HierarchicalDataTemplate DataType="{x:Type models:NodeModel}"
                          ItemsSource="{Binding Path=Children}">
        <StackPanel Orientation="Horizontal"
                Margin="2">

            <TextBlock>

                <Hyperlink NavigateUri="{Binding Caption}"
                           Foreground="#0C2DAA"
                           Style="{StaticResource linkStyle}"
                           CommandParameter="{Binding}"
                           Command="{Binding Path=DataContext.SelectedLinkCommand,
                                    RelativeSource={RelativeSource FindAncestor,
                                    AncestorType={ x:Type views:MainWindowView}}}">

                    <InlineUIContainer>
                        <TextBlock Text="{Binding Caption}" />
                    </InlineUIContainer>

                </Hyperlink>

            </TextBlock>

        </StackPanel>

    </HierarchicalDataTemplate>

</Window.Resources>

<Grid>

    <controls:TreeViewEx ItemsSource="{Binding TreeData}"
                         SelectedItemEx="{Binding SelectedTreeItem, Mode=TwoWay}"
                         Grid.Row="0"
                         Grid.Column="0">

        <TreeView.Resources>
            <!--Make the selected item's background transparent-->
            <SolidColorBrush Color="Transparent" x:Key="{x:Static SystemColors.HighlightBrushKey}"/>
        </TreeView.Resources>

        <TreeView.ItemContainerStyle>
            <Style TargetType="{x:Type TreeViewItem}">
                <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
            </Style>
        </TreeView.ItemContainerStyle>

    </controls:TreeViewEx>

</Grid>

I'd really like to have all the treeview styling done in one place, but I'm not sure how. I would like to move

<TreeView.Resources>
    <!--Make the selected item's background transparent-->
    <SolidColorBrush Color="Transparent" x:Key="{x:Static SystemColors.HighlightBrushKey}"/>
</TreeView.Resources>

<TreeView.ItemContainerStyle>
    <Style TargetType="{x:Type TreeViewItem}">
        <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
    </Style>
</TreeView.ItemContainerStyle>

out of the treeview up to the Window.Resources section.

If it's not broken, fix it until it is

Re: WPF TreeView Style

Cracked-Down17-Jul-12 21:52

Cracked-Down

17-Jul-12 21:52

you can do this using the following steps.

<Window.Resources>
.
.
.
<Style TargetType="{x:Type TreeViewItem}">
        <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
    </Style>
.
.
.

<Window.Resources>

and in the treeview

<controls:TreeViewEx ItemsSource="{Binding TreeData}"
                             SelectedItemEx="{Binding SelectedTreeItem, Mode=TwoWay}"
                             Grid.Row="0"
                             Grid.Column="0"
                             ItemTemplate="{StaticResource treeDataTemplate}"
                              Style="{DynamicResource TreeViewStyle}">

and in the datatemplate add a key

<HierarchicalDataTemplate x:Key="treeDataTemplate" DataType="{x:Type models:NodeModel}"
                              ItemsSource="{Binding Path=Children}">

I would like note one thing about managing resources. All the related resources should be added in the resource dictionary. In your case I would like to suggest that, have separate resource dictionary e.g. "NavigationTreeResources.xaml" for TreeView and add your DataTemplates and style in it. Adding the resources in Windows makes the windows.xaml huge as well as restrict the scope of the resources to current Smile | :)

window.

Hope this information helps to solve your problem

Happy Coding
Big Grin | :-D

youness12-Jul-12 22:55

youness

12-Jul-12 22:55

Hello,
I have a problem I do a lot of research on the net but no solution.
I have a web service deployed in a server and an application in silverlight 4 on my machine, I call the web service from my application but I get an exception here is the exception:
CommunicationException was unhandled by user code: The remote server returned an error: NotFound
Thank you in advance for your help.

Pete O'Hanlon12-Jul-12 23:07

Pete O'Hanlon

12-Jul-12 23:07

Have you checked to see that your web service is directly accessible? To do this, open it up in IE using the address you are using in your Silverlight application.

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

CodeStash - Online Snippet Management | My blog | MoXAML PowerToys | Mole 2010 - debugging made easier

youness13-Jul-12 5:23

youness

13-Jul-12 5:23

yes , the web service is directly accessible from IE

Pete O'Hanlon15-Jul-12 11:13

Pete O'Hanlon

15-Jul-12 11:13

If you are still having this issue, I would recommend trying the techniques talked about here[^].

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

CodeStash - Online Snippet Management | My blog | MoXAML PowerToys | Mole 2010 - debugging made easier

Mycroft Holmes16-Jul-12 0:34

Mycroft Holmes

16-Jul-12 0:34

It does irritate me when some dipstik downvotes a helpful response - overbalanced!

Never underestimate the power of human stupidity
RAH

Pete O'Hanlon16-Jul-12 1:15

Pete O'Hanlon

16-Jul-12 1:15

I can only assume it's because I didn't wave the magic code wand.

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

CodeStash - Online Snippet Management | My blog | MoXAML PowerToys | Mole 2010 - debugging made easier

Anumeha Shukla15-Jul-12 23:36

Anumeha Shukla

15-Jul-12 23:36

Message size limit could also be the reason for this kind of error, try to increase the MessageSize in your service.

WPF Hyperlink In Treeview Problem

vinodkrebc17-Jul-12 19:46

vinodkrebc

17-Jul-12 19:46

You could diagnose wcf service in that case to find out what exactly is happening. To diagnose plz check the below link
http://www.exploresilverlight.com/2012/06/remote-server-return-and-error-from-wcf.html[^]

http://www.exploresilverlight.com
Cheers!
Vinod

Kevin Marois12-Jul-12 10:26

12-Jul-12 10:26

I'v been struggling with this all morning. Cold use some help...

I have created a HierarchicalDataTemplate used in a treeview. I have a class that overrides the basic treeview, called TreeViewEx, that I got from someone here at CP. (Can't remember who - sorry).

At any rate, here's the template:

<HierarchicalDataTemplate DataType="{x:Type models:TreeItemModel}"
                        ItemsSource="{Binding Path=Children}">
    <StackPanel Orientation="Horizontal"
            Margin="2">

        <TextBlock Margin="0,0,5,0">
            <Hyperlink NavigateUri="{Binding Caption}"
                        Foreground="#0C2DAA"
                        Style="{StaticResource linkStyle}"
                        Command="{Binding Path=DataContext.SelectedLinkCommand,
                                RelativeSource={RelativeSource FindAncestor, 
                                AncestorType={ x:Type views:MainWindowView}}}">

                <InlineUIContainer>
                    <TextBlock Text="{Binding Caption}" />
                </InlineUIContainer>

            </Hyperlink>

        </TextBlock>

    </StackPanel>

</HierarchicalDataTemplate>

and here's the treeview usage:

<controls:TreeViewEx ItemsSource="{Binding TreeItems}"/>

and finally the code behind:

private TreeItemModel _SelectedTreeLink;
public TreeItemModel SelectedTreeLink
{
    get { return _SelectedTreeLink; }
    set
    {
        if (_SelectedTreeLink != value)
        {
            _SelectedTreeLink = value;
            RaisePropertyChanged("SelectedTreeLink");
        }
    }
}

private ICommand _SelectedLinkCommand;
public ICommand SelectedLinkCommand
{
    get
    {
        if (_SelectedLinkCommand == null)
            _SelectedLinkCommand = new RelayCommand(SelectedLinkExecuted, SelectedLinkCanExecute);

        return _SelectedLinkCommand;
    }
}

private bool SelectedLinkCanExecute()
{
    return true;
}
private void SelectedLinkExecuted()
{
    var item = SelectedTreeLink;
}

The tree loads with data fine, and they tree nodes are hyperlinks. The command works. However, when I break in the SelectedLinkExecuted method, SelectedTreeLink = null.

How can I get a reference to the data model behind the link?

Thanks

If it's not broken, fix it until it is

Ian Shlasko12-Jul-12 10:55

Ian Shlasko

12-Jul-12 10:55

You could try using the CommandParameter property of the Hyperlink. Just set it to "{Binding}", and the RoutedEventArgs class should contain a reference to the current object in its Parameter property.

You'll have to use the RelayCommand a bit differently, though, to get that RoutedEventArgs object into your handler.

Proud to have finally moved to the A-Ark. Which one are you in?
Author of the Guardians Saga (Sci-Fi/Fantasy novels)

Kevin Marois12-Jul-12 11:10

12-Jul-12 11:10

Ok, I think I understand. Do you have an example?

If it's not broken, fix it until it is

Ian Shlasko12-Jul-12 11:22

Ian Shlasko

12-Jul-12 11:22

I'm not that familiar with whichever RelayCommand implementation you're using (I've developed my own ways of organizing command-bindings), but the XAML is just:

CommandParameter="{Binding}"

But if it was a normal RoutedEventHandler, it would look something like:

private void ExecuteMyCommand(object sender, ExecutedRoutedEventArgs e)
{
  MyModelClass modelItem = (MyModelClass)(e.Parameter);
  // Do whatever you want with the model
}

Proud to have finally moved to the A-Ark. Which one are you in?
Author of the Guardians Saga (Sci-Fi/Fantasy novels)

SledgeHammer0112-Jul-12 11:23

SledgeHammer01

12-Jul-12 11:23

I think you got that from me lol. From the code you posted, it seems like you didn't bind the treeview's selected item to the VM.

Kevin Marois12-Jul-12 11:34

12-Jul-12 11:34

Actually I had this earlier...

<controls:TreeViewEx ItemsSource="{Binding TreeItems}"
                        SelectedItemEx="{Binding SelectedTreeLink}"/>

but it didn't change anything so I removed it.

and here's the TreeViewEx. Is this your code?

public class TreeViewEx : TreeView
{
    public static readonly DependencyProperty SelectedItemExProperty = DependencyProperty.Register("SelectedItemEx", typeof(object),
         typeof(TreeViewEx), new FrameworkPropertyMetadata(null, new PropertyChangedCallback(OnSelectedItemExChanged)));

    public TreeViewEx()
        : base()
    {
        SelectedItemChanged += new RoutedPropertyChangedEventHandler<object>(TreeViewEx_SelectedItemChanged);
    }

    public object SelectedItemEx
    {
        get { return (object)GetValue(SelectedItemExProperty); }
        set { SetValue(SelectedItemExProperty, value); }
    }

    public bool SelectItem(object item)
    {
        if ((SelectedItem != null) && (SelectedItem.Equals(item)))
            return true;

        if (!ExpandAndSelectItem(this, item))
        {
            UpdateLayout();
            return ExpandAndSelectItem(this, item);
        }

        return true;
    }

    private static void OnSelectedItemExChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        TreeViewEx treeView = d as TreeViewEx;

        if ((object)treeView != null)
            treeView.SelectItem(e.NewValue);
    }

    private void TreeViewEx_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
    {
        SetValue(SelectedItemExProperty, e.NewValue);
    }

    private bool ExpandAndSelectItem(ItemsControl parentContainer, object itemToSelect)
    {
        TreeViewItem tvi = parentContainer.ItemContainerGenerator.ContainerFromItem(itemToSelect) as TreeViewItem;

        if ((object)tvi != null)
        {
            tvi.IsSelected = true;
            tvi.BringIntoView();
            tvi.Focus();
            return true;
        }

        for (int nIndex = 0; nIndex < parentContainer.Items.Count; nIndex++)
        {
            TreeViewItem currentContainer = parentContainer.ItemContainerGenerator.ContainerFromIndex(nIndex) as TreeViewItem;

            if (((object)currentContainer != null) && (currentContainer.Items.Count > 0))
            {
                bool bIsExpanded = currentContainer.IsExpanded;

                if (currentContainer.ItemContainerGenerator.Status != GeneratorStatus.ContainersGenerated)
                {
                    EventHandler handler = null;

                    handler = new EventHandler(delegate
                    {
                        if (currentContainer.ItemContainerGenerator.Status == GeneratorStatus.ContainersGenerated)
                        {
                            if (ExpandAndSelectItem(currentContainer, itemToSelect) == false)
                                currentContainer.IsExpanded = false;

                            currentContainer.ItemContainerGenerator.StatusChanged -= handler;
                        }
                    });

                    currentContainer.ItemContainerGenerator.StatusChanged += handler;

                    if (currentContainer.IsExpanded == false)
                        currentContainer.IsExpanded = true;
                }
                else
                {
                    if (ExpandAndSelectItem(currentContainer, itemToSelect) == false)
                        currentContainer.IsExpanded = bIsExpanded;
                    else
                        return true;
                }
            }
        }

        return false;
    }
}

If it's not broken, fix it until it is

SledgeHammer0112-Jul-12 12:13

SledgeHammer01

12-Jul-12 12:13

You need to make SelectedItemEx mode=TwoWay.

Kevin Marois12-Jul-12 12:23