Question

我是WPF的新手，正在努力将这些信息放在一起。我正在尝试创建一个两级垂直菜单，如here。我通过覆盖树视图项的控件模板实现了我想要的外观。

这是我的代码。

<BooleanToVisibilityConverter x:Key="BooleanToVisibility" />

<Style x:Key="MenuText" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
    <Setter Property="Foreground" Value="#FFA7B1C2"/>
    <Setter Property="VerticalAlignment" Value="Center"/>

</Style>

<Style x:Key="MenuIcon" TargetType="TextBlock" BasedOn="{StaticResource BaseIconTextBlockStyle}">
    <Setter Property="Foreground" Value="#FFA7B1C2"/>
    <Setter Property="VerticalAlignment" Value="Center"/>

</Style>

<Style x:Key="MenuToggleButton" TargetType="ToggleButton">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Height" Value="46"/>

    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Cursor" Value="Hand"/>
        </Trigger>


    </Style.Triggers>
</Style>

<ControlTemplate x:Key="MenuItemNormal" TargetType="{x:Type TreeViewItem}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <ToggleButton Grid.Row="0" Tag="{TemplateBinding Tag}" Content="{TemplateBinding Header}" Style="{StaticResource MenuToggleButton}" >
            <ToggleButton.Template>
                <ControlTemplate TargetType="ToggleButton">
                    <Border x:Name="Border" BorderBrush="Transparent" >

                        <StackPanel Orientation="Horizontal" Background="{TemplateBinding Background}" Margin="25,0" >
                            <TextBlock x:Name="Icon" Style="{StaticResource MenuIcon}" Text="{TemplateBinding Tag}"/>
                            <TextBlock x:Name="MenuText" Style="{StaticResource MenuText}" Text="{TemplateBinding Content}" Margin="6,0,0,0"/>
                        </StackPanel>



                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="Border">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FF293846"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>

                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Icon">
                                            <EasingColorKeyFrame KeyTime="0" Value="White"/>
                                        </ColorAnimationUsingKeyFrames>

                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="MenuText">
                                            <EasingColorKeyFrame KeyTime="0" Value="White"/>
                                        </ColorAnimationUsingKeyFrames>

                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal"/>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Border">
                                            <EasingThicknessKeyFrame KeyTime="0" Value="4,0,0,0"/>
                                        </ThicknessAnimationUsingKeyFrames>

                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF19AA8D"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Border>
                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>

        <StackPanel  Grid.Row="1" Visibility="Visible">
            <ItemsPresenter />
        </StackPanel>
    </Grid>
</ControlTemplate>

<ControlTemplate x:Key="MenuItemParent" TargetType="{x:Type TreeViewItem}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <ToggleButton x:Name="MenuButton" Grid.Row="0" Tag="{TemplateBinding Tag}" Content="{TemplateBinding Header}" Style="{StaticResource MenuToggleButton}" >
            <ToggleButton.Template>
                <ControlTemplate TargetType="ToggleButton">
                    <Border x:Name="Border" BorderBrush="Transparent" >
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>

                            <StackPanel Grid.Column="0"  Orientation="Horizontal" Background="{TemplateBinding Background}" Margin="25,0" >
                                <TextBlock x:Name="Icon" Style="{StaticResource MenuIcon}" Text="{TemplateBinding Tag}"/>
                                <TextBlock x:Name="MenuText" Style="{StaticResource MenuText}" Text="{TemplateBinding Content}" Margin="6,0,0,0"/>
                            </StackPanel>
                            <TextBlock x:Name="Chevron" Grid.Column="1" Style="{StaticResource MenuIcon}"  Text="&#xf104;" Margin="0,0,20,0"/>
                        </Grid>

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="Border">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FF293846"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>

                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Icon">
                                            <EasingColorKeyFrame KeyTime="0" Value="White"/>
                                        </ColorAnimationUsingKeyFrames>

                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="MenuText">
                                            <EasingColorKeyFrame KeyTime="0" Value="White"/>
                                        </ColorAnimationUsingKeyFrames>

                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Chevron">
                                            <EasingColorKeyFrame KeyTime="0" Value="White"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal"/>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Border">
                                            <EasingThicknessKeyFrame KeyTime="0" Value="4,0,0,0"/>
                                        </ThicknessAnimationUsingKeyFrames>

                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF19AA8D"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)" Storyboard.TargetName="Chevron">
                                            <DiscreteStringKeyFrame KeyTime="0" Value="&#xf107;"/>
                                        </StringAnimationUsingKeyFrames>

                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                    </Border>
                </ControlTemplate>
            </ToggleButton.Template>

            <ToggleButton.Triggers>
                <EventTrigger RoutedEvent="ToggleButton.Checked">
                    <BeginStoryboard>
                        <Storyboard >
                            <DoubleAnimation Storyboard.TargetName="ChildContainer" Storyboard.TargetProperty="RenderTransform.ScaleY" From="0" To="1" Duration="0:00:.500"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                    <BeginStoryboard>
                        <Storyboard >
                            <DoubleAnimation Storyboard.TargetName="ChildContainer" Storyboard.TargetProperty="RenderTransform.ScaleY" From="1" To="0" Duration="0:00:.500"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </ToggleButton.Triggers>

        </ToggleButton>

        <StackPanel x:Name="ChildContainer"  Grid.Row="1" Visibility="{Binding IsChecked, ElementName=MenuButton, Converter={StaticResource BooleanToVisibility}}">
            <StackPanel.RenderTransform>
                <ScaleTransform ScaleY="0"></ScaleTransform>
            </StackPanel.RenderTransform>
            <ItemsPresenter />
        </StackPanel>
    </Grid>
</ControlTemplate>

<ControlTemplate x:Key="MenuItemChild" TargetType="{x:Type TreeViewItem}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <ToggleButton Grid.Row="0" Tag="{TemplateBinding Tag}" Content="{TemplateBinding Header}" Style="{StaticResource MenuToggleButton}" >
            <ToggleButton.Template>
                <ControlTemplate TargetType="ToggleButton">
                    <Border x:Name="Border" BorderBrush="Transparent" Background="#FF293846">

                        <StackPanel Grid.Column="0"  Orientation="Horizontal" Background="{TemplateBinding Background}" Margin="25,0" >
                            <TextBlock x:Name="Icon" Style="{StaticResource MenuIcon}" Text="&#xf192;"/>
                            <TextBlock x:Name="MenuText" Style="{StaticResource MenuText}" Text="{TemplateBinding Content}" Margin="6,0,0,0"/>
                        </StackPanel>



                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="Border">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FF293846"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>

                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Icon">
                                            <EasingColorKeyFrame KeyTime="0" Value="White"/>
                                        </ColorAnimationUsingKeyFrames>

                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="MenuText">
                                            <EasingColorKeyFrame KeyTime="0" Value="White"/>
                                        </ColorAnimationUsingKeyFrames>

                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal"/>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Border">
                                            <EasingThicknessKeyFrame KeyTime="0" Value="4,0,0,0"/>
                                        </ThicknessAnimationUsingKeyFrames>

                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF19AA8D"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Border>
                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>

        <StackPanel  Grid.Row="1" Visibility="Visible">
            <ItemsPresenter />
        </StackPanel>
    </Grid>
</ControlTemplate>

在我的窗口中，我像这样声明Treeview。

 <TreeView x:Name="Menu" Background="Transparent" BorderThickness="0">
            <TreeViewItem Tag="&#xf009;" Header="Dashboard" Template="{StaticResource MenuItemNormal}"  />

            <TreeViewItem Tag="&#xf015;" Header="Home" Template="{StaticResource MenuItemNormal}"  />

            <TreeViewItem Tag="&#xf1fe;" Header="Reporting" Template="{StaticResource MenuItemNormal}" />

            <TreeViewItem Tag="&#xf07a;" Header="Sell" Template="{StaticResource MenuItemNormal}" />

            <TreeViewItem Tag="&#xf03a;" Header="Products" Template="{StaticResource MenuItemParent}"  >
                <TreeViewItem Header="Item 2.1" Template="{StaticResource MenuItemChild}"  />
                <TreeViewItem Header="Item 2.2" Template="{StaticResource MenuItemChild}" />
            </TreeViewItem>

            <TreeViewItem Tag="&#xf1da;" Header="Sales Ledger" Template="{StaticResource MenuItemNormal}" />

            <TreeViewItem Tag="&#xf0c0;" Header="Customers" Template="{StaticResource MenuItemNormal}" />

            <TreeViewItem Tag="&#xf0ad;" Header="Setup" Template="{StaticResource MenuItemNormal}" />
        </TreeView>

问题是，现在我意识到我应该已经覆盖了数据树视图项的模板，因为我想将树视图绑定到我的视图模型上的属性。我无法弄清楚我是否使用数据模板如何删除树视图项附带的默认丑陋扩展器图标

具体来说我有3个问题

覆盖控制模板是实现我的正确方法试着做什么？
如何将树视图绑定到视图模型属性而不是硬编码项目？
如何在视图模型中跟踪所选项目？

提前谢谢！

如何创建垂直菜单样式树视图控件

0 个答案: