Question

我使用this解决方案来绑定我的Menu，就像在此示例中一样，我想知道如何将icon添加到我的MenuItem

在我的模型中，我还有一个名为IsSelected的属性，所以我尝试这种方法：

<Menu.ItemTemplate>
      <HierarchicalDataTemplate DataType="{x:Type Menu:MenuItemViewModel}" ItemsSource="{Binding Path=MenuItems}">
      <StackPanel Orientation="Horizontal">
         <Image Source="pack://application:,,,/Resources/checked_lightslategray.ico"
                Width="12"
                Height="12"
                Margin="0,0,0,0">
                <Image.Style>
                    <Style TargetType="Image">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=IsSelected}" Value="True">
                                   <Setter Property="Visibility" Value="Visible"/>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Path=IsSelected}" Value="False">
                                    <Setter Property="Visibility" Value="Collapsed"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
        <TextBlock Text="{Binding Description}" Margin="10,0,0,0"/>
        </StackPanel>
    </HierarchicalDataTemplate>
</Menu.ItemTemplate>

样式

<Style TargetType="{x:Type Menu}" x:Key="StandardMenu">
        <Style.Resources>
            <Style x:Key="{x:Static MenuItem.SeparatorStyleKey}" TargetType="Separator">
                <Setter Property="Height" Value="1"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Separator">
                            <Border BorderBrush="{StaticResource MenuSeparatorBorderBrush}" BorderThickness="1" Margin="25,0,0,0"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="{x:Type MenuItem}">
                <Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}"/>
                <Setter Property="FontSize" Value="{DynamicResource ApplicationFontSize}"/>
                <Setter Property="Command" Value="{Binding Command}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type MenuItem}">
                            <!--Border 1-->
                            <Border x:Name="Border" Background="Transparent" BorderBrush="Transparent"  CornerRadius="2"
                                    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" CornerRadius="5"
                                                    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>
                    </Setter.Value>
                </Setter>
            </Style>
        </Style.Resources>
        <Setter Property="Background" Value="{StaticResource LightBackground}"/>
        <Setter Property="Foreground" Value="{StaticResource Foreground}"/>
    </Style

结果

如您所见，这看起来不太好。

所以我认为最好的选择是将icon与IsSelect value一起使用，但是我不知道我需要在style中进行什么更改才能使其看起来更好。 / p>

更新

Answer 1

尝试为您的Menu使用样式。我从Icon中删除了ControlTemplate。因此，您将不会看到 Icon 空格，并且 Tick 标记的当前Image将按原样工作。

菜单样式

<Style TargetType="{x:Type Menu}" x:Key="StandardMenu">
    <Style.Resources>
        <Style x:Key="{x:Static MenuItem.SeparatorStyleKey}" TargetType="Separator">
            <Setter Property="Height" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Separator">
                        <Border BorderBrush="{StaticResource MenuSeparatorBorderBrush}" BorderThickness="1" Margin="25,0,0,0"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type MenuItem}">
            <Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}"/>
            <Setter Property="FontSize" Value="{DynamicResource ApplicationFontSize}"/>
            <Setter Property="Command" Value="{Binding Command}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type MenuItem}">
                        <!--Border 1-->
                        <Border x:Name="Border" Background="Transparent" BorderBrush="Transparent"  CornerRadius="2"
                                BorderThickness="1" SnapsToDevicePixels="False">
                            <Grid x:Name="Grid">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/>
                                    <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
                                    <ColumnDefinition x:Name="Col3" Width="14"/>
                                </Grid.ColumnDefinitions>
                                <ContentPresenter Grid.Column="0" Margin="{TemplateBinding Padding}" x:Name="HeaderHost" RecognizesAccessKey="True" ContentSource="Header" VerticalAlignment="Center"/>
                                <ContentPresenter Grid.Column="1" Margin="8,1,8,1" x:Name="IGTHost" ContentSource="InputGestureText" VerticalAlignment="Center"/>
                                <Grid Grid.Column="2" 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" CornerRadius="5"
                                                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>
                </Setter.Value>
            </Setter>
        </Style>
    </Style.Resources>
    <Setter Property="Background" Value="{StaticResource LightBackground}"/>
    <Setter Property="Foreground" Value="{StaticResource Foreground}"/>
</Style>

在样式菜单中添加图标

1 个答案: