使用带有HierarchicalDataTemplate的样式与Caliburn.Micro和MahApps框架

时间:2013-12-16 22:39:29

标签: c# wpf xaml caliburn.micro mahapps.metro

在下面的示例中,我将MenuItem的完整样式粘贴到我的UserControll中,只是为了添加属性

<Setter Property="cal:Message.Attach" Value="MenuEntryClicked($dataContext)" />

这样做的原因是我需要将一个回调附加到我的MenuItems,这样我的视图模型就可以根据点击进行操作。还有其他方法可以实现同样的目标吗?

我尝试使用BasedOn属性并创建一个inhered样式。问题是我使用VisualStudio主题进行mahapps,而MenuItem的样式是在以下文件中没有名称/键创建的:

https://github.com/MahApps/MahApps.Metro/blob/master/MahApps.Metro/Styles/VS/Menu.xaml

 <Menu Grid.Column="0"  SnapsToDevicePixels="True" Margin="2,0,0,0" x:Name="Plugins" >
        <Menu.Resources>        
            <HierarchicalDataTemplate ItemsSource="{Binding MenuItems}" DataType="{x:Type sap:MenuItemViewModel}">
                <ContentPresenter  Content="{Binding Caption}"  RecognizesAccessKey="True" >
                </ContentPresenter>                
            </HierarchicalDataTemplate>
        </Menu.Resources>
        <Style TargetType="{x:Type MenuItem}">

            <Setter Property="cal:Message.Attach" Value="MenuEntryClicked($dataContext)" />
            <Setter Property="Foreground"
                        Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type MenuItem}">
                        <!--Border 1-->
                        <Border x:Name="Border"
                                    Background="Transparent"
                                    BorderBrush="Transparent"
                                    BorderThickness="1"
                                    SnapsToDevicePixels="False">
                            <Grid x:Name="Grid">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="Col0"
                                                          MinWidth="17"
                                                          Width="Auto"
                                                          SharedSizeGroup="MenuItemIconColumnGroup" />
                                    <ColumnDefinition Width="Auto"
                                                          SharedSizeGroup="MenuTextColumnGroup" />
                                    <ColumnDefinition Width="Auto"
                                                          SharedSizeGroup="MenuItemIGTColumnGroup" />
                                    <ColumnDefinition x:Name="Col3"
                                                          Width="14" />
                                </Grid.ColumnDefinitions>
                                <ContentPresenter Grid.Column="0"
                                                      x:Name="Icon"
                                                      VerticalAlignment="Center"
                                                      ContentSource="Icon" />
                                <ContentPresenter Grid.Column="1"
                                                      Margin="{TemplateBinding Padding}"
                                                      x:Name="HeaderHost"
                                                      RecognizesAccessKey="True"
                                                      ContentSource="Header"
                                                      VerticalAlignment="Center" />
                                <ContentPresenter Grid.Column="2"
                                                      Margin="8,1,8,1"
                                                      x:Name="IGTHost"
                                                      ContentSource="InputGestureText"
                                                      VerticalAlignment="Center" />
                                <Grid Grid.Column="3"
                                          Margin="4,0,6,0"
                                          x:Name="ArrowPanel"
                                          VerticalAlignment="Center">
                                    <Path x:Name="ArrowPanelPath"
                                              HorizontalAlignment="Right"
                                              VerticalAlignment="Center"
                                              Fill="{TemplateBinding Foreground}"
                                              Data="M0,0 L0,8 L4,4 z" />
                                </Grid>
                                <Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
                                           Placement="Right"
                                           HorizontalOffset="-1"
                                           x:Name="SubMenuPopup"
                                           Focusable="false"
                                           PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"
                                           AllowsTransparency="True">
                                    <Grid Margin="0,0,5,5">
                                        <!--Border 2-->
                                        <Border x:Name="SubMenuBorder"
                                                    BorderBrush="{StaticResource MenuSeparatorBorderBrush}"
                                                    BorderThickness="1"
                                                    Background="{StaticResource SubmenuItemBackground}"
                                                    SnapsToDevicePixels="True">
                                            <Grid x:Name="SubMenu"
                                                      Grid.IsSharedSizeScope="True"
                                                      Margin="2">
                                                <StackPanel IsItemsHost="True"
                                                                KeyboardNavigation.DirectionalNavigation="Cycle" />
                                            </Grid>
                                            <Border.Effect>
                                                <DropShadowEffect ShadowDepth="2"
                                                                      Color="Black" />
                                            </Border.Effect>
                                        </Border>
                                        <!--Border 3-->
                                        <Border Margin="1,0,0,0"
                                                    x:Name="TransitionBorder"
                                                    Width="0"
                                                    Height="2"
                                                    VerticalAlignment="Top"
                                                    HorizontalAlignment="Left"
                                                    Background="{StaticResource SubmenuItemBackground}"
                                                    SnapsToDevicePixels="False"
                                                    BorderThickness="1"
                                                    BorderBrush="{StaticResource SubmenuItemBackground}" />
                                    </Grid>
                                </Popup>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Role"
                                         Value="TopLevelHeader">
                                <Setter Property="Padding"
                                            Value="6,0,6,2" />
                                <Setter TargetName="SubMenuPopup"
                                            Property="Placement"
                                            Value="Bottom" />
                                <Setter TargetName="Col0"
                                            Property="MinWidth"
                                            Value="0" />
                                <Setter TargetName="Col3"
                                            Property="Width"
                                            Value="Auto" />
                                <Setter TargetName="Icon"
                                            Property="Visibility"
                                            Value="Collapsed" />
                                <Setter TargetName="IGTHost"
                                            Property="Visibility"
                                            Value="Collapsed" />
                                <Setter TargetName="ArrowPanel"
                                            Property="Visibility"
                                            Value="Collapsed" />
                                <Setter TargetName="SubMenuBorder"
                                            Property="BorderThickness"
                                            Value="1,1,1,1" />
                                <Setter TargetName="SubMenu"
                                            Property="Margin"
                                            Value="2,3,2,2" />
                                <Setter TargetName="TransitionBorder"
                                            Property="Width"
                                            Value="{Binding ActualWidth, ElementName=Grid}" />
                            </Trigger>
                            <Trigger Property="Role"
                                         Value="TopLevelItem">
                                <Setter Property="Padding"
                                            Value="6,0,6,2" />
                                <Setter TargetName="Col0"
                                            Property="MinWidth"
                                            Value="0" />
                                <Setter TargetName="Col3"
                                            Property="Width"
                                            Value="Auto" />
                                <Setter TargetName="Icon"
                                            Property="Visibility"
                                            Value="Collapsed" />
                                <Setter TargetName="IGTHost"
                                            Property="Visibility"
                                            Value="Collapsed" />
                                <Setter TargetName="ArrowPanel"
                                            Property="Visibility"
                                            Value="Collapsed" />
                            </Trigger>
                            <Trigger Property="Role"
                                         Value="SubmenuHeader">
                                <Setter Property="DockPanel.Dock"
                                            Value="Top" />
                                <Setter Property="Padding"
                                            Value="10,3,0,3" />
                                <Setter TargetName="Border"
                                            Property="MinHeight"
                                            Value="22" />
                                <Setter TargetName="Border"
                                            Property="Background"
                                            Value="{StaticResource SubmenuItemBackground}" />
                            </Trigger>
                            <Trigger Property="Role"
                                         Value="SubmenuItem">
                                <Setter Property="DockPanel.Dock"
                                            Value="Top" />
                                <Setter Property="Padding"
                                            Value="10,3,0,3" />
                                <Setter TargetName="Border"
                                            Property="MinHeight"
                                            Value="22" />
                                <Setter TargetName="ArrowPanel"
                                            Property="Visibility"
                                            Value="Collapsed" />
                                <Setter TargetName="Border"
                                            Property="Background"
                                            Value="{StaticResource SubmenuItemBackground}" />
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsHighlighted"
                                                   Value="true" />
                                    <Condition Property="Role"
                                                   Value="TopLevelHeader" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Border"
                                            Property="Background"
                                            Value="{StaticResource MenuItemHighlightedBackground}" />
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsHighlighted"
                                                   Value="true" />
                                    <Condition Property="Role"
                                                   Value="TopLevelItem" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Border"
                                            Property="Background"
                                            Value="{StaticResource MenuItemHighlightedBackground}" />
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsHighlighted"
                                                   Value="true" />
                                    <Condition Property="Role"
                                                   Value="SubmenuHeader" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Border"
                                            Property="Background"
                                            Value="{StaticResource SubmenuItemBackgroundHighlighted}" />
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsHighlighted"
                                                   Value="true" />
                                    <Condition Property="Role"
                                                   Value="SubmenuItem" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Border"
                                            Property="Background"
                                            Value="{StaticResource SubmenuItemBackgroundHighlighted}" />
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSubmenuOpen"
                                                   Value="true" />
                                    <Condition Property="Role"
                                                   Value="TopLevelHeader" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Border"
                                            Property="Background"
                                            Value="{StaticResource SubmenuItemBackground}" />
                                <Setter TargetName="Border"
                                            Property="BorderBrush"
                                            Value="{StaticResource MenuSeparatorBorderBrush}" />
                                <Setter TargetName="Border"
                                            Property="BorderThickness"
                                            Value="1,1,1,0" />
                            </MultiTrigger>
                            <Trigger Property="IsSubmenuOpen"
                                         Value="true">
                                <Setter TargetName="ArrowPanelPath"
                                            Property="Fill"
                                            Value="{StaticResource BackgroundSelected}" />
                            </Trigger>
                            <Trigger Property="IsSuspendingPopupAnimation"
                                         Value="true">
                                <Setter TargetName="SubMenuPopup"
                                            Property="PopupAnimation"
                                            Value="None" />
                            </Trigger>
                            <Trigger Property="Icon"
                                         Value="{x:Null}">
                                <Setter TargetName="Icon"
                                            Property="Visibility"
                                            Value="Collapsed" />
                            </Trigger>
                            <Trigger Property="IsEnabled"
                                         Value="False">
                                <Setter Property="Foreground"
                                            Value="{StaticResource MenuDisabledForeground}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Menu>

1 个答案:

答案 0 :(得分:0)

这是两个解决方法,在mahapps.metro修复问题之前

1)复制整个样式并给它一个密钥并在代码中使用此密钥

2)或只使用您需要的菜单样式。

<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/VS/Menu.xaml" />
</ResourceDictionary.MergedDictionaries>

希望有所帮助