none
[UWP]new Treeview Control and Treeviewnodes RRS feed

  • Question

  • You introduced a new control Treeview this is great (although it is not at all compatible with the "temporary" solution that existed in Samples). I am trying to change the color of text when treeviewnode is selected and do not seem to be able to do that.

    Even if I define the default color of the treeviewnode this color is applied to only some of the nodes.

    here is what I have in my XAML:

     <DataTemplate x:Key="TreeViewItemDataTemplate">
                <TextBlock Text="{Binding Content.Texte}" Tag="{Binding Content.Nom}" 
                            Margin="{Binding Depth, Converter={StaticResource IntToIndConverter}}"
                            HorizontalAlignment="Left"
                            FontSize="12"
                            FontFamily="Segoe MDL2 Assests" 
                            MinHeight="20"
                            Height="20"
                            Foreground="Red"
                            FontWeight="{Binding Weight, Converter={StaticResource KeyStringToFontWeight}}"
                            RightTapped="TextBlock_RightTapped"
                           />
            </DataTemplate>

    the Foreground Color is not always applied.

    What am I missing? (same with FontWeight I would like to change it programmatically in code behind)


    Tuesday, May 22, 2018 1:12 PM

Answers

All replies

  • Hi pierresa,

    You could try to create a template for the TreeView. Like the following image:

    Choose Edit a Copy and then change the ContentPresenter.Foreground to the color you want in the VisualState for Selected.

    You could look at the following code snippet:

         <Style x:Key="BaseTextBlockStyle" TargetType="TextBlock">
                <Setter Property="FontFamily" Value="XamlAutoFontFamily"/>
                <Setter Property="FontWeight" Value="SemiBold"/>
                <Setter Property="FontSize" Value="15"/>
                <Setter Property="TextTrimming" Value="None"/>
                <Setter Property="TextWrapping" Value="Wrap"/>
                <Setter Property="LineStackingStrategy" Value="MaxHeight"/>
                <Setter Property="TextLineBounds" Value="Full"/>
            </Style>
            <Style x:Key="BodyTextBlockStyle" BasedOn="{StaticResource BaseTextBlockStyle}" TargetType="TextBlock">
                <Setter Property="FontWeight" Value="Normal"/>
                <Setter Property="FontSize" Value="15"/>
            </Style>
            <Style x:Key="CaptionTextBlockStyle" BasedOn="{StaticResource BaseTextBlockStyle}" TargetType="TextBlock">
                <Setter Property="FontSize" Value="12"/>
                <Setter Property="FontWeight" Value="Normal"/>
            </Style>
            <DataTemplate x:Key="TreeViewItemDataTemplate">
                <Grid Height="44">
                    <TextBlock HorizontalAlignment="Left" Style="{ThemeResource BodyTextBlockStyle}" Text="{Binding Content}" VerticalAlignment="Center"/>
                </Grid>
            </DataTemplate>
    
            <Style x:Key="TreeViewItemStyle" TargetType="TreeViewItem">
                <Setter Property="Padding" Value="0"/>
                <Setter Property="Background" Value="{ThemeResource TreeViewItemBackground}"/>
                <Setter Property="BorderBrush" Value="{ThemeResource TreeViewItemBorderBrush}"/>
                <Setter Property="BorderThickness" Value="{ThemeResource TreeViewItemBorderThemeThickness}"/>
                <Setter Property="GlyphBrush" Value="{ThemeResource TreeViewItemForeground}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TreeViewItem">
                            <Grid x:Name="ContentPresenterGrid" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Margin="0,0,0,0">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="PointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="ContentPresenterGrid.(RevealBrush.State)" Value="PointerOver"/>
                                                <Setter Target="ContentPresenterGrid.Background" Value="{ThemeResource TreeViewItemBackgroundPointerOver}"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TreeViewItemForegroundPointerOver}"/>
                                                <Setter Target="ContentPresenterGrid.BorderBrush" Value="{ThemeResource TreeViewItemBorderBrushPointerOver}"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <VisualState.Setters>
                                                <Setter Target="ContentPresenterGrid.(RevealBrush.State)" Value="Pressed"/>
                                                <Setter Target="ContentPresenterGrid.Background" Value="{ThemeResource TreeViewItemBackgroundPressed}"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TreeViewItemForegroundPressed}"/>
                                                <Setter Target="ContentPresenterGrid.BorderBrush" Value="{ThemeResource TreeViewItemBorderBrushPressed}"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="Selected">
                                            <VisualState.Setters>
                                                <Setter Target="ContentPresenterGrid.Background" Value="{ThemeResource TreeViewItemBackgroundSelected}"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="Red"/>
                                                <Setter Target="ContentPresenterGrid.BorderBrush" Value="{ThemeResource TreeViewItemBorderBrushSelected}"/>
                                                
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <VisualState.Setters>
                                                <Setter Target="ContentPresenterGrid.Background" Value="{ThemeResource TreeViewItemBackgroundDisabled}"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TreeViewItemForegroundDisabled}"/>
                                                <Setter Target="ContentPresenterGrid.BorderBrush" Value="{ThemeResource TreeViewItemBorderBrushDisabled}"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="PointerOverSelected">
                                            <VisualState.Setters>
                                                <Setter Target="ContentPresenterGrid.(RevealBrush.State)" Value="PointerOver"/>
                                                <Setter Target="ContentPresenterGrid.Background" Value="{ThemeResource TreeViewItemBackgroundSelectedPointerOver}"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TreeViewItemForegroundSelectedPointerOver}"/>
                                                <Setter Target="ContentPresenterGrid.BorderBrush" Value="{ThemeResource TreeViewItemBorderBrushSelectedPointerOver}"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="PressedSelected">
                                            <VisualState.Setters>
                                                <Setter Target="ContentPresenterGrid.(RevealBrush.State)" Value="Pressed"/>
                                                <Setter Target="ContentPresenterGrid.Background" Value="{ThemeResource TreeViewItemBackgroundSelectedPressed}"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TreeViewItemForegroundSelectedPressed}"/>
                                                <Setter Target="ContentPresenterGrid.BorderBrush" Value="{ThemeResource TreeViewItemBorderBrushSelectedPressed}"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="SelectedDisabled">
                                            <VisualState.Setters>
                                                <Setter Target="ContentPresenterGrid.Background" Value="{ThemeResource TreeViewItemBackgroundSelectedDisabled}"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TreeViewItemForegroundSelectedDisabled}"/>
                                                <Setter Target="ContentPresenterGrid.BorderBrush" Value="{ThemeResource TreeViewItemBorderBrushSelectedDisabled}"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="ReorderedPlaceholder">
                                            <Storyboard>
                                                <FadeOutThemeAnimation TargetName="MultiSelectGrid"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="TreeViewMultiSelectStates">
                                        <VisualState x:Name="TreeViewMultiSelectDisabled"/>
                                        <VisualState x:Name="TreeViewMultiSelectEnabledUnselected">
                                            <VisualState.Setters>
                                                <Setter Target="MultiSelectCheckBox.Visibility" Value="Visible"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="TreeViewMultiSelectEnabledSelected">
                                            <VisualState.Setters>
                                                <Setter Target="MultiSelectCheckBox.Visibility" Value="Visible"/>
                                                <Setter Target="MultiSelectGrid.Background" Value="{ThemeResource TreeViewItemBackgroundSelected}"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="DragStates">
                                        <VisualState x:Name="NotDragging"/>
                                        <VisualState x:Name="MultipleDraggingPrimary">
                                            <VisualState.Setters>
                                                <Setter Target="MultiArrangeOverlayTextBorder.Opacity" Value="1"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid x:Name="MultiSelectGrid">
                                   ..........
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="TreeViewStyle1" TargetType="TreeView">
            .........
            </Style>

    Please pay attention to the line of code in bold font。


    Best regards,

    Roy


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, May 23, 2018 7:08 AM
    Moderator
  • Thank you for your reply. This helps, although:

    - as far as I can see only changing background has some effect (this could be linked to the fact that the node is a grid not a Textblock)

    - also I am trying to set node color from code behind. I'd like to set color not on "selected" or other events but depending on some properties in my page. I could do that with the temporary Treeview and have yet to find a solution to do that with released Treeview.

    Thank you

    Pierre

    Friday, June 8, 2018 12:42 PM
  • @Pierre,

    Currently, if you want to set node color from code behind, you could try to find the TreeViewItem control from the template of the TreeView by content and then set the property directly in the code like foreground color.

    You could refer my answer in thread about how to access a control in the template:https://social.msdn.microsoft.com/Forums/windowsapps/en-US/bc2205e3-61a4-473d-afe9-d2dbed72586d/uwpxamlhow-to-access-a-control-present-inside-data-template-of-listbox-programatically?forum=wpdevelop#0bd64aa5-986b-46ec-947e-d42376e5f526

    You need to check the content property of the TreeViewItem to judge if this is the right item you want.

    Best regards,

    Roy


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by pierresa Monday, June 11, 2018 9:08 AM
    Monday, June 11, 2018 8:15 AM
    Moderator