Question

I have a TreeView where each node has an icon and a descriptive text. But I do not want any node can be selected. Instead, I want that each node act as a button. It run a command when the user press it. But it may not look like a button or hyperlink

This is what I tried so far. The problem is that the text is blue and the text underlined. In addition, sometime the node is selected and therefore blue.

<TreeView.Resources>
    <HierarchicalDataTemplate DataType="{x:Type vm:ListGroupViewModel}"  ItemsSource="{Binding Children}">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Text}" FontWeight="Bold" ></TextBlock>
        </StackPanel>
    </HierarchicalDataTemplate>

    <DataTemplate DataType="{x:Type vm:ListNodeViewModel}">
        <TextBlock> 
            <Hyperlink TextDecorations="{x:Null}" Command="{Binding ClickCommand, Mode=OneTime}">
                <StackPanel Orientation="Horizontal">
                    <Image Margin="0,2,2,0" Source="{Binding Icon}" />
                    <TextBlock Text="{Binding Text}" />
                </StackPanel>
            </Hyperlink>
        </TextBlock>
    </DataTemplate>
</TreeView.Resources>
Was it helpful?

Solution

You should override hyperlink style:

        <Style x:Key="HyperlinkStyle" TargetType="Hyperlink">
            <Setter Property="Foreground"
                    Value="Black"/>
            <Setter Property="TextDecorations"
                    Value="{x:Null}"/>
        </Style>

        <DataTemplate DataType="{x:Type vm:ListNodeViewModel}">
            <TextBlock> 
                <Hyperlink Command="{Binding ClickCommand, Mode=OneTime}"
                           Style="{StaticResource HyperlinkStyle}">
                    <StackPanel Orientation="Horizontal">
                        <Image Margin="0,2,2,0" Source="{Binding Icon}" />
                        <TextBlock Text="{Binding Name}" />
                    </StackPanel>
                </Hyperlink>
            </TextBlock>
        </DataTemplate>

To hide tree item selection you could override SystemColors.HighlightBrushKey, which tree view uses to highlight items:

<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top