第一个 TreeViewItem 未设置样式（MahApps Metro TreeView）答案

【问题标题】：First TreeViewItem not being styled (MahApps Metro TreeView)第一个 TreeViewItem 未设置样式（MahApps Metro TreeView）
【发布时间】：2013-12-28 10:27:52
【问题描述】：

我在 WPF 中使用 MahApps Metro 样式并尝试向 TreeViewItem 添加样式，以便节点旁边有一个文件夹图标。 (http://mahapps.com/MahApps.Metro/)

这很简单，我所要做的就是覆盖 TreeViewItem 标题模板并添加到图像中。

问题是由于某种原因，新模板没有应用于树中的第一个条目，正如您所看到的那样：

所有其他树节点工作正常，但第一个拒绝应用样式。

我已经确认这与 Controls.TreeView.xaml 中包含的 MahApps TreeView 样式有关（一个没有 MahApps 但具有与预期相同的自定义样式的新项目），但我无法确切地看到发生了什么。

在使用 MahApps 时，有没有人有任何设置 TreeViewItems 的经验？

<TreeView Grid.Column="0" Name="FolderView">

        <TreeView.Resources>
            <Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource MetroTreeViewItem}">
                <Setter Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Image Name="img"
                                    Width="16"
                                    Height="16"
                                    Stretch="Fill"
                                    Source="Images/Folder.png"
                                    Margin="3"   
                                    VerticalAlignment="Center"
                                   />
                                <TextBlock Text="{Binding}" Margin="0,0" VerticalAlignment="Center" />
                            </StackPanel>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TreeView.Resources>
    </TreeView>

【问题讨论】：

尝试使用DataTemplate，而不是HierarchicalDataTemplate。
感谢您的建议。我已经尝试过更改，但结果是一样的。
扩展后样式是否适用于其他包含子项的项目？
是的，它只是 MahApps 树视图似乎有这个问题.. 与他们使用的模板样式有关。
你有解决这个问题的办法吗？

标签： c# wpf mahapps.metro

【解决方案1】：

试试这个`

<TreeView Grid.Column="0" Name="FolderView">
        <TreeView.Resources>
            <Style TargetType="{x:Type TreeViewItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TreeViewItem">
                            <Grid Background="Transparent">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition MinWidth="25" Width="Auto" />
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <ToggleButton x:Name="Expander"  IsChecked="{Binding Path=IsExpanded,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press">
                                    <ToggleButton.Style>
                                        <Style TargetType="ToggleButton">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="ToggleButton">
                                                        <Border Height="0" Width="0"/>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </ToggleButton.Style>
                                </ToggleButton>
                                <ContentPresenter x:Name="PART_Header" ContentSource="Header"/>
                                <Grid x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"  Margin="0,-5,0,0">
                                    <ItemsPresenter />
                                </Grid>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsExpanded" Value="false">
                                    <Setter TargetName="ItemsHost" Property="Visibility"  Value="Collapsed"/>
                                </Trigger>
                                <Trigger Property="HasItems"  Value="false">
                                    <Setter TargetName="Expander" Property="Visibility" Value="Hidden"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Image Name="img" Width="16" Height="16" Stretch="Fill" Source="Images/Folder.png" Margin="3" VerticalAlignment="Center"/>
                                <TextBlock Text="{Binding}" Margin="0,0" VerticalAlignment="Center" />
                            </StackPanel>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TreeView.Resources>
    </TreeView>

【讨论】：

您好，感谢您的输入，但这也忽略了树中的第一个条目。我认为这与 MahApps TreeView 模板有关，而不是 TreeViewItem

【解决方案2】：

我找到了解决方案：

您需要像这样禁用 MahApps Metro 风格：Style="{x:Null}"

<TreeView Style="{x:Null}" Grid.Column="0" Grid.Row="1" >
<TreeView.Resources>
    <Style TargetType="{x:Type TreeViewItem}">
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Width="20" Height="20" Stretch="Fill" Source="/Resources/folder.png" />
                        <TextBlock Text="{Binding}" />
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TreeView.Resources>
</TreeView>

【讨论】：